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.
|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago | |
data.js | 4 years ago | |
index.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:
.indianred {
background: indianred;
}
- 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="indianred">indianred</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
Provided files
-
Check the HTML file 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
Expected result
You can see an example of the expected result here