Home
CSS
HTML

How to create a To-Do List in HTML, CSS and JavaScript

To-Do List | Coding Zemigle

In this tutorial, we’re going to build a simple yet functional To-Do List application using HTML, CSS, and JavaScript. Whether you're new to web development or looking to sharpen your skills, this project is a great way to learn the basics of front-end development.

Throughout this tutorial, we’ll cover the core concepts of HTML for structuring the page, CSS for styling it, and JavaScript for making it interactive. By the end of this guide, you'll have a fully functional To-Do List that you can customize and expand upon, making it a perfect addition to your portfolio or personal projects.

Step 01: Setting up the To-Do List's HTML structure

Start by creating a new folder on your computer where all the files for this project will be stored. You can name this folder something descriptive like todo-list.


Inside the todo-list folder, create three files:
  • index.html: This file will contain the HTML structure of our To-Do List.
  • styles.css: This file will handle the styling of our application.
  • script.js: This file will contain the JavaScript code that makes our To-Do List interactive.
Open the index.html file in your code editor and set up a basic HTML structure. Make sure to link the CSS and JavaScript files to the HTML document.

✲    index.html
<!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 | Coding Zemigle</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="todo-container">
        <div class="input-container">
            <input type="text" id="todo-input" placeholder="Enter a new task..." required>
            <button id="add-btn"><i class="fas fa-plus"></i></button>
        </div>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>



With the HTML structure in place, our next step will be to style the To-Do List using CSS, making it visually appealing and easy to use.


Now that we have the HTML structure of our To-Do List in place, it's time to make it visually appealing with CSS. We'll focus on creating a clean and modern design that enhances the user experience.

Step 02: Styling the To-Do List with CSS

Now, open the style.css file in your code editor and set up a basic CSS style. Make sure to link the CSS file to the HTML file.

✲    style.css
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #14281D;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.todo-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.input-container {
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #58585E;
}

#todo-input {
    flex: 1;
    padding: 15px;
    border: none;
    font-weight: 500;
    outline: none;
    font-size: 15px;
}

#add-btn {
    padding: 10px 20px;
    background-image: linear-gradient(to left top, #977DFE,  #6878FF);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
}

#add-btn:hover {
    background-color: #218838;
}

ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

li {
    padding: 12px;
    background-image: linear-gradient(to left top, #977DFE,  #6878FF);
    color: #fff;
    border-radius: 5px;
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    transition: background 0.3s;
}

li.completed {
    text-decoration: line-through;
    background: linear-gradient(135deg, #f5576c, #f093fb);
}

li:hover {
    background: linear-gradient(135deg, #f5576c, #f093fb);
}

.complete-btn, .delete-btn {
    background-color: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
    transition: color 0.3s;
}

.complete-btn:hover, .delete-btn:hover {
    color: #333;
}



With this CSS in place, your To-Do List will have a clean, modern design that is easy to use. Next, we’ll move on to adding interactivity with JavaScript.

With the HTML structure and CSS styling complete, it’s time to bring the To-Do List to life by adding interactivity with JavaScript. We’ll implement functionality to add tasks, mark them as completed, and delete them.


Step 03: Adding Interactivity with JavaScript

First, we need to access the elements in our HTML that we’ll be interacting with in JavaScript. Next, we'll add functionality to create a new task when the user clicks the "Add Task" button. Each task should have options to mark it as completed and to delete it. We’ll add buttons for these actions and define their behaviors.

✲    script.js
// Get elements
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

// Load saved tasks from local storage
document.addEventListener('DOMContentLoaded', loadTasks);

// Add a new task
addBtn.addEventListener('click', addTask);
todoInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});

function addTask() {
    const taskText = todoInput.value.trim();
    if (taskText === '') return;

    const taskItem = createTaskItem(taskText);
    todoList.appendChild(taskItem);
    saveTasks();
    todoInput.value = '';
}

// Create a task item
function createTaskItem(taskText, completed = false) {
    const li = document.createElement('li');
    li.textContent = taskText;
    if (completed) li.classList.add('completed');

    const completeBtn = document.createElement('button');
    completeBtn.innerHTML = '<i class="fas fa-check"></i>';
    completeBtn.classList.add('complete-btn');
    completeBtn.addEventListener('click', () => {
        li.classList.toggle('completed');
        saveTasks();
    });

    const deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
    deleteBtn.classList.add('delete-btn');
    deleteBtn.addEventListener('click', () => {
        li.remove();
        saveTasks();
    });

    li.appendChild(completeBtn);
    li.appendChild(deleteBtn);

    return li;
}

// Save tasks to local storage
function saveTasks() {
    const tasks = [];
    document.querySelectorAll('li').forEach(li => {
        tasks.push({
            text: li.firstChild.textContent,
            completed: li.classList.contains('completed')
        });
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Load tasks from local storage
function loadTasks() {
    const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    savedTasks.forEach(task => {
        const taskItem = createTaskItem(task.text, task.completed);
        todoList.appendChild(taskItem);
    });
}



With this JavaScript code, your To-Do List application is now interactive, allowing users to add, complete, delete, and even save tasks across sessions. This completes our To-Do List project using HTML, CSS, and JavaScript.

Conclusion

You've successfully built a fully functional and visually appealing To-Do List application using HTML, CSS, and JavaScript. This project covered essential web development skills, including structuring content with HTML, styling elements with CSS, and adding interactivity with JavaScript.

This project serves as a great starting point for understanding the integration of HTML, CSS, and JavaScript in creating dynamic web applications. You can further enhance this project by adding more features, such as task editing, due dates, or categorization. The skills you’ve gained here will also be valuable as you tackle more complex projects in the future.

Keep experimenting, keep coding, and continue building your portfolio with exciting and challenging projects. Happy coding!