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.
 
 
 
 
 
 

1.6 KiB

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.
  • the data file gossip-grid.data.js from which you can import gossips.

  • feel free to use the CSS file gossip-grid.css as it is or you can also modify it.

Expected result

You can see an example of the expected result here

Notions