forked from monnerat/web_2025
40 lines
1.4 KiB
Markdown
40 lines
1.4 KiB
Markdown
# TP javascript : riot.js
|
|
|
|
La [documentation](https://riot.js.org/) de riot.js
|
|
|
|
#### Ex1
|
|
Voici un [exemple](./src/ex1) d'application (todo list) écrite avec riot.js.
|
|
|
|
<div align="center">
|
|
<img src="./img/todo.png">
|
|
</div>
|
|
|
|
|
|
|
|
Le but est de comprendre le code pour prendre en main Riot.js
|
|
|
|
- Complétez la fonction `add` qui permet d'ajouter une tâche.
|
|
- Faites en sorte que le bouton `clear done` soit desactivé quand il n'y a pas de tâches accomplies.
|
|
- Complétez la fonction `clear` qui retire les tâches accomplies.
|
|
- Mettez en oeuvre les filtres `All`, `Active` et `Done`.
|
|
- Complétez le code qui permet de supprimer une tâche.
|
|
- Ajoutez le nombre de tâches restantes.
|
|
- Modifiez le code pour que les tâches soient stockées localement (utilisez l'objet `localStorage`).
|
|
|
|
#### Ex2
|
|
Voici un [exemple](./src/ex2) d'application (radar chart) écrite avec riot.js.
|
|
<div align="center">
|
|
<img src="./img/radar.png">
|
|
</div>
|
|
|
|
- Complétez les méthodes `add` et `remove`.
|
|
- Créez un nouveau composant `slider.riot`, qui vous utiliserez dans app.riot
|
|
|
|
#### Ex3
|
|
L'api DummyJSON permet de manipuler des données fictives. Ecrire, avec riotjs, une application qui permet :
|
|
|
|
- de récuperer depuis l'url `https://dummyjson.com/products` une liste de produits
|
|
- pour chaque produit, afficher le titre, prix et image.
|
|
- ajouter un filtre `prix < 100`, et un bouton `voir détails`.
|
|
|