From ceee8c81747585e76883008c90e88224b3946367 Mon Sep 17 00:00:00 2001 From: fabienmcll Date: Fri, 23 Aug 2024 21:23:51 +0200 Subject: [PATCH] v1 --- README.md | 14 ++++++- index.html | 9 ++++- src/App.vue | 89 +++++++++++++++++++++++++++------------------ src/assets/main.css | 39 ++------------------ 4 files changed, 76 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index c15c1d3..0f9c004 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,16 @@ -# todolist +# Todolist + +# Projet Todo List en Vue.js 3 + +Ce projet est une application simple de liste de tâches (Todo List) développée avec Vue.js 3. Il a été créé dans le but d'apprendre et de pratiquer les concepts fondamentaux de Vue.js, tels que la gestion des données réactives, les directives, et les méthodes. + +## Fonctionnalités + +- **Ajouter une tâche** : Vous pouvez ajouter une nouvelle tâche en saisissant du texte dans le champ prévu à cet effet et en cliquant sur le bouton "Ajouter". +- **Afficher les tâches** : Les tâches sont affichées dans une liste, avec une checkbox pour marquer une tâche comme complétée. +- **Masquer les tâches complétées** : Une option permet de masquer les tâches qui ont été marquées comme complétées. +- **Tri des tâches** : Les tâches sont automatiquement triées pour afficher les tâches non complétées en premier. -This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup diff --git a/index.html b/index.html index 99f583a..a5dbac1 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,16 @@ + - Vite App + Todolist -
+
+ \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 633a5df..723f85d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,47 +1,64 @@ - - - diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..91ab347 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,4 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} +.completed { + opacity: .5; + text-decoration: line-through; +} \ No newline at end of file