JavaScript Essential Training Study Notes

<script>  
  const allCode = document.querySelectorAll("code");  

  for (let item of allCode) {  
    item.innerHTML = `&lt;${item.innerHTML}&gt;`;  
  }  
</script>  

<script src="script.js"></script>  

<script src="JS/script.js"></script>  

<script src="JS/script.js" defer></script>  

<script src="JS/script.js"></script>  

<script type="module" src="backpack.js"></script>  
<script type="module" src="script.js"></script>  

const backpack = {...};  
export default backpack;  

import backpack from "./backpack.js";  

// Variable holds data.  
const backpack = {  
  // Curly brackets define data as an object.  
  name: "Everyday Backpack", // Properties defined using key-value pairs.  
  volume: 30,  
  color: "grey",  
  pocketNum: 15,  
  strapLength: {  
    // Properties can nest sub-objects with their own properties.  
    left: 26,  
    right: 26,  
  },  
  lidOpen: false,  
  toggleLid: function (lidStatus) {  
    // Methods are properties containing functions.  
    this.lidOpen = lidStatus; // “this” keyword refers to the current object.  
    updateBackpack(`Lid status changed.`);  
  },  
  newStrapLength: function (lengthLeft, lengthRight) {  
    this.strapLength.left = lengthLeft;  
    this.strapLength.right = lengthRight;  
    updateBackpack(`Strap lengths updated.`);  
  },  
};  

// Variable declaration: var / let / const  
// Variable name: refer to the name; get the data contained within  

const backpack = {  
  name: "Everyday Backpack",  
  volume: 30,  
  color: "grey",  
};  

console.log("The backpack object:", backpack);  
console.log("The pocketNum value:", backpack.pocketNum);  
console.log("Strap length L:", backpack.straplLength.left);  
var query = “"pocketNum”;  
console.log("The pocketNum value:", backpack[query]);  

  toggleLid: function (lidStatus) {  
    this.lidOpen = lidStatus;  
  },  

  toggleLid(lidStatus) {  
    this.lidOpen = lidStatus;  
  },  

/**  

 * Creating classes:  
 *  
 * Class declaration: class Name {}  
 * Class expression:  const Name = class {}  
 */  

class Backpack {  
  constructor(  
    // Defines parameters:  
    name,  
    volume,  
    color,  
    pocketNum,  
    strapLengthL,  
    strapLengthR,  
    lidOpen  
  ) {  
    // Define properties:  
    this.name = name;  
    this.volume = volume;  
    this.color = color;  
    this.pocketNum = pocketNum;  
    this.strapLength = {  
      left: strapLengthL,  
      right: strapLengthR,  
    };  
    this.lidOpen = lidOpen;  
  }  
  // Add methods like normal functions:  
  toggleLid(lidStatus) {  
    this.lidOpen = lidStatus;  
  }  
  newStrapLength(lengthLeft, lengthRight) {  
    this.strapLength.left = lengthLeft;  
    this.strapLength.right = lengthRight;  
  }  
}  

export default Backpack;  

/**  

 * Create a class for the Backpack object type.  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes>  
 */  
import Backpack from "./Backpack.js";  

const everydayPack = new Backpack("Everyday Backpack", 30, "grey", 15, 26, 26, false);  

console.log("The everydayPack object:", everydayPack);  
console.log("The pocketNum value:", everydayPack.pocketNum);  

    <script type="module" src="Backpack.js"></script>  
    <script type="module" src="script.js"></script>  

/**  

 * Create an object constructor function for the Backpack object type.  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new>  
 */  

function Backpack(name, volume, color, pocketNum, strapLengthL, strapLengthR, lidOpen) {  
  this.name = name;  
  this.volume = volume;  
  this.color = color;  
  this.pocketNum = pocketNum;  
  this.strapLength = {  
    left: strapLengthL,  
    right: strapLengthR,  
  };  
  this.lidOpen = lidOpen;  
  this.toggleLid = function (lidStatus) {  
    this.lidOpen = lidStatus;  
  };  
  this.newStrapLength = function (lengthLeft, lengthRight) {  
    this.strapLength.left = lengthLeft;  
    this.strapLength.right = lengthRight;  
  };  
}  

