public/subjects/where-do-we-go

Where do we go?

Instructions

Tired of staying home for too long, you decide to develop a page to index ideas for your next travel destinations, so that next time you'll ask yourself 'Where do we go?', you won't need to get lost for 3 hours!

Write the function explore which creates a page displaying the list of places provided in the data file below:

• sort the places from the Northest to the Southest
• display a fullscreen-size <section> for each place ; use the pics hosted here as background images
• display a location indicator with the class location, displaying as text strings separated by \n, the name and the coordinates of the current place featured in the image, using the corresponding color as text color, which updates on scroll when the top of the next image reaches the middle of the screen height
• display a compass indicating the latitude direction ; North if the user is scrolling up, South if he's scrolling down
• when clicking on the page, open a link redirecting to the Google Maps' coordinates of the place currently displayed.

Notions

• Wheel event: deltaY
• window: innerHeight, scrollY, open()
• Take a look at the DMS coordinates system

Provided files

• Check the HTML file index.html, which includes:

  • the JS script which will allow to run your code
  • some CSS pre-styled classes: feel free to use those as they are, or modify them

• Import places from the data file data.js

Expected result

You can see an example of the expected result here