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; }
- Run the project:
npm run serve
This project will display the following screen:
To-do List - -
Challenges:
- Add functionality to allow users to edit tasks.
- Add functionality to allow users to delete tasks.
Conclusion:
This project is a good way to practice the concepts learned in the course, such as:
- Using
v-for
attributes to iterate over an array. - Using
v-model
attributes to bind component data to the user interface. - Component methods to perform actions.
Evaluation:
To evaluate this project, you can consider the following criteria:
- Does the project meet the specified requirements?
- Is the code well-written and organized?
- Is the project functional and intuitive?
Suggestions:
If you want to make this project more challenging, you can add the following features:
- Allow users to add due dates to tasks.
- Allow users to add notes to tasks.
- Allow users to manage tasks in different lists.
Entrar na conversa