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.
 
 
 
 
 
 
MarieMalarme 7bdcd4d782
Updated subject.
4 years ago
..
README.md Updated subject. 4 years ago
data.js adding dom content 4 years ago
index.html adding dom content 4 years ago

README.md

Gossip grid

Instructions

Good information is the pillar of society, that's why you've decided to dedicate your time to reveal the powerful truth to the world and deliver essential and strong news: you're launching a gossip grid.

Create the function grid which displays all the gossips, provided in the data file below, as cards on a grid (in the same order). They must be div with the gossip class.

The first gossip card must be a form with a textarea and a submit button with the text Share gossip! that allows to add a new gossip to the list.

Create 3 type="range" inputs with the class range, all wrapped in a div with the class ranges:

  • one with id="width" that control the width of cards (from 200 to 800 pixels)
  • one with id="fontSize" that control the font size (from 20 to 40 pixels)
  • one with id="background" that control the background lightness (from 20% to 75%)

tips: use hsl for colors

Notions

Provided files

  • Check the HTML file index.html, which includes:

    • the JS script which will allow to run your code
    • some CSS pre-styled classes: feel free to use those as they are, or modify them
  • Import gossips from the data file data.js

Expected result

You can see an example of the expected result here