Conditionals

In the first part of this Task, you will use the if, else if conditionals. You will also use the switch, case and break statements.

Using If and Else If

Complete the following steps

In the task5.js file:

1. Declare and initialize a new variable to hold the current date.
2. Declare another variable to hold the day of the week.
3. Using the variable declared in Step 1, assign the value of the variable declared in Step 2 to the day of the week ( hint: getDay() ).
4. Declare a variable to hold a message that will be displayed.
5. Using an if statement, when the day of the week is a weekday (i.e. Monday - Friday), set the message variable to the string 'Hang in there!'
6. Using an else statement, set the message variable to 'Woohoo! It is the weekend!'

Switch, Case, Break

Complete the following steps

In the task5.js file:

1. Declare a new variable to hold another message.
2. Use switch, case and break to set the message variable to the day of the week as a string (e.g. Sunday, Monday, etc.) using the day of week variable declared in Step 2 above.

Output Changes

Complete the following steps

In the task5.js file:

1. Assign the value of the first message variable to the HTML element with an ID of message1.
2. Assign the value of the second message variable to the HTML element with an ID of message2.

Fetch

Complete the following steps

In the task5.js file:

1. Declare a global empty array variable to store a list of temples
2. Declare a function named output that accepts a list of temples as an array argument and does the following for each temple:
   • Creates an HTML <article> element
   • Creates an HTML <h3> element and add the temple's templeName property to it.
   • Creates an HTML <h4> element and add the temple's location property to it.
   • Creates an HTML <h4> element and add the temple's dedicated property to it.
   • Creates an HTML <img> element and add the temple's imageUrl property to the src attribute and the temple's templeName property to the alt attribute.
   • Appends the <h3> element, the two <h4> elements, and the <img> element to the <article> element as children.
   • Appends the <article> element to the HTML element with an ID of temples.
3. Create another function called getTemples. Make it an async function.
4. In the function, using the built-in fetch method, call this absolute URL: 'https://byui-cse.github.io/cse121b-course/week05/temples.json'. Create a variable to hold the response from your fetch. You should have the program wait on this line until it finishes.
5. Convert your fetch response into a Javascript object ( hint: .json() ). Store this in the templeList variable you declared earlier. Make sure the the execution of the code waits here as well until it finishes.
6. Finally, call the output function and pass it the list of temples. Execute your getTemples function to make sure it works correctly.
7. Declare a function named reset that clears all of the <article> elements from the HTML element with an ID of temples.
8. Declare a function named sortBy that:
   • calls the reset function,
   • sorts the global temple list by the currently selected value of the HTML element with an ID of sortBy, and
   • calls the output function passing in the sorted list of temples.
9. Add a change event listener to the HTML element with an ID of sortBy that calls the sortBy function.

Review

After completing the previous steps:

1. Review one of the many possible solutions for this task,
2. Compare and contrast your code with the possible solution's code, and
3. Make note of any improvements you could make for future tasks.

Stretch (optional)

Consider adding a "Filter by" feature that allows users to filter the list of temples. This will require changes to both the HTML and the JavaScript files