Bienvenue dans le monde de CS50 ! Vous êtes sur le point de découvrir un code HTML, CSS et JavaScript qui donne vie à une application de prise de notes simple. Dans cet article, nous vous expliquerons en détail le fonctionnement de ce code. Préparez-vous à être émerveillé !
Structure de la page
Le code HTML, contenu dans le fichier index.html, définit la structure de notre application web. Il comprend des éléments de formulaire permettant d’ajouter des notes, des boutons pour trier et supprimer les notes, ainsi qu’une liste pour afficher les notes. Le fichier index.html est également lié à des fichiers CSS (ali1.css) et JavaScript (script.js) externes.
Styles personnalisés
Le fichier CSS ali1.css fournit des styles personnalisés pour différents éléments de la page. Il définit les polices, les couleurs, les espacements et les styles de boutons. Il s’occupe également de l’apparence des éléments de note, des cases à cocher, des étiquettes et des boutons. Vous serez agréablement surpris par le niveau de personnalisation offert par ce fichier CSS.
Fonctionnalités magiques
Le fichier JavaScript script.js ajoute des fonctionnalités à notre application de prise de notes. Il écoute l’événement DOMContentLoaded, ce qui garantit que le code JavaScript est exécuté une fois que la page a entièrement chargée. Il sélectionne différents éléments HTML à l’aide de leurs identifiants et leur ajoute des écouteurs d’événements. Voici quelques fonctionnalités clés mises en œuvre dans le code JavaScript :
Ajouter des notes : Lorsque l’utilisateur soumet le formulaire, le code vérifie si une note et une étiquette facultative ont été saisies. Si c’est le cas, il ajoute une nouvelle note à la liste et la stocke dans le tableau
noteItems. Il met également à jour les options de filtrage pour les étiquettes.Modifier des notes : Lorsque le bouton “Modifier” est cliqué sur une note, il permet à l’utilisateur de modifier le texte et l’étiquette de la note. Après avoir apporté les modifications, l’utilisateur peut cliquer sur le bouton “Mettre à jour” pour les enregistrer.
Supprimer des notes : Lorsque le bouton “Supprimer” est cliqué sur une note, il demande à l’utilisateur de confirmer et, si la suppression est confirmée, supprime la note de la liste et de
noteItems.Notes terminées : Lorsque la case à cocher d’une note est cliquée, elle bascule la classe “terminé”, indiquant visuellement l’état de complétion de la note. Le code met également à jour le tableau
noteItemspour refléter l’état de complétion.Trier les notes : Le bouton “Trier” permet de trier les notes en fonction de leur état de complétion, en déplaçant les notes terminées en bas de la liste.
Supprimer les notes terminées : Le bouton “Supprimer les terminées” supprime toutes les notes terminées de la liste et de
noteItems.Recherche de notes : Le code permet aux utilisateurs de rechercher des notes par texte. Il filtre les notes en fonction de la recherche en temps réel.
Filtrer les notes par étiquette : Les utilisateurs peuvent filtrer les notes en sélectionnant une étiquette dans le menu déroulant. Cela masque les notes qui ne correspondent pas à l’étiquette sélectionnée.
Stockage local : Le code utilise
localStoragepour stocker les notes de manière persistante, garantissant qu’elles sont disponibles lorsque l’utilisateur revient sur la page. Vous n’aurez plus jamais à vous soucier de perdre vos précieuses notes !
Une base solide pour votre application
Ce code fournit une structure de base pour une application de prise de notes avec des fonctionnalités d’ajout, de modification, de suppression, de complétion, de tri et de filtrage des notes. C’est un point de départ fonctionnel qui peut être personnalisé et étendu selon vos besoins. Laissez libre cours à votre créativité et profitez de cette application pour organiser votre vie de manière simple et efficace !
Que pensez-vous de cette application de prise de notes ? Partagez vos réflexions et vos idées dans les commentaires ci-dessous. Et n’oubliez pas, les meilleures idées commencent souvent par une simple note !
