web_2025/R4.01_R4.A.10/td_tp/tp5/README.md

TP javascript : riot.js

La documentation de riot.js

Ex1

Voici un exemple d'application (todo list) écrite avec riot.js.

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 d'application (radar chart) écrite avec riot.js.

• 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.