const everydayPack = new Backpack("Everyday Backpack", 30, "grey", 15, 26, 26, false);  

  backpackAge() {  
    let now = new Date(); // Global Object  
    let acquired = new Date(this.dateAcquired);  
    let elapsed = now - acquired; // elapsed time in milliseconds  
    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));  
    return daysSinceAcquired;  
  }  

/**  

 * Use template literals to output HTML  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals>  
 *  
 */  
import Backpack from "./Backpack.js";  

const everydayPack = new Backpack("Everyday Pack", 30, "grey", 15, 26, 26, false, "2018-12-5  

const content = `  
  <main>  
    <article>  
      <h1>${everydayPack.name}</h1>  
      <ul>  
        <li>Volume: ${everydayPack.volume}</li>  
        <li>Color: ${everydayPack.color}</li>  
        <li>Age: ${everydayPack.backpackAge()}</li>  
        <li>Number of pockets: ${everydayPack.pocketNum}</li>  
        <li>Left strap length: ${everydayPack.strapLength.left}</li>  
        <li>Right strap length: ${everydayPack.strapLength.right}</li>  
        <li>Lid status: ${everydayPack.lidOpen}</li>  
      </ul>  
    </article>  
  </main>  
`;  

document.body.innerHTML = content;  

const content = "<h1>" + everydayPack.name + "</h1>";  

/**  

 * Traverse the DOM tree using querySelector() and querySelectorAll()  
 */  
const main = document.querySelector(".maincontent");  
main.innerHTML = content;  
document.querySelectorAll("main li");  
document.querySelectorAll("main li").forEach(item => (item.style.backgroundColor = "red"));  

// Element.getElementsByClassName()  
var elements = element.getElementsByClassName("names");  
// Document.getElementByld()  
var elesent = document.getElementById("id");  

const div = document.createtlement("div");  
div.className = "foo";  

document.querySelector("h1").className;  
// "backpack__name"  
document.querySelector("h1").className = "new-class";  
// "new-class"  

const div = document.createElement("div");  
div.className = "foo";  

// our starting state: <div class="foo"></div>  
console.log(div.outerHTML);  

// use the classList API to remove and add classes  
div.classList.remove("foo");  
div.classList.add("anotherclass");  

// add or remove multiple classes  
div.classList.add("foo", "bar", "baz");  
div.classList.remove("foo", "bar", "baz");  

// add or remove multiple classes using spread syntax  
const cls = ["foo", "bar"];  
div.classList.add(...cls);  
div.classList.remove(...cls);  

// if visible is set remove it, otherwise add it  
div.classList.toggle("visible");  

// replace class "foo" with class "bar"  
div.classList.replace("foo", "bar");  

var para = document.getElementsByTagName("p")[0];  
var atts = para.attributes;  

// hasAttribute  
var result = element.hasAttribute(name);  

// getAttribute  
const div1 = document.getElementById("div1");  
//=> <div id="div1">Hi Champ!</div>  

const exampleAttr = div1.getAttribute("id");  
//=> "div1"  

const align = div1.getAttribute("align");  
//=> null  

var b = document.querySelector("button");  

b.setAttribute("name", "helloButton");  
b.setAttribute("disabled", "");  

// removeAttribute  
document.getElementById("div1").removeAttribute("align");  

<div style="color:red" id="myElement">..</div>  

var element = document.getElementById("myElement");  
var elementStyle = element.style;  

document.querySelector(".site-title").style.color;  
// "black"  

document.querySelector(".sity-title").style.color = "rebeccapurple";  

const main = document.querySelector(".maincontent");  

const newArticle = document.createElement("article");  
newArticle.classList.add("backpack");  
newArticle.setAttribute("id", "everyday");  
newArticle.innerHTML = content;  

main.append(newArticle);  

// prepend: adding before the first child of the Element  
let div = document.createElement("div");  
let p = document.createElement("p");  
let span = document.createElement("span");  
div.append(p);  
div.prepend(span);  
console.log(div.childNodes); // NodeList [ <span>, <p> ]  

// appendChild: adds a node and return it to be worked with  
let p = document.createElement("p");  
document.body.appendChild(p);  

// removeChild: removes a child node from the DOM and returns the removed node.  
let d = document.getElementById("top");  
let d_nested = document.getElementById("nested");  
let throwawayNode = d.removeChild(d_nested);  

// replaceChild: replaces a child node within the given (parent) node.  
parentDiv.replaceChild(sp1, sp2);  

// insertBefore: inserts a node before a reference node as a child of a specified parent node.  
parentDiv.insertBefore(newNode, sp2);  

// insertAdjacentElement: inserts a given element node at a given position relative to the element it is invoked upon.  
// 'beforebegin': Before the targetElement itself.  
// 'afterbegin': Just inside the targetElement, before its first child.  
// 'beforeend': Just inside the targetElement, after its last child.  
// 'afterend': After the targetElement itself.  

activeElem.insertAdjacentElement("beforebegin", tempDiv);  
activeElem.insertAdjacentElement("afterend", tempDiv);  

var container = 5; // mutable  
container = "red";  
var x = 4,  
  y = 5,  
  z = "blue";  
var empty;  

var color = "purple";  

document.querySelector(".left").style.backgroundColor = color;  
document.querySelector(".left .color-value").innerHTML = color;  

color = "skyblue";  

function headingColor() {  
  let color = "blue"; // scoped  
  document.querySelector(".title").style.color = color;  
}  

headingColor();  

document.querySelector(".right").style.backgroundColor = color;  
document.querySelector(".right .color-value").innerHTML = color;  

const number = 42;  

/**  

 * Data types in JavaScript  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures>  
 */  

// String:  
let stringDemo = "A string of text.";  
console.log("String:", stringDemo);  

// Numbes:  
let integerDemo = 4;  
console.log("Integer:", integerDemo);  

let floatDemo = 5.6;  
console.log("Floating point number:", floatDemo);  

// Boolean:  
let booleanDemo = true;  
console.log("Boolean value:", booleanDemo);  

// Null value (nothing):  
let nullDemo = null;  
console.log("Null value:", nullDemo);  

// Undefined:  
let undefinedDemo;  
console.log("Undefined:", undefinedDemo);  

let undefinedAssignedDemo = undefined;  
console.log("Undefined assigned:", undefinedAssignedDemo);  

// Object:  
const objectDemo = {  
  dance: "Mambo",  
  number: 5,  
};  
console.log("Object:", objectDemo);  

// Array:  
const arrayDemo = ["tango", "foxtrot", "waltz", "rumba", "bolero"];  
console.log("Array:", arrayDemo);  

// Unlike the strict equality operator, it attempts to convert and compare operands that are of different types.  
console.log(1 == 1);  
// expected output: true  

console.log("hello" == "hello");  
// expected output: true  

console.log("1" == 1);  
// expected output: true  

console.log(0 == false);  
// expected output: true  

// Unlike the equality operator, the strict equality operator always considers operands of different types to be different.  
console.log(1 === 1);  
// expected output: true  

console.log("hello" === "hello");  
// expected output: true  

console.log("1" === 1);  
// expected output: false  

console.log(0 === false);  
// expected output: false  

// Number + Number -> addition  
1 + 2; // 3  

// Boolean + Number -> addition  
true + 1; // 2  

// Boolean + Boolean -> addition  
false + false; // 0  

// String + String -> concatenation  
"foo" + "bar"; // "foobar"  

// Number + String -> concatenation  
5 + "foo"; // "5foo"  

// String + Boolean -> concatenation  
"foo" + false; // "foofalse"  

// Subtraction with numbers  
5 - 3; // 2  
3 - 5; // -2  

// Number - String -> Subtraction  
15 - "4"; // 11  

// Subtraction with non-numbers  
"foo" - 3; // NaN  

// Prefix increment  
let a = 2;  
b = ++a;  
// a = 3  
// b = 3  

// Postfix increment  
let x = 3;  
y = x++;  
// y = 3  
// x = 4  

// Prefix decrement  
let a = 2;  
b = --a;  

// a = 1  
// b = 1  

// Postfix decrement  
let x = 3;  
y = x--;  
// y = 3  
// x = 2  

/**  

 * Working with arrays  
 */  

let item = "flashlight";  
const collection = ["Piggy", item, 5, true];  
console.log(collection);  
console.log(collection.length); // 4  
console.log(collection[2]);  
collection[2] = "Camera";  
collection[collection.length] = "new item"; // Appends a new item at index 4  
collection[9] = "at the end";  
console.log(collection[8]); // undefined  
collection[collection.length - 1]; // the last item in the array  

// Finding items in an array  
const birds = ["Parrot", "Falcon", "Owl"];  
console.log(birds.indexOf("Owl")); //  2  
console.log(birds.indexOf("Rabbit")); // -1  

// Adding items  
const myArray = ["Manchester", "Liverpool"];  
myArray.push("Cardiff");  
console.log(myArray); // ["Manchester", "Liverpool", "Cardiff"]  
myArray.push("Bradford", "Brighton");  
console.log(myArray); // ["Manchester", "Liverpool", "Cardiff", "Bradford", "Brighton"]  
const newLength = myArray.push("Bristol");  
console.log(newLength); // 6  
// To add an item to the start of the array, use unshift():  
const myArray = ["Manchester", "Liverpool"];  
myArray.unshift("Edinburgh");  
console.log(myArray); // ["Edinburgh", "Manchester", "Liverpool"]  

// Removing items  
const myArray = ["Manchester", "Liverpool"];  
myArray.pop();  
console.log(myArray); // ["Manchester"]  
const myArray = ["Manchester", "Liverpool"];  
const removedItem = myArray.pop();  
console.log(removedItem); // "Liverpool"  
// To remove the first item from an array, use shift():  
const myArray = ["Manchester", "Liverpool"];  
myArray.shift();  
console.log(myArray); // ["Liverpool"]  
// If you know the index of an item, you can remove it from the array using splice():  
myArray.splice(index, 1);  

// Accessing every item  
const birds = ["Parrot", "Falcon", "Owl"];  
for (const bird of birds) {  
  console.log(bird);  
}  

// Converting between strings and arrays  
const myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";  
const myArray = myData.split(","); // ["Manchester", "Liverpool", ...]  
const myNewString = myArray.join(","); // 'Manchester,London,...'  
const dogNames = ["Rocket", "Flash", "Bella", "Slugger"];  
dogNames.toString(); // Rocket,Flash,Bella,Slugger  

// Manipulating array items without modifying the array itself  
let backpackContents = ["piggy", "headlamp", "pen"];  
backpackContents.forEach(function (item) {  
  item = `<li>${item}</li>`;  
  console.log(item);  
});  

// Apply a fuction  
let longItems = backpackContents.find(function (item) {  
  if (item.length >= 5) {  
    return item;  
  }  
});  
console.log("longItems:", longItems); // longItems: piggy  

const deskArray = ["pen", "camera", "phone", "notebook", "headphones", "lightbulb", "usb drive"];  
// Add last item as the first item on the array:  
deskArray.unshift(deskArray.pop());  
console.log("Last item is now first:", deskArray);  

// Sort items by alphabetical order:  
deskArray.sort();  
console.log("Sorted array:", deskArray);  

// Find "notebook":  
const foundItem = deskArray.find(item => item === "notebook");  
console.log("Found item:", foundItem);  

// Find and remove an item:  
let remove = "notebook";  
deskArray.splice(deskArray.indexOf(remove), 1);  
console.log(`Array with "${remove}" removed:`, deskArray);  

/**  

 * Working with functions  
 */  

// Function declaration:  
// global  
function doSomeMath(a, b) {  
  let c = a + b;  
  return c;  
}  

// Function expression:  
// have same scope as variable  
const doMoreMath = function (a = 3, b = 2) {  
  let c = a * b;  
  return c;  
};  

console.log("Do some math:", doSomeMath(5, 6));  
console.log("Do more math:", doMoreMath(5, 6));  

// Immediately Invoked Function Expression (IIFE)  
(function () {  
  let a = 4;  
  let b = 6;  
  let c = doSomeMath(a, b);  
  console.log(`The sum of a and b is: ${c}`);  
})();  

/**  

 * A standard function  
 * @link <https://developer.mozilla.org/en-US/docs/Glossary/Function>  
 */  

const greenPack = {  
  name: "Frog Pack",  
  color: "green",  
  volume: 8,  
  pocketNum: 3,  
};  

const addPack = function (currentPack) {  
  const newArticle = document.createElement("article");  
  newArticle.innerHTML = `  
    <h1>${currentPack.name}</h1>  
    <ul>  
      <li>Volume: ${currentPack.volume}</li>  
      <li>Color: ${currentPack.color}</li>  
      <li>Number of pockets: ${currentPack.pocketNum}</li>  
    </ul>  
  `;  
  return newArticle;  
};  

const main = document.querySelector("main");  
main.append(addPack(greenPack));  

// Traditional Anonymous Function  
function (a){  
  return a + 100;  
}  

// Arrow Function Break Down  
// Note: Each step along the way is a valid "arrow function".  

// 1. Remove the word "function" and place arrow between the argument and opening body bracket  
(a) => {  
  return a + 100;  
}  

// 2. Remove the body braces and word "return" -- the return is implied.  
(a) => a + 100;  

// 3. Remove the argument parentheses  
a => a + 100;  

// old  
// const addPack = function (currentPack) {  
const addPack = currentPack => {  
  const newArticle = document.createElement("article");  
  newArticle.innerHTML = `  
    <h1>${currentPack.name}</h1>  
    <ul>  
      <li>Volume: ${currentPack.volume}</li>  
      <li>Color: ${currentPack.color}</li>  
      <li>Number of pockets: ${currentPack.pocketNum}</li>  
    </ul>  
  `;  
  return newArticle;  
};  

/**  

 * How arrow functions help us with scoping.  
 */  

// Define a default volume for the window (the entire DOM):  
window.volume = 20;  

const greenPack = {  
  name: "Frog Pack",  
  color: "green",  
  volume: 8,  
  pocketNum: 3,  
  newVolume: function (volume) {  
    console.log("this.volume in the method:", this.volume); // 8  
    this.volume = volume;  
    console.log("this.volume after update:", this.volume); // 5  
    // hoisted up to the global scope.  
    (function () {  
      console.log("this.volume in nested function:", this.volume); // 20  
    })();  
    // Whereas the arrow function stays within the current scope  
    // this is happening because an arrow function does not have its own 'this.' It does not know what this means and it will refer to the closest available scope which in this case is the object.  
    (() => {  
      console.log("this.volume in nested function:", this.volume); // 5  
    })();  
  },  
};  

console.log(greenPack.newVolume(5));  

/**  

 * Passing data to functions through parameters.  
 * @link <https://developer.mozilla.org/en-US/docs/Glossary/Function>  
 */  
const tipCalculator = (sum, percentage, currency, prefix) => {  
  let tip = sum * (percentage / 100);  
  let total = sum + tip;  
  if (prefix) {  
    console.log(`  
      Sum before tip: ${currency}${sum}  
      Tip percentage: ${percentage}%  
      Tip:            ${currency}${tip.toFixed(2)}  
      Total:          ${currency}${total.toFixed(2)}  
    `);  
  } else {  
    console.log(`  
      Sum before tip: ${sum}${currency}  
      Tip percentage: ${percentage}%  
      Tip:            ${tip.toFixed(2)}${currency}  
      Total:          ${total.toFixed(2)}${currency}  
    `);  
  }  
};  

tipCalculator(29.95, 18, "kr", false);  

/**  

 * Passing data to functions through parameters.  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat>  
 *  
 * List of ISO language codes:  
 * @link <http://www.lingoes.net/en/translator/langcode.htm>  
 */  

const formatter = (locale = "en-US", currency = "USD", value) => {  
  let formattedValue = new Intl.NumberFormat(locale, {  
    style: "currency",  
    currency: currency,  
  }).format(value);  

  return formattedValue;  
};  

const tipCalculator = (sum, percentage, locale, currency) => {  
  let tip = sum * (percentage / 100);  
  let total = sum + tip;  

  console.log(`  
    Sum before tip: ${formatter(locale, currency, sum)}  
    Tip percentage: ${percentage}%  
    Tip:            ${formatter(locale, currency, tip)}  
    Total:          ${formatter(locale, currency, total)}  
  `);  
};  

tipCalculator(29.95, 18, "de-DE", "EUR");  

// Callback receives finalTip object, creates and outputs table on the DOM.  
const printHTML = finalTip => {  
  const tipTable = document.createElement("table");  
  tipTable.innerHTML = `  
    <tr>  
      <td>Sum before tip:</td>  
      <td>${finalTip.sum}</td>  
    </tr>  
    <tr>  
      <td>Tip percentage:</td>  
      <td>${finalTip.percentage}</td>  
    </tr>  
    <tr>  
      <td>Tip:</td>  
      <td>${finalTip.tip}</td>  
    </tr>  
    <tr>  
      <td>Total:</td>  
      <td>${finalTip.total}</td>  
    </tr>  
  `;  
  document.querySelector("main").append(tipTable);  
};  

// Create a finalTip object with all the data. Send it to the printHTML callback.  
const tipCalculator = (sum, percentage, locale, currency, callback) => {  
  let tip = sum * (percentage / 100);  
  let total = sum + tip;  

  const finalTip = {  
    sum: formatter(locale, currency, sum),  
    percentage: percentage + "%",  
    tip: formatter(locale, currency, tip),  
    total: formatter(locale, currency, total),  
  };  

  callback(finalTip);  
};  

tipCalculator(29.95, 18, "de-DE", "EUR", printHTML);  

if (everydayPack.lidOpen) {  
    console.log("Lid is open!™);  
} else {  
    console.log("Lid is closed :(");  
}  

// condition ? exprIfTrue : exprIfFalse  
everydayPack.lidOpen ? "open" : "closed";  

var age = 26;  
var beverage = age >= 21 ? "Beer" : "Juice";  
console.log(beverage); // "Beer"  

// Handling null values  
// One common usage is to handle a value that 05 be null  
let greeting = person => {  
  let name = person ? person.name : `stranger`;  
  return `Howdy, ${name}`;  
};  
console.log(greeting({ name: `Alice` })); // "Howdy, Alice"  
console.log(greeting(null)); // "Howdy, stranger"  

function example(…) {  
    return condition1 ? value1  
         : condition2 ? value2  
         : condition3 ? value3  
         : value4;  
}  

// Equivalent to:  
function example(…) {  
    if (condition1) { return value1; }  
    else if (condition2) { return value2; }  
    else if (condition3) { return value3; }  
    else { return value4; }  
}  

const usedStatus = () => {  
  let age = everydayPack.backpackAge();  
  let description;  

  if (age >= 30) {  
    if (age >= 365) {  
      if (age >= 1095) {  
        description = "old";  
      } else {  
        description = "used";  
      }  
    } else {  
      description = "lightly used";  
    }  
  } else {  
    description = "new";  
  }  
};  

const usedStatus = () => {  
  let age = everydayPack.backpackAge();  
  let description;  

  switch (true) {  
    case age < 30:  
      description = "new";  
      break;  
    case age >= 30 && age < 365:  
      description = "lightly used";  
      break;  
    case age >= 365 && age < 1095:  
      description = "used";  
      break;  
    case age >= 1095:  
      description = "old";  
      break;  
    default:  
      console.log(`There is no description for ${age}.`);  
  }  
};  

/**  

 * Loops Aplenty!  
 * @link <https://developer.mozilla.org/en-US/docs/Glossary/Callback_function>  
 */  

const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"];  

const nestedObjects = {  
  item01: {  
    name: "piggy",  
    type: "toy",  
    weight: 30,  
  },  
  item02: {  
    name: "headlamp",  
    type: "equipment",  
    weight: 120,  
  },  
  item03: {  
    name: "pen",  
    type: "tool",  
    weight: 30,  
  },  
  item04: {  
    name: "pencil",  
    type: "tool",  
    weight: 30,  
  },  
  item05: {  
    name: "eraser",  
    type: "tool",  
    weight: 40,  
  },  
  item06: {  
    name: "water bottle",  
    type: "equipment",  
    weight: 1300,  
  },  
};  

const article = document.querySelector("article");  
let stuffList = document.createElement("ul");  

/**  

 * for loop  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for>  
 */  
for (let i = 0; i < stuff.length; i++) {  
  let listItem = document.createElement("li");  
  listItem.innerHTML = stuff[i];  
  stuffList.append(listItem);  
}  

/**  

 * for...of loop and arrays  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of>  
 */  
for (const item of stuff) {  
  let listItem = document.createElement("li");  
  listItem.innerHTML = item;  
  stuffList.append(listItem);  
}  

/**  

 * foreach array method  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach>  
 */  
// array.forEach() method has optional properties for the current item index number and the array itself.  
stuff.forEach(item => {  
  let listItem = document.createElement("li");  
  listItem.innerHTML = item;  
  stuffList.append(listItem);  
});  

/**  

 * for...in loop and objects  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of>  
 */  
for (const singleObject in nestedObjects) {  
  let listItem = document.createElement("li");  
  listItem.innerHTML = `Name: ${nestedObjects[singleObject].name}`;  
  stuffList.append(listItem);  
}  

article.append(stuffList);  

/**  

 * The map() array method.  
 * @link <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map>  
 */  

const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"];  

const article = document.querySelector("article");  
let stuffList = document.createElement("ul");  

// map() through the stuff array to make a new stuffItems array.  
const stuffItems = stuff.map(item => {  
  let listItem = document.createElement("li");  
  listItem.innerHTML = item;  
  return listItem;  
});  

// Append each element from the stuffItems array to the stuffList <ul>  
stuffItems.forEach(item => {  
  stuffList.append(item);  
});  

// Append stuffList to the <article>  
article.append(stuffList);  

/**  

 * Events aplenty.  
 */  

const container = document.querySelector(".container");  
const button = document.querySelector(".cta-button");  
const posX = document.querySelector(".posX span");  
const posY = document.querySelector(".posY span");  

// Log when the button is clicked in the console.  
button.addEventListener(  
  "click",  
  () => {  
    button.classList.toggle("active");  
    console.log("Button was clicked!");  
  },  
  false  
);  

// Update the x and y displays to show the current mouse position.  
const mousePosition = event => {  
  posX.innerText = event.pageX;  
  posY.innerText = event.pageY;  
};  

window.addEventListener("mousemove", mousePosition, false);  

// Change the color of the box when the mouse enters.  
container.addEventListener(  
  "mouseenter",  
  () => {  
    container.classList.add("blue");  
  },  
  false  
);  

container.addEventListener(  
  "mouseleave",  
  () => {  
    container.classList.remove("blue");  
  },  
  false  
);  

// addEventListener()  

// element.addEventListener(target_event, callback [, options]);  
// Optional: Options. Typically “false” or left blank.  

const button = document.querySelector("button")  
button.addEventListener(  
 "click",  
 (e) => {  
    console. log( Event fired: ${e}’)  
 }  
);  

const button = backpackArticle.querySelector(".lid-toggle");  
const status = backpackArticle.querySelector(".backpack__lid span");  

button.addEventListener("click", event => {  
  console.log(event);  
  button.innerText === "Open lid" ? (button.innerText = "Close lid") : (button.innerText = "Open lid");  
  status.innerText === "open" ? (status.innerText = "closed") : (status.innerText = "open");  
});  

button.addEventListener("click", function (event) {  
  console.log(event);  
  this.innerText === "Open lid" ? (this.innerText = "Close lid") : (this.innerText = "Open lid");  
  status.innerText === "open" ? (status.innerText = "closed") : (status.innerText = "open");  
});  

/**  

 * Add event listener to the lid-toggle button.  
 */  
const lidToggle = function () {  
  // Find the current backpack object in backpackObjectArray  
  let backpackObject = backpackObjectArray.find(({ id }) => id === this.parentElement.id);  

  // Toggle lidOpen status  
  backpackObject.lidOpen == true ? (backpackObject.lidOpen = false) : (backpackObject.lidOpen = true);  

  // Toggle button text  
  this.innerText == "Open lid" ? (this.innerText = "Close lid") : (this.innerText = "Open lid");  

  // Set visible property status text  
  let status = this.parentElement.querySelector(".backpack__lid span");  
  status.innerText == "closed" ? (status.innerText = "open") : (status.innerText = "closed");  
};  

let button = backpackArticle.querySelector(".lid-toggle");  
// Add event listener  
button.addEventListener("click", lidToggle);  

/**  

 * Add event listener to the lid-toggle button.  
 */  
const lidToggle = function (event, button, newArg) {  
  console.log(event);  
  console.log(newArg);  

  // Find the current backpack object in backpackObjectArray  
  let backpackObject = backpackObjectArray.find(({ id }) => id === button.parentElement.id);  

  // Toggle lidOpen status  
  backpackObject.lidOpen == true ? (backpackObject.lidOpen = false) : (backpackObject.lidOpen = true);  

  // Toggle button text  
  button.innerText == "Open lid" ? (button.innerText = "Close lid") : (button.innerText = "Open lid");  

  // Set visible property status text  
  let status = button.parentElement.querySelector(".backpack__lid span");  
  status.innerText == "closed" ? (status.innerText = "open") : (status.innerText = "closed");  
};  

let button = backpackArticle.querySelector(".lid-toggle");  
let newArg = "The argument I want to pass to the callback function!";  

// Add event listener  
button.addEventListener("click", event => {  
  lidToggle(event, button, newArg);  
});