public/subjects/gossip-grid

Gossip grid

Instructions

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 will each be represented as a div with the gossip class.

The first gossip card must be a form. It will need a textarea, and a submit button with the text "Share gossip!". It will add new gossip to the list.

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

• id="width": that controls the width of cards from 200 to 800 pixels.
• id="fontSize": that controls the font size from 20 to 40 pixels.
• id="background": that control the background lightness from 20% to 75%.

Use hsl for colors

Files

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

• the HTML file gossip-grid.html to open in the browser, which includes:

  • the JS script which will enable you 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

Notions

• form
• input
• text
• range