👋 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
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
SOCIAL SHARE CARD GENERATOR