Project 2: JS Hide/Show

24 February 2019   PDF version

For this project, we are going to pick up the Hide/Show functionality that I covered on Feb 19. The files are available in the cs120pub project on gitlab. They are:

Your tasks are as follows:

  1. Add an icon that appears next to the “Hide answer” or “Show answer” text to indicate the current state. You can see my open-eye/closed-eye version on this page of notes from CS101, or you could use the disclosure triangle pattern, or something similar. There should be two different icons shown.
  2. Add two new question/answer blocks to the HTML page, and ensure that they work independently.
  3. Try to reduce duplication in the JS code by finding a way to move the for loop outside of the if / else block. (It could come after the conditionals.)
  4. Clean up the JS code by removing any unneeded console.log statements.
  5. Test your page thoroughly, and try to make sure that the HTML and CSS portions pass the validator. Also fix up any validation errors in previous submissions in your repository.