diff --git a/subjects/build-brick-and-break/README.md b/subjects/build-brick-and-break/README.md index 6e71d9293..8fe63bf7d 100644 --- a/subjects/build-brick-and-break/README.md +++ b/subjects/build-brick-and-break/README.md @@ -26,7 +26,7 @@ You only need to create & submit the JS file `build-brick-and-break.js`, We're p - the HTML file [build-brick-and-break.html](./build-brick-and-break.html) can be opened in the browser, which includes: - the JS script running some code, and which will enable you to run your code. -- the CSS file [build-brick-and-break.css](./build-brick-and-break.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [build-brick-and-break.css](./build-brick-and-break.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/fifty-shades-of-cold/README.md b/subjects/fifty-shades-of-cold/README.md index f1d4d8888..5bdc4e117 100644 --- a/subjects/fifty-shades-of-cold/README.md +++ b/subjects/fifty-shades-of-cold/README.md @@ -32,7 +32,7 @@ You only need to create & submit the JS file `fifty-shades-of-cold.js`, we're pr - the data file [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`. -- the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/get-them-all-dom/README.md b/subjects/get-them-all-dom/README.md index e0fb41115..fc212ccb8 100644 --- a/subjects/get-them-all-dom/README.md +++ b/subjects/get-them-all-dom/README.md @@ -51,5 +51,3 @@ You only need to create & submit the JS file `get-them-all.js` ; we're providing - the import of the data - the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML - -- the CSS file [get-them-all.css](./get-them-all.css) used to style the content in the HTML diff --git a/subjects/get-them-all-dom/get-them-all.html b/subjects/get-them-all-dom/get-them-all.html index ff0bba6fa..c936a7902 100644 --- a/subjects/get-them-all-dom/get-them-all.html +++ b/subjects/get-them-all-dom/get-them-all.html @@ -1,93 +1,179 @@ - - Get them all + Get them all - + - - \ No newline at end of file diff --git a/subjects/get-them-all/README.md b/subjects/get-them-all/README.md index 6deefd16f..ccabd335b 100644 --- a/subjects/get-them-all/README.md +++ b/subjects/get-them-all/README.md @@ -2,55 +2,54 @@ ### Instructions -You've been given the task of finding the main architect of the Tower of Pisa before he achieves his plans; avoiding all those lame pictures of people pretending to stop it from falling. +You've been attributed the task to find the main architect of the Tower of Pisa before he achieves his plans, avoiding us nowadays all those lame pictures of people pretending to stop it from falling. -You arrive at the architects' chamber, but all you have in front of you is a bunch of unknown people. +You arrive at the architects' chamber to find him, but all you have in front of you is a bunch of unknown people. +Step by step, with the little information you have, gather information and figure out by elimination who he is. -Step by step, gather information and figure out by elimination who he is. +Launch the provided HTML file in the browser to begin your investigation.
+On top of the webpage, each of the four buttons fires a function: -Launch the provided HTML file in the browser to begin your investigation. +- Write the body of the `getArchitects` function, which returns an array containing 2 arrays of HTML elements: -At the top of the webpage, each of the four buttons fires a function: + - the first array contains the architects, all corresponding to a `` tag + - the second array contains all the non-architects people -Complete the body of the following functions. The first three functions return an array containing two arrays of HTML elements: +- Write the body of the `getClassical` function, which returns an array containing 2 arrays of HTML elements: -- `getArchitects`: - - 1st array: the architects, all corresponding to a `` tag. - - 2nd array: all the non-architects. + - the first array contains the architects belonging to the `classical` class + - the second array contains the non-classical architects -- `getClassical`: - - 1st array: the architects belonging to the `classical` class. - - 2nd array: the non-classical architects. +- Write the body of the `getActive` function, which returns an array containing 2 arrays of HTML elements: -- `getActive`: - - 1st array: the classical architects who are `active` in their class. - - 2nd array: the non-active classical architects. + - the first array contains the classical architects who are `active` in their class + - the second array contains the non-active classical architects -The last function is `getBonannoPisano`. It returns an array containing: - - the HTML element of the architect you're looking for, whose `id` is `BonannoPisano`. - - an array containing all the remaining HTML elements of active classical architects. +- Write the body of the `getBonannoPisano` function, which returns an array containing: + - the HTML element of the architect you're looking for, whose `id` is `BonannoPisano` + - an array which contains all the remaining HTML elements of active classical architects + +> From now on, don't forget to [**export**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) all the expected functions, so that they can be imported to be tested
> `export const getArchitects = () => {...}` + +### Notions + +- [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) +- [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName) +- [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) +- [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) +- [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) / [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) +- ...and bit of CSS that could help with the [`:not` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:not) -> From now on, don't forget to [**export**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) all the expected functions, so that they can be imported to be tested. -```js -export const getArchitects = () => {...} -``` ### Files -You only need to create & submit the JS file `get-them-all.js`. We're providing you the following files to download. You may test them locally: +You only need to create & submit the JS file `get-them-all.js` ; we're providing you the following files to download (click right and save link) & test locally: - the HTML file [get-them-all.html](./get-them-all.html) to open in the browser, which includes: - - the JS script running some code, and which will allow you to run your code. - - some CSS pre-styled classes: feel free to use those as they are, or modify them. - - an import of the data. - -- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML. + - the JS script running some code, and which will also allow to run yours + - some CSS pre-styled classes: feel free to use those as they are, or modify them + - the import of the data -### Notions +- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML -- [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) -- [getElementsByTagName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName) -- [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) -- [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) -- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) / [querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) -- ...and bit of CSS that could help with the [`:not` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:not) +- feel free to use the CSS file [get-them-all.css](./get-them-all.css) as it is or you can also modify it. diff --git a/subjects/get-them-all-dom/get-them-all.css b/subjects/get-them-all/get-them-all.css similarity index 100% rename from subjects/get-them-all-dom/get-them-all.css rename to subjects/get-them-all/get-them-all.css diff --git a/subjects/get-them-all/get-them-all.html b/subjects/get-them-all/get-them-all.html index c936a7902..ff0bba6fa 100644 --- a/subjects/get-them-all/get-them-all.html +++ b/subjects/get-them-all/get-them-all.html @@ -1,179 +1,93 @@ + - Get them all + Get them all - + + + \ No newline at end of file diff --git a/subjects/gossip-grid/README.md b/subjects/gossip-grid/README.md index ffc1fcf75..e883b14b8 100644 --- a/subjects/gossip-grid/README.md +++ b/subjects/gossip-grid/README.md @@ -25,7 +25,7 @@ You only need to create & submit the JS file `gossip-grid.js`; we're providing y - the data file [gossip-grid.data.js](./gossip-grid.data.js) from which you can import `gossips`. -- the CSS file [gossip-grid.css](./gossip-grid.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [gossip-grid.css](./gossip-grid.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/harder-bigger-bolder-stronger/README.md b/subjects/harder-bigger-bolder-stronger/README.md index 9d2af7e95..5d05ffb15 100644 --- a/subjects/harder-bigger-bolder-stronger/README.md +++ b/subjects/harder-bigger-bolder-stronger/README.md @@ -18,7 +18,7 @@ You only need to create & submit the JS file `harder-bigger-bolder-stronger.js`. - the JS script running some code, and which will enable you to run yours. -- the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) as it is or you can also modify it. ### Notions diff --git a/subjects/keycodes-symphony/README.md b/subjects/keycodes-symphony/README.md index 807bd007b..f4c9ce7ba 100644 --- a/subjects/keycodes-symphony/README.md +++ b/subjects/keycodes-symphony/README.md @@ -18,7 +18,7 @@ You only need to create & submit the JS file `keycodes-symphony.js`; we're provi - the JS script which will allow to run your code. -- the CSS file [keycodes-symphony.css](./keycodes-symphony.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [keycodes-symphony.css](./keycodes-symphony.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/mouse-trap/README.md b/subjects/mouse-trap/README.md index db9bc9cb7..b4ca19a2e 100644 --- a/subjects/mouse-trap/README.md +++ b/subjects/mouse-trap/README.md @@ -1,4 +1,4 @@ -## Mouse trap +****## Mouse trap ### Instructions @@ -23,7 +23,7 @@ You only need to create & submit the JS file `mouse-trap.js`; we're providing yo - the JS script which will enable you to run your code. -- the CSS file [mouse-trap.css](./mouse-trap.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [mouse-trap.css](./mouse-trap.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/pick-and-click/README.md b/subjects/pick-and-click/README.md index 167c02740..8170a4fd0 100644 --- a/subjects/pick-and-click/README.md +++ b/subjects/pick-and-click/README.md @@ -33,8 +33,7 @@ You only need to create & submit the JS file `pick-and-click.js`; we're providin - the JS script which will enable you to run your code. -- the CSS file [pick-and-click.css](./pick-and-click.css) feel free to use those as they are, or modify them. - +- feel free to use the CSS file [pick-and-click.css](./pick-and-click.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/pimp-my-style/README.md b/subjects/pimp-my-style/README.md index a435644b4..623f771e3 100644 --- a/subjects/pimp-my-style/README.md +++ b/subjects/pimp-my-style/README.md @@ -48,7 +48,7 @@ You only need to create & submit the JS file `pimp-my-style.js`. Ee're providing - the JS script running some code, and which will enable you to run yours. - the data file [pimp-my-style.data.js](./pimp-my-style.data.js) from which you can import `styles`. -- the CSS file [pimp-my-style.css](./pimp-my-style.css) feel free to use those as they are, or modify them. +- feel free to use the CSS file [pimp-my-style.css](./pimp-my-style.css) as it is or you can also modify it. ### Expected result diff --git a/subjects/where-do-we-go/README.md b/subjects/where-do-we-go/README.md index 693d82bcd..a82e07760 100644 --- a/subjects/where-do-we-go/README.md +++ b/subjects/where-do-we-go/README.md @@ -31,10 +31,9 @@ You only need to create & submit the JS file `where-do-we-go.js`; we're providin - the data file [where-do-we-go.data.js](./where-do-we-go.data.js) from which you can import `places` -- the CSS file [where-do-we-go.css](./where-do-we-go.css) feel free to use those as they are, or modify them. - -- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) or you can can fetch from the public URL, example `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg` [arlit](https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg) +- feel free to use the CSS file [where-do-we-go.css](./where-do-we-go.css) as it is or you can also modify it. +- you can get the images to be used in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) 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 ### Expected result You can see an example of the expected result [here](https://youtu.be/BLxNi1WH6_0)