You've been asked to freshen a webpage atmosphere by displaying shades of cold colors.
You've been asked to freshen up a webpage, by displaying shades of cold colors.
Check the `colors` array provided in the data file below.
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:
Write the `generateClasses` function. It creates a `<style>` tag inside the `<head>`. It should generate one class for each color in the `colors` array, which sets the `background` attribute like so:
```css
```css
.blue {
.blue {
@ -14,33 +14,32 @@ Check the `colors` array provided in the data file below.
}
}
```
```
- 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`.\
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:
Each `<div>` must have the corresponding generated class and display the name of the color, like following:
```html
```html
<divclass="blue">blue</div>
<divclass="blue">blue</div>
```
```
- The function `choseShade` is triggered when clicking on a `div`.\
The function `choseShade` is triggered when clicking on a `div`. Write the body of this function. It accepts the shade of the clicked element as an argument, and replaces all the classes of all the other elements by the chosen shade.
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.
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:
You only need to create & submit the JS file `fifty-shades-of-cold.js`, we're providing you the following files to download and test locally:
- the HTML file [fifty-shades-of-cold.html](./fifty-shades-of-cold.html) to open in the browser, which includes:
- the HTML file [fifty-shades-of-cold.html](./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
- the JS script running some code, and which will enable you to run yours
- 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 [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`
- the data file [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`.
### Expected result
### Expected result
You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)
You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)
davhojt
2 years ago
committed by