Skip to content

Commit

Permalink
added more description about screen sizes to wheres-waldo project des…
Browse files Browse the repository at this point in the history
…cription
  • Loading branch information
ForkEyeeee committed Sep 20, 2023
1 parent 32e90e3 commit 4aeb9be
Showing 1 changed file with 2 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@ Keep track of how long it takes from when the photo is first loaded to when the
1. Set up a GitHub Repo for this project. Follow the instructions atop the [Recipes project](https://www.theodinproject.com/lessons/foundations-recipes) if you need help.
1. Think about what you'll need to do to get this all working together. This is where it's really helpful to think it completely through on paper or a whiteboard ahead of time! A few minutes of thought can save you from wasting an hour on coding.
1. Build the front end functionality without actually using any calls to the back end yet. Specifically, create the functionality that pops the targeting box and dropdown menu on the screen when the user clicks on the photo and removes it when the user clicks away.
1. For this functionality, different screen sizes can produce different coordinates when clicking on the same area of the photo. Implement methods to normalize these coordinates to ensure consistent targeting across devices.
1. Now hook up the functionality for validating with your backend whether or not the user has clicked the right place for the character they selected from the dropdown.
1. Tie it into your frontend so you can seamlessly select characters, validate them, and place the appropriate markers on the map if the selection was correct.
1. Add in the ability to time the user from when they first load the page and then display their "score" (time) when they successfully identify all characters. Create a popup that asks them to enter their name for the high scores table if they have earned it.
1. Play with it!
1. Push your solution to GitHub and deploy it to any of the hosting options. Additionally, submit your solutions below. This is a serious project, congratulations!

</div>

### Extra credit
Expand Down

0 comments on commit 4aeb9be

Please sign in to comment.