https://blogger.googleusercontent.com/img/a/AVvXsEjaZb96U7aYoS2KkqGx423DM2xD0scoris9m_MrK7zxQlygV1TmvT5_izaHlAWWF-r1YFa7qTPpuPbKiwLipwp81Y479sqZOhOp7bqxssixZenIldUeAvwq4gmaGhQj8OXiGXtD_TroKJMmIX0tqT6T5NLWa0exKzLYA-qX9Y5QExOpvLGoQlcx_9fQbmA=s16000/
Published: Aug 29, 2024



I’ve always been someone who loves organization. Whether it’s planning out my day, managing a project, or even making sure I don’t forget to water my plants, so I figured a to-do list would be a great starter project for development. Honestly, even if you don't need a to-do list making one is such a good piece of experience in web development. You learn so many different topics while building it.
Today, I am sharing with you how I built a basic to-do list in plain HTML, CSS, and JavaScript, so you can do the same. Don’t worry if you’re new to web development—this is a great beginner project that’ll give you a solid foundation in HTML, CSS, and a bit of JavaScript.

Why Build Your Own To-Do List?

There are tons of to-do list apps out there, but building your own comes with some great benefits:

Customization: You can make it completely yours (the functionality, ownership, and of course the styling!)
Learning Experience: It’s a great way to learn the basics of web development.
Control: No ads, no tracking—just a simple, functional app that does what you need it to do.

The Complete Code

You can find the repository with all of the finished code on my GitHub. I kept it pretty basic so you should have no issue looking through the folder. You can also view and try the project in a sandbox mode here.

If you want to, you can download it and compare it to yours if you have any errors that you can't troubleshoot.

Getting Started: The Basics

Let’s start with the basic structure of our to-do list. At the core, all we need is a simple HTML file. Here’s the foundation:

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My To-Do List</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Enter a new task...">
    <button onclick="addTask()">Add Task</button>
    
    <ul id="taskList"></ul>
    
    <script>
        function addTask() {
            let taskInput = document.getElementById('taskInput');
            let task = taskInput.value;

            if (task) {
                let li = document.createElement('li');
                li.textContent = task;
                document.getElementById('taskList').appendChild(li);
                taskInput.value = '';
            } else {
                alert('Please enter a task.');
            }
        }
    </script>
</body>
</html>

Breaking Down the Code

The HTML

<input>
 and 
<button>
: This is where we (the users) can enter and submit a task to be completed.
<ul id="taskList">
 This unordered list is where our tasks will appear once we create them.

The JavaScript

addTask()
: This function is one of the parts at the center of our to-do list. When the button is clicked, this function grabs the text from the input field, creates a new list item (<li>), and appends it to our task list.

The Result

If you paste this code into an HTML file and open it in your browser, you’ll see a simple, yet fully functional, to-do list! You can type in a task, click “Add Task,” and see it appear on the page.

Your list should look like this:

To-Do 1



Adding Some Style with CSS

Right now, our to-do list works, but it looks really plain. Let’s add some basic CSS to give it some personality:

    
<style>
    body {
        font-family: Arial, sans-serif;
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
    }

    h1 {
        text-align: center;
        color: #333;
    }

    input {
        width: calc(100% - 22px);
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    button {
        width: 100%;
        padding: 10px;
        background-color: #2b0ecf;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #1c028f;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
</style>
This simple CSS makes the to-do list much more pleasant to use, and it’s a good introduction to styling your own web pages. Your list should look like below:



Removing Tasks

So now our project creates the to-do items, but how can we delete them once they are complete? Let's dive into that right now!

Let's modify our 
addTask()
 function by adding an event listener. I'll explain what this does shortly:

    
<script>
 function addTask() {
            let taskInput = document.getElementById('taskInput');
            let task = taskInput.value;
            if (task) {
            let li = document.createElement('li');
            li.textContent = task;
                 li.addEventListener('click', function () {
                     this.parentNode.removeChild(this);
                 });
            document.getElementById('taskList').appendChild(li);
            taskInput.value = '';
            } else {
                alert('Please enter a task.');
                }
            }
</script>
Let's break down what we added:

li.addEventListener
: This adds an event listener to the the li we create. An event listener function waits for... wait for it... an event! The event here is set when we add 'click' to specify that we are waiting for a click event to happen within this element that is created.
this.parentNode.removeChild(this)
: this method (think of it as a function for classes) means that this (literally this, the one that was created) will remove itself from the parent element (which is the list itself) once the event listener runs.
Now, only really one thing left to do, lets add a small piece of CSS in to make it have a pointer. Update your CSS with the following code:

    li:hover {
            
        background-color: #d1d1d1;
            
        cursor: pointer;
            
    }
            
</style>

Now your list should behave like the one below:


It will give you a proper pointer cursor and highlight the list item you are on. This makes it easier to know which one you are deleting, and gives it a more interactive experience!

Congratulations! You just finished your first to-do list! It is one of the staples in a web developer's journey.

Reflecting on the Experience

Building this to-do list was more than just a fun exercise; it was a chance to understand the power of web development. It feels great to build something yourself and understand what is going on. I think we can do so much more with this project, so try making alterations and improve this list to build your knowledge even more!

I encourage you to try it out, even if you’re a complete beginner. There’s something incredibly satisfying about seeing your code come to life and actually serve a purpose. Plus, it’s a great stepping stone to more complex projects.

What’s Next?

Once you’ve built this basic to-do list, you might want to explore more advanced features. For example:

Adding checkboxes to mark tasks as complete.
Implementing local storage so your tasks don’t disappear when you refresh the page.
Incorporate multiple files to make managing your code easier.
The possibilities are endless, and each new feature is an opportunity for you to learn and grow as a developer.

Author:

Chase Quinn

Chase Quinn