DEV Community

mitup 365
mitup 365

Posted on

How to Build a Simple To-Do App with HTML, CSS, and JavaScript (Beginner Friendly)

#webdev #html #css #javascript

👋 Introduction
Are you just starting your journey into web development and wondering how to put your HTML, CSS, and JavaScript skills into practice?

In this tutorial, we'll build a simple To-Do List App that allows users to:

Add tasks

Mark them as complete

Delete them

By the end of this project, you'll have a solid understanding of how to interact with the DOM, handle events, and write clean beginner-friendly JavaScript.

Let’s dive in! 🧠💻

🧱 Step 1: Setup Your HTML
Create a new index.html file and add the following code:

html
Copy
Edit
<!DOCTYPE html>



Simple To-Do App




My To-Do List



Add




    🎨 Step 2: Add Some CSS
    Create a style.css file and add basic styles:

    css
    Copy
    Edit
    body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    }

    .container {
    width: 300px;
    background: white;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    }

    input {
    width: 70%;
    padding: 8px;
    margin-right: 5px;
    }

    button {
    padding: 8px 12px;
    }

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

    li {
    background: #eee;
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    }

    li.completed {
    text-decoration: line-through;
    color: gray;
    }
    🧠 Step 3: Add JavaScript Logic
    Create a script.js file and paste this code:

    javascript
    Copy
    Edit
    const addBtn = document.getElementById('addTaskBtn');
    const taskInput = document.getElementById('taskInput');
    const taskList = document.getElementById('taskList');

    addBtn.addEventListener('click', () => {
    const taskText = taskInput.value.trim();
    if (taskText === "") return;

    const li = document.createElement('li');
    li.textContent = taskText;

    // Toggle complete on click
    li.addEventListener('click', () => {
    li.classList.toggle('completed');
    });

    // Right-click to delete
    li.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    li.remove();
    });

    taskList.appendChild(li);
    taskInput.value = '';
    });
    ✅ How It Works
    When the Add button is clicked:

    It reads the input value.

    Creates a new

  • element.

    Adds two event listeners:

    Click to mark complete (toggle class).

    Right-click to delete.

    🧪 Demo (Optional)
    You can host this on CodePen, JSFiddle, or GitHub Pages for live preview. Here's an example:

    👉 Live Demo on CodePen (replace with your own link)

    📌 Final Thoughts
    This simple app is great for beginners to:

    Learn DOM manipulation

    Understand event listeners

    Practice HTML/CSS structure

    You can improve it by:

    Adding task persistence using localStorage

    Adding due dates or priority

    Styling it with a CSS framework like Tailwind or Bootstrap

    • Top comments (0)