DEV Community

Cover image for Building a Simple To-Do List App with JavaScript
Muhammad Atif Latif
Muhammad Atif Latif Subscriber

Posted on

Building a Simple To-Do List App with JavaScript

#todayilearned #java #javascript #javascriptlibraries

In this post, we’ll create a simple To-Do List application using JavaScript. This app will allow users to add, remove, and mark tasks as complete.

Features of the To-Do List App

  • Add new tasks
  • Remove tasks
  • Mark tasks as complete

Setting Up Your Project

  1. Create a new directory: 
 mkdir todo-app cd todo-app
Enter fullscreen mode Exit fullscreen mode
  1. Create an index.html file and add the basic structure: 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do List</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>To-Do List</h1> <input type="text" id="taskInput" placeholder="Add a new task..."> <button id="addTaskButton">Add Task</button> <ul id="taskList"></ul> </div> <script src="script.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Adding Styles

  1. Create a styles.css file to style your app: 
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } input[type="text"] { width: 70%; padding: 10px; margin-right: 10px; } button { padding: 10px; } ul { list-style: none; padding: 0; } li { padding: 10px; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; }
Enter fullscreen mode Exit fullscreen mode

Adding Functionality with JavaScript

  1. Create a script.js file to add functionality: 
document.getElementById('addTaskButton').addEventListener('click', addTask); function addTask() { const taskInput = document.getElementById('taskInput'); const taskValue = taskInput.value.trim(); if (taskValue) { const taskList = document.getElementById('taskList'); const li = document.createElement('li'); li.textContent = taskValue; const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.onclick = () => { taskList.removeChild(li); }; li.appendChild(removeButton); taskList.appendChild(li); taskInput.value = ''; } }
Enter fullscreen mode Exit fullscreen mode

Conclusion

You’ve now built a simple To-Do List app using HTML, CSS, and JavaScript. This project can be expanded further by adding features like task persistence using local storage, editing tasks, or adding a filter for completed tasks.

Feel free to share your thoughts or improvements in the comments below!

Top comments (0)