forked from root/public
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 years ago | |
---|---|---|
.. | ||
where-do-we-go_images | 4 years ago | |
README.md | 2 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
Where will you go on your next holiday?
Let's make a page to index your options, so that next time you ask yourself that question, you'll be ready with some ideas.
Create a function named explore
, which creates a page displaying the list of places
provided in the data file below.
- sort the
places
from north to south, so that the northern-most place is first. - display a fullscreen-size
<section>
for each place. Use the pics hosted in the./where-do-we-go_images
folder below. 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 an
<a>
tag in the middle of the screen. It should:- have the class
location
- display the
name
andcoordinates
of the current place, as text strings separated by\n
. - set the text color as
color
. - update the
name
,coordinates
andcolor
on scroll, at the point when the next image reaches the middle of the screen height. - make the
href
attribute open a new tab redirecting to a Google Maps URL with the coordinates of the place currently displayed.
- have 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
Files
You only need to create & submit the JS file where-do-we-go.js
; we're providing you the following files to download and test test locally:
-
the HTML file where-do-we-go.html to open in the browser, which includes:
- the JS script which will enable you 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
Notions
- Scroll event
- window
- innerHeight
- scrollY
- pageYOffset
- Take a look at the DMS coordinates system