Vue2: Dynamic To-Do List

Easy
1
3.8% Acceptance

Welcome to this Vue.js To-Do App lab! In this exercise, you'll get hands-on experience building a dynamic to-do app using Vue.js. By the end of this lab, you'll have a functioning app where you can add, delete, and mark tasks as complete.

Objective

Build a simple to-do app where tasks can be added to a list, marked as complete, and deleted.

Instructions

  1. Project Setup

    • Start by setting up a new Vue instance. Remember to target the appropriate element in your HTML to bind your Vue app.

  2. Creating Tasks

    • Implement an input field (task-input) where tasks can be entered.
    • Add a button (add-task) to submit new tasks to a list.

  3. Displaying Tasks

    • Use a ul element (task-list) to display the tasks.
    • Utilize the v-for directive to loop through tasks and display each one as a li element in the list.

  4. Task Structure

    • Each task in the list should come with a checkbox (task-checkbox). Use this to mark tasks as complete.
    • Include a delete button (delete-button) on each task to allow for its removal.

  5. Task Management

    • Make use of Vue.js directives like v-for to dynamically display tasks from the list.
    • Use v-if or v-show to conditionally display elements based on certain criteria. For instance, you might want to show a message if there are no tasks in the list.
    • When a task is marked as complete (checkbox checked), the text of the task should be struck through.
    • Clicking the delete button should remove the task from the list.

  6. Vue.js Directives

    • For dynamic management of the task list, leverage Vue.js's built-in directives, particularly v-for for looping through the list of tasks, and v-if for conditional rendering.

  7. Final Notes

    • Remember, when updating the input field in Vue, the internal Vue state won't update just by setting the value using vanilla JavaScript. Ensure you're updating the Vue state correctly.
    • Be mindful of the Vue reactivity system. When you modify the data, Vue will automatically update the DOM. So, be sure to structure your data and methods in a way that takes advantage of this feature.

All set? Let's get started and build a dynamic to-do app with Vue.js!

Challenges Information

Challenge 1: Task Input

Create an input field where the user can type in new tasks. This input should have an id of task-input.

Challenge 2: Add Task Button

Implement a button with the id of add-task. When clicked, it should add the task typed into task-input to a list of tasks. Remember to handle Vue's internal state for the input, so when its value changes, it should be properly updated in Vue's state.

Challenge 3: Task List Display

Design a ul element with the id of task-list which will be responsible for displaying the list of tasks.

Challenge 4: Task Structure in List

Upon adding a task, it should appear in the task-list as a li element. This li element should have a checkbox to indicate if a task is completed. This checkbox must contain a class named task-checkbox.

Challenge 5: Delete Task Button

Each li task item should have its own button to delete that specific task. This button should have a class of delete-button.

Challenge 6: Marking a Task as Complete

When a task is marked as complete (by checking the checkbox), the text of the task should be struck through. This indicates that the task has been completed.

Challenge 7: Deleting a Task

Upon clicking the delete-button, the specific task should be removed from the task-list. Make sure that when a task is deleted, it disappears from the list.