where-do-we-go: change files naming & fix test (replace deprecated waitFor method and get the width and height of the window)
|
@ -1,4 +1,4 @@
|
||||||
import { places } from './subjects/where-do-we-go/data.js'
|
import { places } from './subjects/where-do-we-go/where-do-we-go.data.js'
|
||||||
|
|
||||||
export const tests = []
|
export const tests = []
|
||||||
|
|
||||||
|
@ -39,8 +39,8 @@ const dataNames = sortedPlaces.map(({ name }) =>
|
||||||
|
|
||||||
tests.push(async ({ page, eq }) => {
|
tests.push(async ({ page, eq }) => {
|
||||||
const { width, height } = await page.evaluate(() => ({
|
const { width, height } = await page.evaluate(() => ({
|
||||||
width: document.documentElement.clientWidth,
|
width: window.innerWidth,
|
||||||
height: document.documentElement.clientHeight,
|
height: window.innerHeight,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const sections = await page.$$eval('section', sections =>
|
const sections = await page.$$eval('section', sections =>
|
||||||
|
@ -82,7 +82,7 @@ tests.push(async ({ page, eq }) => {
|
||||||
window.scrollBy(0, window.innerHeight + 200)
|
window.scrollBy(0, window.innerHeight + 200)
|
||||||
})
|
})
|
||||||
|
|
||||||
await page.waitFor(150)
|
await page.waitForTimeout(150)
|
||||||
|
|
||||||
const location = await page.$eval('.location', location => [
|
const location = await page.$eval('.location', location => [
|
||||||
...location.textContent.split('\n'),
|
...location.textContent.split('\n'),
|
||||||
|
@ -109,7 +109,7 @@ tests.push(async ({ page, eq, getDirection }) => {
|
||||||
window.scrollBy(0, window.innerHeight)
|
window.scrollBy(0, window.innerHeight)
|
||||||
})
|
})
|
||||||
|
|
||||||
await page.waitFor(100)
|
await page.waitForTimeout(100)
|
||||||
|
|
||||||
const direction = (await getDirection()).includes('S')
|
const direction = (await getDirection()).includes('S')
|
||||||
? 'S'
|
? 'S'
|
||||||
|
@ -125,7 +125,7 @@ tests.push(async ({ page, eq, getDirection }) => {
|
||||||
window.scrollBy(0, -100)
|
window.scrollBy(0, -100)
|
||||||
})
|
})
|
||||||
|
|
||||||
await page.waitFor(100)
|
await page.waitForTimeout(100)
|
||||||
|
|
||||||
const direction = (await getDirection()).includes('N')
|
const direction = (await getDirection()).includes('N')
|
||||||
? 'N'
|
? 'N'
|
||||||
|
|
|
@ -7,7 +7,7 @@ Tired of staying home for too long, you decide to develop a page to index ideas
|
||||||
Write the function `explore` which creates a page displaying the list of `places` provided in the data file below:
|
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
|
- 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](https://github.com/01-edu/public/tree/master/subjects/where-do-we-go/images) the list of images that the folder contains
|
- 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 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 a `<a>` tag in the middle of the screen which:
|
- display a location indicator as a `<a>` tag in the middle of the screen which:
|
||||||
- has the class `location`
|
- has the class `location`
|
||||||
- displays as text strings separated by `\n`, the `name` and the `coordinates` of the current place featured in the image
|
- displays as text strings separated by `\n`, the `name` and the `coordinates` of the current place featured in the image
|
||||||
|
@ -22,16 +22,18 @@ Write the function `explore` which creates a page displaying the list of `places
|
||||||
- [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window): [`innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), [`scrollY`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY), [`pageYOffset`](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset)
|
- [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window): [`innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), [`scrollY`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY), [`pageYOffset`](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset)
|
||||||
- Take a look at the [DMS coordinates system](https://en.wikipedia.org/wiki/Decimal_degrees)
|
- Take a look at the [DMS coordinates system](https://en.wikipedia.org/wiki/Decimal_degrees)
|
||||||
|
|
||||||
### Provided files
|
### Files
|
||||||
|
|
||||||
You have at your disposal the following files that you can download to test locally:
|
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 [index.html](/public/subjects/where-do-we-go/index.html) to open in the browser, which includes:
|
- the HTML file [where-do-we-go.html](/public/subjects/where-do-we-go/where-do-we-go.html) to open in the browser, which includes:
|
||||||
|
|
||||||
- the JS script which will allow to run your code
|
- 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
|
- some CSS pre-styled classes: feel free to use those as they are, or modify them
|
||||||
|
|
||||||
- the data file [data.js](/public/subjects/where-do-we-go/data.js) from which you can import `places`
|
- the data file [where-do-we-go.data.js](/public/subjects/where-do-we-go/where-do-we-go.data.js) from which you can import `places`
|
||||||
|
|
||||||
|
- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip)
|
||||||
|
|
||||||
### Expected result
|
### Expected result
|
||||||
|
|
||||||
|
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 206 KiB |
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 155 KiB |
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
Before Width: | Height: | Size: 610 KiB After Width: | Height: | Size: 610 KiB |
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
Before Width: | Height: | Size: 296 KiB After Width: | Height: | Size: 296 KiB |
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 209 KiB |
Before Width: | Height: | Size: 444 KiB After Width: | Height: | Size: 444 KiB |
Before Width: | Height: | Size: 223 KiB After Width: | Height: | Size: 223 KiB |
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 133 KiB |
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 164 KiB |
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 222 KiB |
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 126 KiB |
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 282 KiB |
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 197 KiB |