public/subjects/fifty-shades-of-cold/README.md

## Fifty shades of cold

### Instructions

You've been asked to freshen a webpage atmosphere by displaying shades of cold colors.

Check the `colors` array provided in the data file below.

- 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
.blue {
  background: blue;
}
```

- 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
<div class="blue">blue</div>
```

- The function `choseShade` is triggered when clicking on a `div`.\
  Write the body of this function, which receives the shade of the clicked element as argument, and replaces all the other elements class by the chosen shade.

### Notions

- [`head`](https://developer.mozilla.org/en-US/docs/Web/API/Document/head) / [style tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
- [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
- [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList): `contains()`, `replace()`

### Files

You only need to create & submit the JS file `fifty-shades-of-cold.js` ; we're providing you the following files to download (click right and save link) & test locally:

- the HTML file [fifty-shades-of-cold.html](/public/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html) to open in the browser, 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

- the data file [fifty-shades-of-cold.data.js](/public/subjects/fifty-shades-of-cold/fifty-shades-of-cold.data.js) from which you can import `colors`

### Expected result

You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)
adding dom content 4 years ago			`## Fifty shades of cold`

			`### Instructions`

			`You've been asked to freshen a webpage atmosphere by displaying shades of cold colors.`

			Check the `colors` array provided in the data file below.

Updated the `readme` to indicate the files provided + the right path matching the new structure of files. 4 years ago			- 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:
adding dom content 4 years ago
			```css
fifty-shades-of-cold: fix example color which was confusing 3 years ago			`.blue {`
			`background: blue;`
adding dom content 4 years ago			`}`
			```

Updated the `readme` to indicate the files provided + the right path matching the new structure of files. 4 years ago			- 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`.\
adding dom content 4 years ago			Each `<div>` must have the corresponding generated class and display the name of the color, like following:

			```html
fifty-shades-of-cold: fix example color which was confusing 3 years ago			`<div class="blue">blue</div>`
adding dom content 4 years ago			```

			- The function `choseShade` is triggered when clicking on a `div`.\
			`Write the body of this function, which receives the shade of the clicked element as argument, and replaces all the other elements class by the chosen shade.`

			`### Notions`

			- [`head`](https://developer.mozilla.org/en-US/docs/Web/API/Document/head) / [style tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
			- [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
			- [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList): `contains()`, `replace()`

fifty-shades-of-cold: change file naming 3 years ago			`### Files`
adding dom content 4 years ago
fifty-shades-of-cold: change file naming 3 years ago			You only need to create & submit the JS file `fifty-shades-of-cold.js` ; we're providing you the following files to download (click right and save link) & test locally:
Updated the instructions to dl the html & data files locally. (#620) 4 years ago
fifty-shades-of-cold: change file naming 3 years ago			`- the HTML file [fifty-shades-of-cold.html](/public/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html) to open in the browser, which includes:`
Updated the `readme` to indicate the files provided + the right path matching the new structure of files. 4 years ago
			`- 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`

fifty-shades-of-cold: change file naming 3 years ago			- the data file [fifty-shades-of-cold.data.js](/public/subjects/fifty-shades-of-cold/fifty-shades-of-cold.data.js) from which you can import `colors`
adding dom content 4 years ago
			`### Expected result`

			`You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)`