|
|
|
|
@ -7,9 +7,10 @@ Good information is the pillar of society, that's why you've decided to dedicate
|
|
|
|
|
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 that allows to add a new gossip to the list |
|
|
|
|
The first `gossip` card must be a form with a `textarea` and a submit button that allows to add a new gossip to the list with the text `Share gossip!` |
|
|
|
|
|
|
|
|
|
Create 3 `type="range"` inputs: |
|
|
|
|
|
|
|
|
|
- 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%)* |
|
|
|
|
@ -18,7 +19,8 @@ Create 3 `type="range"` inputs:
|
|
|
|
|
|
|
|
|
|
### Notions |
|
|
|
|
|
|
|
|
|
- [Inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input): [`text`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [`range`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) |
|
|
|
|
- [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Form) |
|
|
|
|
- [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input): [`text`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [`range`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) |
|
|
|
|
|
|
|
|
|
### Provided files |
|
|
|
|
|
|
|
|
|
|
GitHub