Project 3: To-do List

Complete Vue.js Course: Mastering from Basic to Advanced

Sobre a Aula

Project 3: To-do List

Description: This project is a simple to-do list that allows users to add, remove, and mark tasks as completed.

Requirements:

The project should allow users to add new tasks.
The project should allow users to remove tasks.
The project should allow users to mark tasks as completed.

Steps:

Create a directory for the project:

mkdir to-do-list

Install dependencies:

npm install vue

Create initial files:

touch index.html
touch main.js
touch style.css

Implement the code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>To-do List</title>
</head>
<body>
  <div id="app">
    <h1>To-do List</h1>

    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" v-model="task.completed">
        {{ task.title }}
      </li>
    </ul>

    <input type="text" v-model="newTask">
    <button @click="addTask">Add Task</button>
  </div>
</body>
</html>

JavaSript

import Vue from 'vue';

export default {
  name: 'App',
  data() {
    return {
      tasks: [],
      newTask: '',
    };
  },
  mounted() {
  },
  methods: {
    addTask() {
      if (this.newTask) {
        this.tasks.push({
          title: this.newTask,
          completed: false,
        });
        this.newTask = '';
      }
    },
  },
};

CSS

body {
  font-family: sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

input[type="checkbox"] {
  margin-right: 10px;
}