v1

src/App.vue

@@ -1,47 +1,64 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <form action="" @submit.prevent="addTodo"> 
+    <fieldset role="group">
+      <input v-model="newTodo" type="text" placeholder="Tâche à effectuer">
+      <button :disabled="newTodo.length === 0">Ajouter</button>
+    </fieldset>
+  </form>
+
+  <div v-if="todos.length === 0">
+    Vous n'avez pas de tâches à faire
+  </div>
+
+  <div v-else>
+    <ul>
+      <li v-for="todo in sortedTodos()" :key="todo.date" :class="{completed: todo.completed}">
+        <label>
+          <input type="checkbox" v-model="todo.completed">
+          {{ todo.title }}
+
+        </label>
+      </li>
+    </ul>
+
+    <div>
+      <label >
+        <input type="checkbox" name="" id="" v-model="hideCompleted">
+        Masquer les tâche complétées
+      </label>
     </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
+
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script setup>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+import { ref } from 'vue';
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+
+const hideCompleted = ref(false)
+const newTodo = ref('');
+const todos = ref([])
+
+const addTodo = () => {
+  todos.value.push({
+    title: newTodo.value,
+    completed: false,
+    date: Date.now()  
+  });
+
+  newTodo.value = '';
+};
+
+const sortedTodos = () => {
+  const sortedTodo =  todos.value.toSorted((a, b) => a.completed > b.completed ? 1 : -1);
+  if (hideCompleted.value === true){
+    return sortedTodo.filter(t => t.completed === false)
   }
+  return sortedTodo
+};
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>