JavaScript DOM

Due: 11:00pm, Monday March 8, 2021

Max grace days: 2

Description

The goal for this assignment is to use JavaScript DOM manipulation to create a tree viewer for the Pokemon data from the previous assignment. The original source of the data for this assignment is here pokemon.json.

This assignment contains the following files: index.html, data.js, code.js, style.css, and reference.html. You only need to edit the code.js file.

For this assignment, you must do the following:

1. Generate a replica of the reference.html file by using the data and the JavaScript DOM API. Note: you must not use innerHTML property in your implementation.

2. Attach an event listener for the “click” event to each span element that does the following:

   • If the span has the class "right" remove it and add the class "down".
   • If the span has the class "down" remove it and add the class "right".
   • If the span has a sibling node is an ul element, then toggle the hidden property on the ul element.

Turning in the Assignment

For this assignment, you must turn in a zip file containing the following file:

1. code.js

Submit the zip file to the appropriate folder on D2L.

Grading Criteria

Grading (out of 100 points):

• 10 points – Documentation
  • 10 – complete documentation that follows the standards
  • 5 points – incomplete documentation and/or documentation that does not follow the standards
  • 0 points – no documentation
• 45 points – DOM
  • 45 points – correct implementation
  • 30 points – partially correct implementation
  • 0 points – incorrect implementation
• 45 points – Event Listener
  • 45 points – correct implementation
  • 30 points – partially correct implementation
  • 0 points – incorrect implementation