root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 0
Code Releases Wiki Activity
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.
2221 Commits
90 Branches
11 Tags
349 MiB
 
 
 
 
 
 
Tree: 2057382c28
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2057382c28'
${ noResults }
public/subjects/fifty-shades-of-cold/README.md

2.0 KiB
Raw Blame History

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:
.indianred {
  background: indianred;
}
  • 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:
<div class="indianred">indianred</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

Provided files

You have at your disposal the following files that you can download to test locally:

  • the HTML file index.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 data.js from which you can import colors

Expected result

You can see an example of the expected result here