cba85/app.js

## app.js
const options = {
  data() {
    return {
      taskInput: "",
      tasks: [],
      error: false,
    };
  },
  methods: {
    addTask() {
      if (!this.taskInput) {
        this.error = true;
        return;
      }

      this.error = false;
      const task = { id: Date.now(), name: this.taskInput, done: false };
      this.tasks.push(task);
      this.taskInput = "";
    },
    deleteTask(id) {
      this.tasks = this.tasks.filter((task) => {
        return task.id != id;
      });
    },
    updateStatus(id) {
      this.tasks = this.tasks.map((task) => {
        if (task.id == id) {
          task.done = !task.done;
        }
        return task;
      });
    },
  },
};

Vue.createApp(options).mount("#app");

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js" defer></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
    />
  </head>
  <body>
    <h1>Vue Todolist</h1>
    <div id="app">
      <form @submit.prevent="addTask">
        <label for="task">Entrez une tâche</label>
        <input type="text" name="task" id="task" v-model="taskInput" />
        <button type="submit">Ajouter</button>
      </form>

      <p style="color: red" v-if="error">🔴 Veuillez entrer une tâche</p>

      <p v-if="!tasks.length"><em>Vous n'avez plus rien à faire</em> 😎</p>

      <h2 v-if="tasks.length">{{ tasks.length }} tâches à faire</h2>

      <ul v-if="tasks.length">
        <div v-for="task in tasks">
          <input
            type="checkbox"
            name="task"
            :id="task.id"
            @change.prevent="updateStatus(task.id)"
          />
          <label :for="task.id">
            {{ task.name }}
            <a href="#" @click.prevent="deleteTask(task.id)"
              >Supprimer</a
            ></label
          >
        </div>
      </ul>
    </div>

    <footer>Made with ❤️ at IPI Toulouse</footer>
  </body>
</html>
	const options = {
	data() {
	return {
	taskInput: "",
	tasks: [],
	error: false,
	};
	},
	methods: {
	addTask() {
	if (!this.taskInput) {
	this.error = true;
	return;
	}

	this.error = false;
	const task = { id: Date.now(), name: this.taskInput, done: false };
	this.tasks.push(task);
	this.taskInput = "";
	},
	deleteTask(id) {
	this.tasks = this.tasks.filter((task) => {
	return task.id != id;
	});
	},
	updateStatus(id) {
	this.tasks = this.tasks.map((task) => {
	if (task.id == id) {
	task.done = !task.done;
	}
	return task;
	});
	},
	},
	};

	Vue.createApp(options).mount("#app");
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script src="app.js" defer></script>
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
	/>
	</head>
	<body>
	<h1>Vue Todolist</h1>
	<div id="app">
	<form @submit.prevent="addTask">
	<label for="task">Entrez une tâche</label>
	<input type="text" name="task" id="task" v-model="taskInput" />
	<button type="submit">Ajouter</button>
	</form>

	<p style="color: red" v-if="error">🔴 Veuillez entrer une tâche</p>

	<p v-if="!tasks.length"><em>Vous n'avez plus rien à faire</em> 😎</p>

	<h2 v-if="tasks.length">{{ tasks.length }} tâches à faire</h2>

	<ul v-if="tasks.length">
	<div v-for="task in tasks">
	<input
	type="checkbox"
	name="task"
	:id="task.id"
	@change.prevent="updateStatus(task.id)"
	/>
	<label :for="task.id">
	{{ task.name }}
	<a href="#" @click.prevent="deleteTask(task.id)"
	>Supprimer</a
	></label
	>
	</div>
	</ul>
	</div>

	<footer>Made with ❤️ at IPI Toulouse</footer>
	</body>
	</html>