v1
This commit is contained in:
14
README.md
14
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
|
||||
|
||||
|
||||
@ -3,11 +3,16 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||
>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>Todolist</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div class="container" style="margin-block: 2rem;" id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
89
src/App.vue
89
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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user