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

mitup 365 — Sat, 02 Aug 2025 14:03:10 +0000

👋 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

DEV Community: mitup 365

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

My To-Do List