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.
 
 
 
 
 
 
lee 629c2369ea fix(public/subjects): change css sentence all dom subjects 2 years ago
..
README.md fix(public/subjects): change css sentence all dom subjects 2 years ago
gossip-grid.css refactor(public): format DOM exercises for better user experience 2 years ago
gossip-grid.data.js gossip-grid: change files naming 4 years ago
gossip-grid.html refactor(public): format DOM exercises for better user experience 2 years ago

README.md

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