My Raw Notes for the Week of 8-16-2021

ENGLISH:

"The DOM is the way that JS interacts with HTML and CSS."

If you type window.document in the console, you get the HTML page that you're on.

Copy and pasted from Holt's notes:
Let's first chat about what a browser is and how your code gets from you writing it to being run in a browser.
In a typical circumstance:
    1. You write code in your editor (like VSCode)
    2. You put your code on a server (e.g., AWS, BlueHost, GoDaddy, etc.) so that other people can get it
    3. Someone visits your website
       1. (Lots of stuff happens here. For now we're not going to talk about it)
       2. Their browser makes a request to your server for your index.html
       3. Your server sends them a copy of the html
       4. The browser reads the HTML, sees you have a my-script.js script tag in there
       5. Browser makes another request for my-script.js from your server
       6. Your server sends them a copy of my-script.js
       7. The browser reads the JavaScript code and begins executing the code
       8. (Same process happens with CSS too)

A "callback" is just a function that gets called back by something else.
MDN: A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. (In the event listener code farther down there is a comment referencing the callback function.)

"You can put an event handler on basically anything."

CODE:

const cities = [
    'Houston',
    'New Orleans',
    'Nashville',
    'Greenville',
    'Charlotte'
]

let numberOfTimesRun = 0
cities.forEach((city, index) => {
    numberOfTimesRun++
    console.log(index, city)
})
console.log(numberOfTimesRun)

//-------------------------------------------------------------------

// HTML:
<ul>
  <li class="js-target">Unchanged</li>
  <li class="js-target">Unchanged</li>
  <li>Won't Change</li>
  <li class="js-target">Unchanged</li>
  <li>Won't Change</li>
  <li class="js-target">Unchanged</li>
</ul>

// JS:
const elementsToChange = document.querySelectorAll('.js-target')
// note, just because I don't think I've looped through a NodeList before, that the above line generates a NodeList, not an Array
    for (let i = 0; i < elementsToChange.length; i++) {
        const currentElement = elementsToChange[i]
        currentElement.innerText = "Modified by JavaScript!"
    }

//-------------------------------------------------------------------

// HTML:
<button class="event-button">Click me!</button>

// JS:
document.querySelector('.event-button').addEventListener('click', function() { // note that the 'function() {...}' here is the callback function
    alert("Hey there!")
})

//-------------------------------------------------------------------

// HTML:
<p class="color-box"></p>
<input class="color-input" placeholder="Type a color here!"/>

// CSS:
.color-box {
    background-color: limegreen;
    width: 100px;
    height: 100px;
}

// JS:
const input = document.querySelector('.color-input')
const paragraph = document.querySelector('.color-box')
input.addEventListener("change", function() {
    paragraph.style.backgroundColor = input.value;
})