Todo List Using Javascript

Todo List Using Javascript

Build a simple todo list application with add, edit, delete functionalities

ยท

3 min read

Introduction to Day-16 Todo List Project

In this project, we will embark on creating a simple yet functional todo list application. This task will involve building an application that allows users to add, edit, and delete tasks seamlessly.

Setting Up the Project Environment

Before diving into the development process, ensure you have the necessary tools in place. You will need a code editor, a web browser, and basic knowledge of HTML, CSS, and JavaScript.

Creating the Basic Structure

Start by setting up the basic structure of the todo list application. Create the HTML layout and style it using CSS to provide a visually appealing interface.

  <h1>Todo List</h1>
    <input type="text" id="new-todo" placeholder="Add a new todo" />
    <button id="add-todo">Add</button>
    <ul id="todo-list"></ul>

CSS:

body {
        font-family: sans-serif;
        width: 300px;
        margin: 0 auto;
        padding: 20px;
      }
      #todo-list {
        list-style: none;
        padding: 0;
      }
      #todo-list li {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        background-color: #f5f5f5;
      }
      #new-todo {
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        width: 100%;
        margin-bottom: 10px;
      }
      #add-todo {
        padding: 10px 20px;
        background-color: #4caf50; /* Green */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      button[type="button"] {
        padding: 5px 10px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
      }
      button[type="button"]:hover {
        background-color: #ddd;
      }

Implementing Add Functionality

The core functionality of any todo list is the ability to add tasks. Write JavaScript code that enables users to input tasks and add them to the list dynamically.

 const todoList = document.getElementById("todo-list");
      const newTodoInput = document.getElementById("new-todo");
      const addTodoButton = document.getElementById("add-todo");

      let todos = [];

      function addTodo(text) {
        const todo = {
          id: Date.now(),
          text,
          completed: false,
        };
        todos.push(todo);
        renderTodos();
      }

Adding Edit Feature

Enhance the user experience by implementing an edit feature. Allow users to modify existing tasks directly within the application.

  function editTodo(id) {
        const todoToEdit = todos.find((todo) => todo.id === id);
        const newText = prompt("Enter new todo text:", todoToEdit.text);
        if (newText) {
          todoToEdit.text = newText;
          renderTodos();
        }
      }

Enabling Delete Functionality

To complete the essential functionalities, incorporate a delete feature. Users should be able to remove tasks they no longer need with ease.


      function deleteTodo(id) {
        todos = todos.filter((todo) => todo.id !== id);
        renderTodos();
      }

Output:

Click Here to view in Codepen

Conclusion

In conclusion, building a todo list application is a great way to practice your web development skills. By following this guide, you have learned how to create a simple yet effective todo list with essential features.

FAQs

  1. Can I customize the design of the todo list application?

    • Yes, you can customize the design by modifying the CSS styles to suit your preferences. Feel free to experiment with colors, fonts, and layout to create a personalized look.
  2. Is it possible to integrate this todo list with a database for persistent storage?

    • Yes, you can enhance the functionality of the todo list by integrating it with a database like MySQL or Firebase for persistent storage. This will allow users to save their tasks even after closing the application.
  3. How can I expand this project to include more advanced features?

    • To add more advanced features, consider implementing features like task prioritization, due dates, categories, or user authentication. You can also explore incorporating drag-and-drop functionality for task management.
  4. Are there any recommended resources for further learning about web development?

    • There are numerous online resources available for learning web development, including tutorials on platforms like Codecademy, freeCodeCamp, and W3Schools. Additionally, books like "Eloquent JavaScript" and "HTML and CSS: Design and Build Websites" are great for beginners.
  5. What are the benefits of creating a todo list application for learning web development?

    • Building a todo list application is a practical way to apply your web development skills in a real-world project. It helps you understand concepts like DOM manipulation, event handling, and data management while creating a useful tool for personal organization.
ย