From aa7f28182ca33783d45386c575453dd3ea0615a2 Mon Sep 17 00:00:00 2001
From: Marie Malarme <malarmemarie@gmail.com>
Date: Tue, 16 Jun 2020 00:23:08 +0100
Subject: [PATCH] Updated the `readme` to indicate the files provided + the
 right path matching the new structure of files.

---
 puppeteer/fifty-shades-of-cold.js             |  3 --
 puppeteer/where-do-we-go.js                   |  2 +-
 subjects/build-brick-and-break/README.md      | 29 +++++++++----------
 subjects/fifty-shades-of-cold/README.md       | 11 +++++--
 subjects/fifty-shades-of-cold/index.html      |  5 +++-
 subjects/get-them-all/README.md               |  9 ++++--
 subjects/gossip-grid/README.md                |  7 ++++-
 .../harder-bigger-bolder-stronger/README.md   |  9 +++++-
 subjects/keycodes-symphony/README.md          | 11 +++++--
 subjects/mouse-trap/README.md                 |  7 +++++
 subjects/pick-and-click/README.md             |  8 +++++
 subjects/pimp-my-style/README.md              |  8 +++--
 subjects/where-do-we-go/README.md             | 12 ++++++--
 subjects/where-do-we-go/index.html            |  4 +--
 14 files changed, 89 insertions(+), 36 deletions(-)

diff --git a/puppeteer/fifty-shades-of-cold.js b/puppeteer/fifty-shades-of-cold.js
index f7d545934..6fc38b46c 100644
--- a/puppeteer/fifty-shades-of-cold.js
+++ b/puppeteer/fifty-shades-of-cold.js
@@ -41,6 +41,3 @@ export const choseShade = (shade) => {
     }
   })
 }
-
-generateClasses()
-generateColdShades()
diff --git a/puppeteer/where-do-we-go.js b/puppeteer/where-do-we-go.js
index b5cf2dc89..b772e0d24 100644
--- a/puppeteer/where-do-we-go.js
+++ b/puppeteer/where-do-we-go.js
@@ -2,7 +2,7 @@ import { places } from './data.js'
 
 const body = document.querySelector('body')
 
