Week 7

Homework

Your task this week is to build the site above (sorry it doesn't look very good). When you load the page, you won't see anything but a button. Clicking the button should loop through my favorite movies and add them to the page. For this homework you'll need:

• An event listener (to wire up the button)
• A loop (to go through each movie)
• Lots of DOM manipulation (creating elements, appending them, etc.)

If you can successfully complete this assignment then the last thing to learn is how to get results from an API, which is coming up next!

Good luck!

Resources

• Movies Starting Point
• Todo List CSV Starting Point
• Todo List CSV Starting Point
• Say Hello with Arrays

Arrays

In javascript, when we want to store a list of things, we use an object called Array. Arrays can be created in javascript using square braces ([) like so: ['Avand', 'Rob', 'Sandi']

Like the other javascript objects we've looked at so far, Arrays have properties and methods that you'll probably find useful:

• properties:
  • length: a count of the number of items in the array
• methods:
  • push: adds an item to the array
  • pop: removes an item from the array
  • sort: sorts the items in the array

Looping

In javascript, when we want to execute some code some number of times, we can use the forEach() function.

For example, the following code will add a list item to a list for each item in the array instructors:

  var instructors = ['Avand', 'Rob', 'Sandi'];

  var list = document.querySelector('ul');



  function listInstructor(instructor) {

    var item = document.createElement('li');

    item.textContent = instructor;

    list.appendChild(item);
  }



  instructors.forEach(listInstructor);

document.querySelectorAll

document.querySelectorAll is another very useful function available in web browsers. This function can be used to get many items from the document based on a selector.

It works just like document.querySelector, but instead of returning an Element object, document.querySelectorAll returns a NodeList, which is functionally like an array of Element objects (though it's actually its own object)

The following code shows an example of how you might get all the <li> elements on the page and log their text content to the console:

var listItems = document.querySelectorAll('li');
for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i].textContent);
}