Adjusting to a new visual language has not been easy. Let’s take some time to break it all down.
2) Defining variables is easy enough. In JS we use let for local scope, const for global, and we ignore the fact that var exists because it’s more trouble than its worth. Note that variables declared without any of these prefixes will ALWAYS be GLOBAL.
Another difference between const and let is that the value of const CANNOT be changed. Above, the const refers to a string. This name cannot be changed. However, if instead it were referring to a named array, we would be able to change the contents of the array, but NOT the NAME of the array.
In feedCat, we are searching our html document for an item with an id of ‘feed’. The next statement is also selecting an item by it’s ID, but using a slightly more specific method. In our last statement, we’re actually setting the value of ‘ul’ to the new creation of a ul element.
3) Stand Alone Functions is where we will define our functions that do not depend on another function to run. In this instance, lets break down an intervalHandler.
Here we have our variable defined as a const. We could also declare it as an actual function, but this method ends up being a little neater than that. Since it’s technically setting up a function we’ll keep it in our SAF section. In our intervalHandler, we’re setting up a counter that increments once every second. If I were taking these snippets in the direction of a fully functioning app, I could rename ‘counter.innerText++’ to ‘numberOfFoods.innerText++’ to have it increment the amount of times Nox has been fed. Once a second might be a little excessive and he’s fat enough, so we can also change the integer 1000 (representing a second in milliseconds) to whatever integer (representing a second in milliseconds) we desire.
4) Stand Alone Event Listeners will add a second layer of listeners to come into play after our DOM has loaded fully. Back in our variables we defined feedCat as referencing to something with an id of ‘feed’. Lets say that this references a button in our imaginary HTML file. We can create an event listener to wait for that button to be clicked, and on click increment the number of times Nox has been fed.
We tell our new event listener to watch feedCat and wait for it to be clicked. Once clicked, increment numberOfFoods by 1.
5) Call Function would typically be where we call our functions. However, in this example, our auto-feeder is already initialized as a const so we don’t actually have to call it the way we would if it were a function.