Quelques images de notre site web : to-do list
Lien de notre github :
Lien de notre github-pages:
Description du projet
Pour notre TP1 en interfaces web réactives et animées, j'ai travaillé avec l'une de mes camarades de class. Le projet consistait à développer une application interactive pour gérer une liste de tâches. Nous avions comme objectif de créer notre propre design.
Le site devait inclure une barre de saisie permettant d'ajouter des tâches dans une liste. Une fois une tâche ajoutée, deux options s'offraient à l'utilisateur : soit cocher la tâche comme terminée, ce qui changeait sa couleur pour indiquer son statut, soit la supprimer. En bas de la page, un texte affichait le nombre de tâches encore actives. Nous avons également intégré trois boutons de filtrage : "Toutes", "Complétées" et "Actives". Ces boutons permettaient de visualiser seulement les tâches qui étaient terminées ou encore celles qui restaient à faire.
Une autre fonctionnalité importante était la possibilité de supprimer toutes les tâches d'un seul coup via un bouton. Enfin, pour respecter les consignes du cours, nous avons adapté le site pour qu'il soit réactif à la fois sur mobile et sur desktop.
Date de publication
Ce projet était créé le 8 avril 2024.
Rôle (s) dans le projet
Dans le cadre du cours "Interfaces web réactives et animées" en techniques d'intégration multimédia, on devait réaliser un projet soit tout seul, soit en équipe de deux sur une application de liste de tâches. Je me suis mis en équipe avec une fille de ma classe.
Voici le (s) rôle (s) de chacun des coéquipiers :
Alexander Rankov : J’ai principalement pris en charge toute la programmation en utilisant React. J’ai implémenté les différentes fonctionnalités du site, notamment la barre de saisie pour ajouter des tâches, ainsi que les options permettant de cocher les tâches comme complétées ou de les supprimer. J’ai également codé les boutons de filtrage : "toutes", "complétées" et "actives", qui permettent de naviguer entre les différentes catégories de tâches.
Gabrielle Pelletier : Elle s'est occupée de tout le design du site. Elle a pris en charge la conception de l'interface et le choix des couleurs. C'était pour que l'esthétique du site soit agréable avec les fonctionnalités de l'application.
Logiciel utilisé
Pour mon premier projet web, j'ai utilisé Visual Studio Code. Le logiciel m'a permis de programmer en deux langages de programmation dont HTML5, JSX et SASS.
Langages de programmation utilisés
Le projet a été réalisé en utilisant React. Nous avons principalement utilisé trois langages pour structurer notre site.
HTML5 : C'était utilisé pour la structure de base du site, il permet de définir les éléments essentiels de la page, tels que la barre de saisie, la liste des tâches, et les boutons d'interaction.
JSX : C'était pour nous permettre d’écrire des composants React qui combinent HTML et JavaScript dans le même fichier. Cela a facilité la gestion de l’interactivité du site tout en rendant le code plus lisible.
SASS : C'était pour nous permettre de créer des styles plus efficaces, notamment grâce à ses fonctionnalités comme les variables, ce qui a facilité l'adaptation du site sur différents appareils.