-export const scroll = () => {
+export const explore = () => {
   createSections()
 
   const location = document.createElement('div')
diff --git a/subjects/build-brick-and-break/README.md b/subjects/build-brick-and-break/README.md
index 46c555c59..e7e4a242b 100644
--- a/subjects/build-brick-and-break/README.md
+++ b/subjects/build-brick-and-break/README.md
@@ -4,25 +4,21 @@
 
 Today, your mission is to build a 3-column brick tower, maintain it and finally break it!
 
-Create a function `build` which will create and display the given amount of bricks passed as argument:
+- Create a function `build` which will create and display the given amount of bricks passed as argument:
 
-- each brick has to be created and added to the page at a regular interval of time (at least 50ms),
-- each brick will receive a unique `id` property, like following:
+  - each brick has to be created and added to the page at a regular interval of time (at least 50ms),
+  - each brick will receive a unique `id` property, like following:
 
-```html
-<div id="brick-1"></div>
-```
+  ```html
+  <div id="brick-1"></div>
+  ```
 
-- each brick in the middle column has to be set with the custom attribute `foundation` receiving the value `true`
+  - each brick in the middle column has to be set with the custom attribute `foundation` receiving the value `true`
 
-Each one of the two emojis in the top-right corner fires a function on click:
+- Each one of the two emojis in the top-right corner fires a function on click:
 
-- 🔨 triggers the function `repair`
-- 🧨 triggers the function `destroy`
-
-Write the body of the `repair` function, which receives any number of `ids`, and for each `id`, retrieves the HTML element and set a custom attribute `repaired` set to `in progress` if it is a brick situated in the middle column, and `true` if not.
-
-Write the body of the `destroy` function, which removes the current last brick in the tower.
+  - 🔨 triggers the function `repair`: write the body of that function, which receives any number of `ids`, and for each `id`, retrieves the HTML element and set a custom attribute `repaired` set to `in progress` if it is a brick situated in the middle column, and `true` if not
+  - 🧨 triggers the function `destroy`: write the body of that function, which removes the current last brick in the tower
 
 ### Notions
 
@@ -36,7 +32,10 @@ Write the body of the `destroy` function, which removes the current last brick i
 
 ### Provided files
 
-- Use this CSS file: [style.css](./style.css)
+- Use the HTML file [index.html](/public/subjects/build-brick-and-break/index.html), which includes:
+
+  - 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
 
 ### Expected result
 
diff --git a/subjects/fifty-shades-of-cold/README.md b/subjects/fifty-shades-of-cold/README.md
index b0c855ff1..4746ac629 100644
--- a/subjects/fifty-shades-of-cold/README.md
+++ b/subjects/fifty-shades-of-cold/README.md
@@ -6,7 +6,7 @@ You've been asked to freshen a webpage atmosphere by displaying shades of cold c
 
 Check the `colors` array provided in the data file below.
 
-- Create a `<style>` tag in the `<head>` tag and generate, for each color of `colors`, a class setting the `background` attribute and taking the color as value, like following:
+- Write the `generateClasses` function which creates a `<style>` tag in the `<head>` tag and generates, for each color of `colors`, a class setting the `background` attribute and taking the color as value, like following:
 
 ```css
 .indianred {
@@ -14,7 +14,7 @@ Check the `colors` array provided in the data file below.
 }
 ```
 
-- Create a `<div>` for each color of the `colors` array whose name contains `aqua`, `blue`, `turquoise`, `green`, `cyan`, `navy` or `purple`.\
+- Write the `generateColdShades` function which creates a `<div>` for each color of the `colors` array whose name contains `aqua`, `blue`, `turquoise`, `green`, `cyan`, `navy` or `purple`.\
   Each `<div>` must have the corresponding generated class and display the name of the color, like following:
 
 ```html
@@ -32,7 +32,12 @@ Check the `colors` array provided in the data file below.
 
 ### Provided files
 
-- Import the `colors` from the data file: [data.js](./data.js)
+- Use the HTML file [index.html](/public/subjects/fifty-shades-of-cold/index.html), which includes:
+
+  - 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
+
+- Import `colors` from the data file [data.js](/public/subjects/fifty-shades-of-cold/data.js)
 
 ### Expected result
 
diff --git a/subjects/fifty-shades-of-cold/index.html b/subjects/fifty-shades-of-cold/index.html
index 9aea75be4..8bb0fe563 100644
--- a/subjects/fifty-shades-of-cold/index.html
+++ b/subjects/fifty-shades-of-cold/index.html
@@ -46,7 +46,10 @@ div {
 <body>
   <script type="module">
 
-import { choseShade } from './fifty-shades-of-cold.js'
+import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
+
+generateClasses()
+generateColdShades()
 
 const divs = [...document.querySelectorAll('div')]
 divs.map((d) => {
diff --git a/subjects/get-them-all/README.md b/subjects/get-them-all/README.md
index 8e72d9e77..f61272211 100644
--- a/subjects/get-them-all/README.md
+++ b/subjects/get-them-all/README.md
@@ -17,6 +17,8 @@ On top of the webpage, each of the four buttons fires a function which has to re
 
 - Write the body of the `getBonannoPisano` function, which targets the architect you're looking for, whose `id` is `BonannoPisano`.
 
+> 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
+
 ### Notions
 
 - [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName)
@@ -26,5 +28,8 @@ On top of the webpage, each of the four buttons fires a function which has to re
 
 ### Provided files
 
-- Use this CSS file: [style.css](./style.css)
-- You can take a look at the data: [data.js](./data.js)
+- Use the HTML file [index.html](/public/subjects/get-them-all/index.html), which includes:
+
+  - the JS script running some code, and which will also allow to run yours
+  - some data used to generate content
+  - some CSS pre-styled classes: feel free to use those as they are, or modify them
diff --git a/subjects/gossip-grid/README.md b/subjects/gossip-grid/README.md
index 3a8902592..5c8890624 100644
--- a/subjects/gossip-grid/README.md
+++ b/subjects/gossip-grid/README.md
@@ -15,7 +15,12 @@ Create the function `grid` which displays all the `gossips`, provided in the dat
 
 ### Provided files
 
-- Import the `gossips` from the data file: [data.js](./data.js)
+- Use the HTML file [index.html](/public/subjects/gossip-grid/index.html), which includes:
+
+  - 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
+
+- Import `gossips` from the data file [data.js](/public/subjects/gossip-grid/data.js)
 
 ### Expected result
 
diff --git a/subjects/harder-bigger-bolder-stronger/README.md b/subjects/harder-bigger-bolder-stronger/README.md
index 3f3d90138..d8824a408 100644
--- a/subjects/harder-bigger-bolder-stronger/README.md
+++ b/subjects/harder-bigger-bolder-stronger/README.md
@@ -6,11 +6,18 @@ Being stuck at home, bored, desperate and coming up with a lot of weird ideas, a
 
 Generate a board where each new letter is harder, bigger, bolder and stronger!
 
-Create the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased:
+Write the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased:
 
 - `font-size` has to grow from `20` to at least `100` pixels
 - `font-weigth` has to be `300` for the first third of the letters, `400` for the second third, and `600` for the last third
 
+### Provided files
+
+- Use the HTML file [index.html](/public/subjects/harder-bigger-bolder-stronger/index.html), which includes:
+
+  - 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
+
 ### Notions
 
 - [`style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style)
diff --git a/subjects/keycodes-symphony/README.md b/subjects/keycodes-symphony/README.md
index 13c1239ba..01f4c2e7f 100644
--- a/subjects/keycodes-symphony/README.md
+++ b/subjects/keycodes-symphony/README.md
@@ -4,10 +4,10 @@
 
 Like an inspired Beethoven who's going to write his Moonlight Sonata, you're about to compose a colourful symphony of letters with your keyboard.
 
-Export the function `compose`:
+Write the function `compose`:
 
 - Make it fire every time a key is pressed
-- Create a new `note`, which has a background color generated using its `keyCode`, and displays the corresponding letter pressed
+- Create a new `note`, which has a background color generated using its `key`, and displays the corresponding letter pressed
 - If the pressed key is the `Delete` one, delete the last note
 - If the pressed key is the `Escape` one, clear all the notes
 
@@ -15,6 +15,13 @@ Export the function `compose`:
 
 - [Keyboard event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent): [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event), [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
 
+### Provided files
+
+- Use the HTML file [index.html](/public/subjects/keycodes-symphony/index.html), which includes:
+
+  - 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
+
 ### Expected result
 
 You can see an example of the expected result [here](https://youtu.be/5DdijwBnpAk)
diff --git a/subjects/mouse-trap/README.md b/subjects/mouse-trap/README.md
index 8ecd538c4..f6b32493e 100644
--- a/subjects/mouse-trap/README.md
+++ b/subjects/mouse-trap/README.md
@@ -17,6 +17,13 @@ Develop a trap to capture the elements when the mouse is getting too close to th
 - [Mouse event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent): [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event), [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) / [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
 - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
 
+### Provided files
+
+- Use the HTML file [index.html](/public/subjects/mouse-trap/index.html), which includes:
+
+  - 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
+
 ### Expected result
 
 You can see an example of the expected result [here](https://youtu.be/qF843P-V2Yw)
diff --git a/subjects/pick-and-click/README.md b/subjects/pick-and-click/README.md
index 36bdc7f77..276cfefeb 100644
--- a/subjects/pick-and-click/README.md
+++ b/subjects/pick-and-click/README.md
@@ -17,6 +17,14 @@ Write the function `pick` which creates a `hsl` color picker varying the `hue` a
 - [Copy event](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event)
 - [Mouse move event](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)
 - [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg): [`createElementNS`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS), [`setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
+- Take a look at the [HSL section](https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color)
+
+### Provided files
+
+- Use the HTML file [index.html](/public/subjects/pick-and-click/index.html), which includes:
+
+  - 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
 
 ### Expected result
 
diff --git a/subjects/pimp-my-style/README.md b/subjects/pimp-my-style/README.md
index e050acc62..5b1285352 100644
--- a/subjects/pimp-my-style/README.md
+++ b/subjects/pimp-my-style/README.md
@@ -41,8 +41,12 @@ Click 6 --> <div class="button"></div>
 
 ### Provided files
 
-- Use this CSS file: [https://mariemalarme.github.io/dom-js/assets/style/pimp-my-style.css](https://mariemalarme.github.io/dom-js/assets/style/pimp-my-style.css)
-- Import the `styles` from the data file: [https://mariemalarme.github.io/dom-js/assets/data/pimp-my-style.js](https://mariemalarme.github.io/dom-js/assets/data/pimp-my-style.js)
+- Use the HTML file [index.html](/public/subjects/pimp-my-style/index.html), which includes:
+
+  - 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
+
+- Import `styles` from the data file [data.js](/public/subjects/pimp-my-style/data.js)
 
 ### Expected result
 
diff --git a/subjects/where-do-we-go/README.md b/subjects/where-do-we-go/README.md
index 79846ed45..94dc42ec4 100644
--- a/subjects/where-do-we-go/README.md
+++ b/subjects/where-do-we-go/README.md
@@ -4,10 +4,10 @@
 
 Tired of staying home for too long, you decide to develop a page to index ideas for your next travel destinations, so that next time you'll ask yourself 'Where do we go?', you won't need to get lost for 3 hours!
 
-Create a page which displays 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
-- display a fullscreen-size image for each place ; use the images hosted here: `https://github.com/MarieMalarme/dom-js/tree/master/assets/images`, also available as Github Pages here `https://mariemalarme.github.io/dom-js/assets/images/locationName.jpg`
+- display a fullscreen-size image for each place ; use the images hosted [here](/public/subjects/where-do-we-go/images)
 - display a location indicator, displaying the `name` and the `coordinates` of the current place featured in the image, using the corresponding `color` as text color, which updates on scroll when another image is reached
 - display a compass indicating the latitude direction ; North if the user is scrolling up, South if he's scrolling down
 - when clicking on the page, open a link redirecting to the Google Maps' coordinates of the place currently displayed.
@@ -16,10 +16,16 @@ Create a page which displays the list of `places` provided in the data file belo
 
 - [Wheel event](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
 - [`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), [`open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)
+- Take a look at the [DMS coordinates system](https://en.wikipedia.org/wiki/Geographic_coordinate_system#Degrees:_a_measurement_of_angle)
 
 ### Provided files
 
-- Import the `places` from the data file: [https://mariemalarme.github.io/dom-js/assets/data/where-do-we-go.js](https://mariemalarme.github.io/dom-js/assets/data/where-do-we-go.js)
+- Use the HTML file [index.html](/public/subjects/where-do-we-go/index.html), which includes:
+
+  - 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
+
+- Import `places` from the data file [data.js](/public/subjects/where-do-we-go/data.js)
 
 ### Expected result
 
diff --git a/subjects/where-do-we-go/index.html b/subjects/where-do-we-go/index.html
index 298a0ded2..8540edb3e 100644
--- a/subjects/where-do-we-go/index.html
+++ b/subjects/where-do-we-go/index.html
@@ -60,9 +60,9 @@ section {
 </head>
 <body>
   <script type="module">
-import { scroll } from './where-do-we-go.js'
+import { explore } from './where-do-we-go.js'
 
-scroll()
+explore()
   </script>
 </body>
 </html>
\ No newline at end of file