public/subjects/gossip-grid-dom

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

• <form>
• <input>: text, range

Files

You only need to create & submit the JS file gossip-grid.js ; we're providing you the following files to download (click right and save link) & test locally:

• the HTML file gossip-grid.html to open in the browser, 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

• the data file gossip-grid.data.js from which you can import gossips

Expected result

You can see an example of the expected result here