public

History

lee bc58ab2518 fix(dom-subjects): renaming css files to data.css files		2023-02-28 10:53:26 +00:00
..
where-do-we-go_images	where-do-we-go: change files naming & fix test (replace deprecated waitFor method and get the width and height of the window)	2021-03-11 02:50:30 +00:00
README.md	fix(dom-subjects): renaming css files to data.css files	2023-02-28 10:53:26 +00:00
where-do-we-go.data.css	fix(dom-subjects): renaming css files to data.css files	2023-02-28 10:53:26 +00:00
where-do-we-go.data.js	where-do-we-go: change files naming & fix test (replace deprecated waitFor method and get the width and height of the window)	2021-03-11 02:50:30 +00:00
where-do-we-go.html	fix(dom-subjects): renaming css files to data.css files	2023-02-28 10:53:26 +00:00

Where do we go?

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 the background 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 and coordinates of the current place, as text strings separated by \n
- set the text color as color
- update the name, coordinates and color 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
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

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
the data file where-do-we-go.data.js from which you can import places
feel free to use the CSS file where-do-we-go.data.css as it is or you can also modify it.
you can get the images to be used in this compressed folder or you can get them in the where-do-we-go_images folder from the public URL. Example: `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg

You can see an example of the expected result here