In this tutorial, we’ll walk through building a simple Todo App using HTML, CSS, and JavaScript. This app will allow you to add items to a list and delete them. Follow the steps below to create your own Todo App.
Step 1: Set Up the HTML Structure
First, let’s create the HTML file that will serve as the structure of our Todo App. Create a file named todo.html
and add the following code:
<!DOCTYPE html> <html> <head> <title>Todo App</title> <link rel="stylesheet" href="todo.css"> </head> <body> <h1>Todo App</h1> <input type="text" id="todo-input" placeholder="Add new todo"> <button id="add-btn">Add</button> <ul id="todo-list"></ul> <h2>Made with ❤️ by Pratiyush</h2> <script src="todo.js"></script> </body> </html>
Explanation:
<!DOCTYPE html>
: Declares the document type and version of HTML.<html>
: The root element of the HTML document.<head>
: Contains meta-information about the document, such as the title and linked CSS file.<title>
: Sets the title of the webpage.<link rel="stylesheet" href="todo.css">
: Links the external CSS file to style the HTML elements.<body>
: Contains the content of the document visible to the user.<h1>
: Defines the main heading of the page.<input type="text" id="todo-input" placeholder="Add new todo">
: An input field where users can type their todos.<button id="add-btn">Add</button>
: A button to add the typed todo to the list.<ul id="todo-list"></ul>
: An unordered list that will hold the todo items.<h2>Made with ❤️ by Pratiyush</h2>
: A footer message.<script src="todo.js"></script>
: Links the external JavaScript file that will add functionality to the app.
Step 2: Style Your App with CSS
Next, we’ll style our Todo App. Create a file named todo.css
and add the following code:
h1{ display: flex; text-align: center; justify-content: center; font-size: 60px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body{ background-color: #a1ffff; } #todo-input { width: 500px; height: 30px; font-size: 18px; margin-left: auto; margin-right: auto; display: flex; text-align: center; justify-content: center; border: none; border-radius: 10px; } h2{ display: flex; justify-content: center; align-items: center; margin-top: 30px; font-size: 20px; letter-spacing: 2px; color: #4e4e4e; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .del-button{ border-radius: 40%; background-color: #001e56; color: rgb(255, 255, 87); margin-left: 15px; border: none; height: 30px; width: 30px; font-size: large; font-weight: bold; } #add-btn { width: 100px; height: 30px; margin-left: auto; margin-right: auto; margin-top: 20px; background-color: #4CAF50; border-radius: 10px; font-size: large; font-weight: bold; color: #fff; border: none; cursor: pointer; display: flex; text-align: center; justify-content: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } #todo-list { list-style: none; padding: 0; margin: 0; font-size: 27px; font-weight: bold; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .todo-item { padding: 10px; border-bottom: 1px solid #97b1b6; }
Explanation:
h1
: Styles the main heading with center alignment, font size, and font family.body
: Sets the background color of the page.#todo-input
: Styles the input field with width, height, font size, margins, border, and border-radius.h2
: Styles the footer message with center alignment, font size, letter spacing, color, and font family..del-button
: Styles the delete button with border-radius, background color, text color, margins, border, height, width, font size, and font weight.#add-btn
: Styles the add button with width, height, margins, background color, border-radius, font size, font weight, text color, border, cursor, and font family.#todo-list
: Styles the unordered list with no list-style, padding, margin, font size, font weight, and font family..todo-item
: Styles each todo item with padding and a bottom border.
Step 3: Add Functionality with JavaScript
Now, let’s add the functionality to our Todo App. Create a file named todo.js
and add the following code:
const todoInput = document.getElementById('todo-input'); const addBtn = document.getElementById('add-btn'); const todoList = document.getElementById('todo-list'); addBtn.addEventListener('click', addTodo); function addTodo() { const todoText = todoInput.value; const todoItem = document.createElement('li'); todoItem.textContent = todoText; todoItem.classList.add('todo-item'); const deleteBtn = document.createElement('button'); deleteBtn.classList.add('del-button'); deleteBtn.textContent = 'X'; deleteBtn.onclick = () => { todoItem.remove(); }; todoItem.appendChild(deleteBtn); todoList.appendChild(todoItem); todoInput.value = ''; }
Explanation:
const todoInput = document.getElementById('todo-input');
: Selects the input field element.const addBtn = document.getElementById('add-btn');
: Selects the add button element.const todoList = document.getElementById('todo-list');
: Selects the unordered list element.addBtn.addEventListener('click', addTodo);
: Adds a click event listener to the add button, triggering theaddTodo
function when clicked.function addTodo()
: Defines the function that adds a new todo item to the list.const todoText = todoInput.value;
: Gets the value (text) from the input field.const todoItem = document.createElement('li');
: Creates a new list item element.todoItem.textContent = todoText;
: Sets the text content of the list item to the value from the input field.todoItem.classList.add('todo-item');
: Adds the classtodo-item
to the list item for styling.const deleteBtn = document.createElement('button');
: Creates a new button element for deleting the todo item.deleteBtn.classList.add('del-button');
: Adds the classdel-button
to the delete button for styling.deleteBtn.textContent = 'X';
: Sets the text content of the delete button to ‘X’.deleteBtn.onclick = () => { todoItem.remove(); };
: Adds an onclick event to the delete button that removes the todo item from the list when clicked.todoItem.appendChild(deleteBtn);
: Appends the delete button to the list item.todoList.appendChild(todoItem);
: Appends the list item to the unordered list.todoInput.value = '';
: Clears the input field after adding the todo item.
Conclusion
Congratulations! You’ve successfully created a simple Todo App using HTML, CSS, and JavaScript. This app allows you to add items to a list and delete them with ease. Feel free to customize the app further and add more features as you like.
Thank you for following along, and happy coding!
Output