mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
3 years ago | |
---|---|---|
.. | ||
README.md | 3 years ago | |
fifty-shades-of-cold.data.js | 4 years ago | |
fifty-shades-of-cold.html | 4 years ago |
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 ofcolors
, a class setting thebackground
attribute and taking the color as value, like following:
.blue {
background: blue;
}
- Write the
generateColdShades
function which creates a<div>
for each color of thecolors
array whose name containsaqua
,blue
,turquoise
,green
,cyan
,navy
orpurple
.
Each<div>
must have the corresponding generated class and display the name of the color, like following:
<div class="blue">blue</div>
- The function
choseShade
is triggered when clicking on adiv
.
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
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 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 from which you can import
colors
Expected result
You can see an example of the expected result here