Personal Website

Codepen Instructions

Open your personal website CodePen Project.


Instructions

  • Open your "visited-places.html", we're changing things up. Instead of just "Places I've Been," this is now going to be the "Places I'm Interested In" page, that shows us all of the places you want to go mixed with all the places you've been.
  • Add some more locations to your arrays: places you want to go.
  • Add a third array that indicates whether or not you've been to the locations. You can do this with booleans or strings.
  • Loop through your arrays and display both the image and the title of the place you want to visit. (This should have been completed in "Oh, The Places I've Been").
  • Add a message to each "place card" based on the value in the third array that indicates whether or not you've been to this location.
  • Add a form that has 4 elements: A text input box, 2 radio buttons ("Places I've Been" and "Places I Want to Go"), and a submit button,
  • By default all of the cards should show up, but if the user searches for a specific place, it should only display the applicable cards. EG: If user types "pa" in the search bar and selects "Places I've Been" out of the radio buttons, only the "place cards" that I've been to AND have a "pa" in the place name should be showing. Hint: you can use show/hide to do this.
  • Create an animation that occurs on the "place cards" when the submit action happens in the search bar.
  • Bonus: If no places are found, display a message to the user that indicates that no place matches their criteria.

Result