A Beginner's Guide to Building a Todo App with JavaScript, HTML, and CSS

A Beginner's Guide to Building a Todo App with JavaScript, HTML, and CSS

1. Introduction

In this tutorial, we'll walk you through the process of building a todo app using JavaScript, HTML, and CSS. A todo app is a simple yet powerful tool that can help you manage your daily tasks and improve your productivity. By the end of this tutorial, you'll have a fully functional todo app that you can use and customize to suit your needs.

2. Setting Up the HTML Structure

First, let's create the basic HTML structure for our todo app. We'll need a container for the app, an input field for adding new tasks, and an unordered list to display the tasks.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Todo App</title>
  7. <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10. <div class="todo-app">
  11. <h1>Todo App</h1>
  12. <input type="text" id="task-input" placeholder="Add a new task...">
  13. <ul id="task-list"></ul>
  14. </div>
  15. <script src="app.js"></script>
  16. </body>
  17. </html>

3. Adding Basic CSS Styles

Next, let's add some basic CSS styles to make our todo app look more appealing. Create a `styles.css` file and add the following styles:

  1. body {
  2. font-family: Arial, sans-serif;
  3. background-color: #f5f5f5;
  4. display: flex;
  5. justify-content: center;
  6. align-items: center;
  7. height: 100vh;
  8. margin: 0;
  9. }
  10.  
  11. .todo-app {
  12. background-color: white;
  13. padding: 2rem;
  14. border-radius: 5px;
  15. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  16. width: 400px;
  17. }
  18.  
  19. #task-input {
  20. width: 100%;
  21. padding: 0.5rem;
  22. border: 1px solid #ccc;
  23. border-radius: 3px;
  24. margin-bottom: 1rem;
  25. }
  26.  
  27. #task-list {
  28. list-style-type: none;
  29. padding: 0;
  30. margin: 0;
  31. }
  32.  
  33. #task-list li {
  34. background-color: #f5f5f5;
  35. padding: 0.5rem;
  36. border: 1px solid #ccc;
  37. border-radius: 3px;
  38. margin-bottom: 0.5rem;
  39. }

4. Adding Interactivity with JavaScript

Now that we have our HTML structure and CSS styles in place, let's add interactivity to our todo app using JavaScript. Create an app.js file and add the following code:

  1. const taskInput = document.getElementById('task-input');
  2. const taskList = document.getElementById('task-list');
  3.  
  4. taskInput.addEventListener('keyup', (event) => {
  5. if (event.key === 'Enter') {
  6. addTask();
  7. }
  8. });
  9.  
  10. function addTask() {
  11. const taskText = taskInput.value.trim();
  12.  
  13. if (taskText !== '') {
  14. const taskItem = document.createElement('li');
  15. taskItem.textContent = taskText;
  16.  
  17. taskList.appendChild(taskItem);
  18. taskInput.value = '';
  19.  
  20. taskItem.addEventListener('click', () => {
  21. taskItem.classList.toggle('completed');
  22. });
  23.  
  24. taskItem.addEventListener('dblclick', () => {
  25. taskList.removeChild(taskItem);
  26. });
  27. }
  28. }

In this code, we first get references to the `task-input` and `task-list` elements. We then add a `keyup` event listener to the `task-input` element to listen for the Enter key being pressed. If the `Enter` key is pressed, we call the `addTask` function.

The `addTask` function checks if the input value is not empty and creates a new `li` element with the `task` text. We then append the li element to the `task-list`. We also add two event listeners to the task item:

  1. A `click` event listener to toggle the `completed` CSS class, which we'll create in the next step. This will allow users to mark tasks as completed by clicking on them.
  2. A `dblclick` event listener to remove the task from the list when double-clicked.

5. Adding Task Completion Styles

Finally, let's add a style for completed tasks. Update your styles.css file to include the following style:

  1. .completed {
  2. text-decoration: line-through;
  3. color: #ccc;
  4. }

With this style, completed tasks will have a line-through effect and a lighter text color.

6. Conclusion

Congratulations! You've successfully built a todo app using JavaScript, HTML, and CSS. This simple yet powerful app will help you manage your daily tasks and improve your productivity. You can further customize this app by adding features like task persistence using localStorage, task priorities, or even integrating it with a backend to store your tasks in the cloud.

This tutorial serves as a starting point for your journey into web development, and as you gain more experience, you'll discover even more ways to enhance and optimize your projects. Keep learning, experimenting, and building!

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More