André Restivo

JavaScript Exercises

1. Hello World

  1. Download the following zip file, uncompress it into a folder, and start a webserver inside that folder:
php -S localhost:9000
  1. Notice that the zip contains three files:
  1. Notice how the HTML file imports the JavaScript file:
<script src="script.js"></script>
Important:The script tag must always be closed.
  1. Open your developer console.
  2. Add the following code to the script.js file:
console.log('Hello World')
  1. Reload the page and watch the output on your browser's console.

What did I learn:

2. Selecting Elements

  1. Delete the code in script.js from the previous exercise; we do not need it anymore.
  2. Create a new function called changeAllArticleColors().
  3. Inside that function, use the querySelectorAll() function to select all articles inside the #products section and assign the result to a constant.
  4. Use a for ... of loop to loop over the articles you selected.
  5. For each article, use the classList property, and its add() function to add a "sale" class to those elements.
  6. Change the style.css file so that articles inside the #products section having class sale, have a different background color (e.g., #ffddd2).
  7. Call the changeAllArticleColors() function like this:
function changeAllArticleColors() {
  // ... function body
}

changeAllArticleColors()
<script src="script.js" defer></script>
window.addEventListener('load', function() {
  changeAllArticleColors()
})

What did I learn:

3. Events

  1. Delete the code in script.js from the previous exercise; we do not need it anymore.
  2. Create a new function called attachBuyEvents().
  3. Call the attachBuyEvents() function like this:
function attachBuyEvents() {
  // ... function body
}

attachBuyEvents()
  1. Inside that function, select all buttons in the products section and use the addEventListener method to attach a click event to each one so that when the user clicks the button, another function is called (this can be an anonymous function). For example:
button.addEventListener('click', function() {...function code goes here...})
  1. Make the function responding to the buy events print 'BUY!' in the console; test it.
  2. Make the function responding to the buy events print the event target in the console; test it.
  function(e) {
    console.log(e.currentTarget)
  }
function() {
  console.log(this)
}
  1. Hover your mouse pointer over the element printed in the console. You should see the clicked button light up on the web page.

What did I learn:

4. Attributes

  1. Continue with the code from the previous exercise, but delete the code inside the function that responds to buy events.
  2. Using the parentElement property, make the function print the article that is the parent of the clicked button in the console; test it.
  3. Using the classList property, and its toggle() function, add/remove a "sale" class to the parent of the clicked button; test it, the article containing the clicked button should change color.
  4. Using the getAttribute() method, get the value of the data-id attribute of the article and print it in the console.
Note: Data-* attributes, like data-id, allow us to store extra information on HTML elements.
  1. Find a way to also print the name of the product, its price, and the chosen quantity.

Final Result:

What did I learn:

5. Creating Elements

Continue the previous exercise, but instead of writing the product data to the console, we will add a new row to the table inside the cart section:

  1. In the function that handles clicks on the buy buttons, use the createElement method to create a new row. Use the appendChild to insert the row into the table.
  2. After creating the row, use the same method to create data cells for each row in the table (id, name, quantity, price, and total). Use the appendChild to insert these data cells into the row.
  3. Change the content of each cell, using textContent, to reflect the chosen product and quantity. To calculate the total, you can use parseInt to transform a string into a number.
  4. If a row with the same id already exists in the cart, update the row's values instead of adding a new row.
  5. Add a link on each row to delete that row from the cart; make this link work using the remove method.
  6. Make sure the cart's total stays updated when new rows are added or deleted.

Final Result:

What did I learn: