mirror of https://github.com/01-edu/public.git
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.
|
3 years ago | |
---|---|---|
.. | ||
where-do-we-go_images | 4 years ago | |
README.md | 3 years ago | |
where-do-we-go.data.js | 4 years ago | |
where-do-we-go.html | 4 years ago |
README.md
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./where-do-we-go_images
folder (find the download link below) to set thebackground
attribute with the corresponding image URL. The URL has to be formatted like so:./where-do-we-go_images/name-of-the-place.jpg
- 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
, thename
and thecoordinates
of the current place featured in the image - using the corresponding
color
as text color - updates the
name
,coordinates
andcolor
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
- has the class
- display a compass as a
div
tag indicating the latitude direction which:- has the class
direction
- displays
N
for North if the user is scrolling up - displays
S
for South if he's scrolling down
- has the class
Notions
- Scroll event
window
:innerHeight
,scrollY
,pageYOffset
- Take a look at the DMS coordinates system
Files
You only need to create & submit the JS file where-do-we-go.js
; we're providing you the following files to download (click right and save link) & test locally:
-
the HTML file where-do-we-go.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 where-do-we-go.data.js from which you can import
places
-
the images to use, in this compressed folder
Expected result
You can see an example of the expected result here