<aside> ✨

We do not have class next week — however there is a conceptual homework assignment due next week (your final project idea)

</aside>

Today

• Review hypertext projects
  • Hypertext Submissions (Week 9)
• More workshops — data-driven development
• Web narratives

Code study: interactivity, data, and functions

Code study: loading data

Use this starter code

https://glitch.com/edit/#!/rust-plant-calliandra

This code loads a CSV file containing a sampling of 311 complaints. Note that it uses an external JS library — PapaParse — to parse the text from the CSV and turn it into a structured Javascript object

• Fill out the code to show text from one attribute of each complaint (i.e. the location or notes or type of complain, etc).
• There aren’t any default styles applied to this page, so please add some styling to make the complaints readable (you can make them a list, or scatter them across the page)

  function createNewCard(data) {
    const newElement = document.createElement("div");
    newElement.textContent = "Hello, this is dynamically created!";
    newElement.classList.add("card");
    //use document query selector to add the newElement to the element with class container   
  }

Challenges

• Filter for noise complaint data only
• Add a dropdown to filter between different data types
• Create a function to shuffle the position of all elements on the webpage