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 image for each place ; use the images hosted here
• display a location indicator, displaying 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 another image is reached
• 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

• Use 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