root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 0
Code Releases Wiki Activity
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.
3760 Commits
91 Branches
11 Tags
349 MiB
 
 
 
 
 
 
Tree: 23117c2764
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '23117c2764'
${ noResults }
public/subjects/where-do-we-go
davhojt 6ee0e87482
docs(where-do-we-go): correct grammar 		2 years ago
..
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) 4 years ago
README.md docs(where-do-we-go): correct grammar 2 years ago
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) 4 years ago
where-do-we-go.html where-do-we-go: change files naming & fix test (replace deprecated waitFor method and get the width and height of the window) 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 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

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