CSE 121B: JavaScript Language

W05: Programming Tasks

Instructions

Setup

1. Download the starter files (2). Place the w05-task.html file on the root cse121b folder and the w05-task.js file in the scripts folder.

Review the Public Temple Data

1. Navigate to this temple JSON file by clicking on the link. Your browser will handle the parsing of the data to make it readable.
2. Review the temple data format and naming structure.

Declare Global Variables

1. Declare a const variable named templesElement that references the HTML div element that eventually will be populated with temple data.
2. Declare a global empty array variable to store a list of temples named templeList.

Function: displayTemples()

This function will build a temple display "card" for each item in the temple list passed to the function.

1. Declare a function expression using const named displayTemples that uses an arrow function to accept a list of temples as an array argument.
   Check Your Understanding

   const displayTemples = (temples) => {

2. Process each temple in the temple array using a forEach method and do the following for each temple item:
   1. Create an HTML <article> element (createElement).
   2. Create an HTML <h3> element and add the temple's templeName property to this new element.
   3. Create an HTML <img> element and add the temple's imageUrl property to the src attribute and the temple's location property to the alt attribute.
   4. Append the <h3> element and the <img> element to the <article> element as children. (appendChild)
   5. Append the <article> element to the global templesElement variable declared in Step 2.
      Check Your Understanding

      templesElement.appendChild(article);

Function: getTemples()

Get JSON temple data using fetch().

1. Create another function expression called getTemples. Make it an async anonymous, arrow function.
   Check Your Understanding

   const getTemples = async () => {

2. In the function, declare a const variable named response that awaits the built-in fetch method calling the temple data, absolute URL given in Step 2 above.
   Check Your Understanding

   const response = await fetch("https://byui-cse.github.io/cse121b-ww-course/resources/temples.json");

3. Convert your fetch response into a JavaScript object (.json) and assign the result to the templeList global array variable you declared in Step 3 above. Make sure the the execution of the code waits here as well until it finishes.
   💡If you are stuck with any of these steps, consider using the learning activity materials provided.
4. The last statement in the getTemples function calls the displayTemples function and passes it the list of temples (templeList).
   💡A good idea here is to test your code by calling the getTemples function at the end of your JavaScript file. This will make sure that your code works before you move on to the next step. You can console.log(templeList) to review the results.

Function: reset()

Clear the displayed list of temples.

1. Declare a function expression named reset that clears all of the <article> elements from the templesElement.

Function: filterTemples()

Sort the list of temples by the selected value of the HTML select element with an ID of filtered. The preset selections include temples located in the state of Utah, those outside the state of Utah, and temples built before 1950 on the list.

1. Declare a function expression named filterTemples.
2. The function should accept a argument in a parameter named temples.
3. In this function, first call the reset function to clear the output.
4. Define a variable named filter that obtains the value of the HTML element with the ID of filtered (The pull-down menu).
5. Use a switch statement that uses the filter value as the selector responding to four (4) cases.
6. For each case, call the displayTemples function using an filter statement that filters the temples parameter for the four options provided.
   1. "utah": filter for temples where the location contains "Utah" as a string.
   2. "notutah": filter for temples where the location does not contain "Utah" as a string.
   3. "older": filter for temples where the dedicated date is before 1950. (compare versus new Date(1950, 0, 1)).
   4. "all": no filter. Just use temples as the argument.

Event Listener: filterTemples Element change

1. Add a change event listener to the HTML element with an ID of filtered that calls the filterTemples function and sends a arrow function result with the templeList as the argument.
   Check Your Understanding

       document.querySelector("#filtered").addEventListener("change", () => { filterTemples(templeList) });

Testing

1. Verify that you are calling getTemples() at the bottom of the JavaScript file.
2. Test your work by using Live Server and debug as needed.

Submission

1. Commit and push your work to GitHub.
2. Submit the GitHub Pages rendered URL in Canvas.

   💡Here is an example of what the URL should look like:

   https://yourgithubusername.github.io/cse121b/w05-task.html

   or

   https://yourgithubusername.github.io/cse121b

   is OK because each assignment is already included in the provided navigation structure on this home page for the course.

Stretch

Add additional options such as sorting the temples alphabetically.