Personal homepage JS

Javascript_DOM_Functions_Objects_Events/scripts/scripts.js

/* * document.getElementById(id) -> single node * ToDo: Get #consoleLeft and #consoleRight */ /* * document.getElementsByClassName(class) -> nodeList * ToDo: Get all .car */ /* * document.querySelectorAll(selector) -> nodeList * ToDo: Get all #toyotas .car and #nissans .car */ /* * document.getElementsByTagName(tagName) --> return a node list with every element of this type */ /* * document.createElement(tagToCreate) -> new tag * ToDo: Create a new paragraph */ /* * [element].innerHTML -> set the HTML of a node (may include tags) * ToDo: Set HTML of new paragraph to list the count of cars in the dealer lot */ /* * [element].style -> set a desired CSS property (use camelCase instead of hyphens) * ToDo: Change new paragraph text color to red */ /* * [element].setAttribute(attrName, attrValue) -> set a desired attribute * ToDo: Set id for new paragraph to 'allCars' */ /* * [element].appendChild(newElement) -> adds new element as the last child of the parent * ToDo: Add new paragraph to #consoleLeft */ //Create another new paragraph /* * document.createTextNode('text') -> new text node (i.e. text only) * ToDo: Create a new text node and set text to be # of Toyotas on the dealer lot * - Add the new text to the paragraph * - Add the paragraph to #consoleLeft */ //Create another new paragraph //Set the text to be # of Nissans on the dealer lot //Create a new ul /* * forEach -> loop through a collection/list * ToDo: Loop thru all nissans * - Create an li for each nissan * - Get the model from name attribute * - Make text the model using [element].textContent * * Inside forEach loop * [element].getAttribute(attr) -> gets the value of an attribute */ //Add ul to #consoleLeft /* * [element].insertBefore(newElement, existingElement) -> adds new element before a specific child * ToDo: Add new paragraph to #consoleLeft before the ul */ /* * function -> Javascript version of a method * ToDo: Create printCarDetails(carDiv) * - Loop thru cars and compare model to name attribute (getAttribute) * - Get Car Details and output to #consoleRight */ //Loop thru cars and find selected car object //Get #carTitle //Create h5 and give id carTitle /* * [element].textContent -> another way to set a node's text (no tags allowed) * ToDo: Set h5 text to car make and model */ /* * [element].replaceChild(newElement, existingElement) -> replace existing child with new element * ToDo: Replace h5 with carTitle */ /* * ToDo: Create new paragraph * - Set innerHTML to be year, # of doors, MSRP, 72 monthly payments */ //Find all existing #consoleRight p and remove 1st one /* * Inside if block * [element].removeChild(toRemove) -> remove existing child */ //Add new paragraph to #consoleRight /* * addEventListener -> add a 'listener' so we can respond to a specific action * ToDo: Add 'click' event listener for all Toyotas to go to printCarDetails(this) * ToDo: Add 'click' event listener for all Nissans to go to printCarDetails(this) */ /* * setInterval(codeToExecute, milliseconds) -> executes something at a specified interval (every 'x' amount of milliseconds) * ToDo: Set an interval that will update the count of Hondas on the lot once every second */ /* * setTimeout(codeToExecute, milliseconds) -> executes the specified code ONCE after 'x' amount of time * clearInterval(intervalName) -> stops the interval * ToDo: Since there are only 4 Hondas on the lot, stop the counter after 4 seconds. Set a timeout for 4 seconds that will clear the interval */ //Set an interval that will update the count of Toyotas on the lot once every second. Stop counting once you've reached the number of toyotas