You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

2.5 KiB

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 in the ./images folder to set the background attribute with the corresponding image URL. The URL has to be formatted like so: .images/name-of-the-place.jpg ; you can see here the list of images that the folder contains
  • display a location indicator as a <a> tag in the middle of the screen which:
    • has the class location
    • displays 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
    • updates the name, coordinates and color on scroll, when the top of the next image reaches the middle of the screen height
    • has the href attribute set to open a new tab redirecting to a Google Maps' URL with the coordinates of the place currently displayed
  • display a compass indicating the latitude direction ; N for North if the user is scrolling up, S for South if he's scrolling down

Notions

Provided files

You have at your disposal the following files that you can download to test locally:

  • the HTML file index.html to open in the browser, 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
  • the data file data.js from which you can import places

Expected result

You can see an example of the expected result here