mirror of https://github.com/01-edu/public.git
Add the gif for the random header quote option.
This commit is contained in:
parent
54a4cedb22
commit
b9a78b06d8
|
@ -46,23 +46,21 @@ If you made it until here pretty fast, now the fun will begin! You're gonna add
|
||||||
|
|
||||||
![](images-order.gif)
|
![](images-order.gif)
|
||||||
|
|
||||||
|
|
||||||
- In the Contact section, when clicking on the "Introduce yourself" button, get the text typed in the `input` and display it in the middle of the following sentence: "Nice to meet you _[put here the input data]_ 👋! Thanks for introducing yourself." Also, the `<p>`, `<input>` & `<button>` elements have to disappear after the button has been clicked.
|
- In the Contact section, when clicking on the "Introduce yourself" button, get the text typed in the `input` and display it in the middle of the following sentence: "Nice to meet you _[put here the input data]_ 👋! Thanks for introducing yourself." Also, the `<p>`, `<input>` & `<button>` elements have to disappear after the button has been clicked.
|
||||||
|
|
||||||
![](contact-input.gif)
|
![](contact-input.gif)
|
||||||
|
|
||||||
|
|
||||||
- When clicking on a card, open a modale window that will show the whole article ; the modale will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
|
- When clicking on a card, open a modale window that will show the whole article ; the modale will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
|
||||||
|
|
||||||
![](modale.gif)
|
![](modale.gif)
|
||||||
|
|
||||||
|
|
||||||
- In the modale article, create a widget that allows to change the text alignment ; on click on `left` or `center` buttons, the layout changes to the chosen justification, and the selected option's `font-weight` becomes `bold` whereas the other becomes `light`.
|
- In the modale article, create a widget that allows to change the text alignment ; on click on `left` or `center` buttons, the layout changes to the chosen justification, and the selected option's `font-weight` becomes `bold` whereas the other becomes `light`.
|
||||||
|
|
||||||
![](text-alignment.gif)
|
![](text-alignment.gif)
|
||||||
|
|
||||||
|
- Warrior option: set the `header` text content with a random quote every time the page is loaded, and then every 4 seconds. You can use this marvelous [Chuck Norris API](https://api.chucknorris.io/) to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) his most inspiring sayings and display them in your own page!
|
||||||
|
|
||||||
- Warrior option: change the `header` text content to be a random quote every time the page is loaded. You can use this marvelous [Chuck Norris API](https://api.chucknorris.io/) to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) his most inspiring sayings and display them in your own page!
|
![](fetch-quote.gif)
|
||||||
|
|
||||||
### Notions
|
### Notions
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 149 KiB |
Loading…
Reference in New Issue