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 97d7414484 refactor(public): format DOM exercises for better user experience 2 years ago
..
README.md refactor(public): format DOM exercises for better user experience 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.

  • the CSS file gossip-grid.css feel free to use those as they are, or modify them.

Expected result

You can see an example of the expected result here

Notions