// index.html
<h1 class="exampleClass">Hi</h1>
<img src="👨‍💻"/>
<img id="uniqueId" src="👯‍♂️"/>

// main.js
const exampleClass = document.querySelector(".exampleClass");
const uniqueId = document.querySelector("#uniqueId");
const imgs = document.querySelectorAll("img"); // Array of elements

// The value of a constant cannot change through reassignment
// and it can't be redeclared.
const iCantChange = "👾";
// Just like var, this can be changed
let changeMe = 0;

iCantChange = 2 // Error

changeMe = 1 // All good

// Function declaration
function foo1(bar) {
    console.log(bar)
}

// Equivalent in an arrow function
const foo2 = (bar) => {
    console.log(bar
}

// How to call your function
foo1("Hello freeCodeCamp Montreal!"); // Prints "Hello freeCodeCamp Montreal!"
foo2("Hello online viewers!"); // Prints "Hello online viewers!"

// Class declaration
class Rectangle {
  // This runs on initiation
  constructor(height, width) {
    // this refers to the class object itself
    this.height = height;
    this.width = width;
  }

  calculateDimensions() {
    // It uses this scope's this
    return this.height * this.width;
  }
}

// You first need to declare your class and 
// then access it or you'll get an error
const rectangle = new Rectangle(30, 50);

// Define how the event should be handled
function someHandler(event) {
    console.log(event);
    console.log(event.code);
    console.log(event.keyCode);
}

// Note, we don't add () as to not run the function 
// immediately! We give it the event to listen to 
// and the handler it should run
document.addEventListener('keydown', someHandler);

// Define how the event should be handled
function someHandler(event) {
    console.log(event);
}

// After this runs, a keyDown event will no longer log anything
document.removeEventListener('keydown', someHandler);

function fruitHandler(fruit) {
    switch (fruit) {
      case 'Oranges':
        console.log('Orange you glad I didn\'t say Banana');
        // Terminates switch
        break;
      // Runs if fruit is Mangoes or Papayas
      case 'Mangoes':
      case 'Papayas':
        console.log('Mangoes are real');
        break;
      // Run if there's no matching case
      default:
        console.log('Sorry, we are out of ' + fruit);
    }
}

// index.html
<div class="space"></div>

// someJsFile.js
const space = document.querySelector(".space");
const img = document.createElement('img');

// Set class names
img.className = "foo classB";
// Set style
img.style.right = "0px";

// Adds img to the end of the list of 
// children (elements) of the space node
space.appendChild(img);

// Run myCallback every 500ms, or 0.5 seconds
const intervalID = window.setInterval(myCallback, 500);

function myCallback() {
  console.log("Hello");
}

// Clear the interval. You can put this in a button 
// onClick or even inside the callback itself
clearInterval(intervalID);