Build a To-Do App using HTML, CSS & JavaScript ⚡

⚡ Build a To-Do App using HTML, CSS & JavaScript

Hello everyone 👋
Welcome back!

In this beginner-friendly project, we will create a simple To-Do App using HTML, CSS, and JavaScript 💻

This project helps you learn:

- DOM Manipulation
- Event Handling
- LocalStorage
- JavaScript Logic

Perfect for beginners 🚀

---

🌟 Features of To-Do App

✔ Add new tasks
✔ Mark tasks as completed
✔ Delete tasks
✔ Clean responsive design
✔ Data stored using LocalStorage

---

🧱 Step 1: HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>To-Do App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="todo-container">
    <h1>My To-Do List</h1>

    <div class="input-section">
        <input type="text" id="taskInput" placeholder="Enter your task...">
        <button id="addBtn">Add</button>
    </div>

    <ul id="taskList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>

---

🎨 Step 2: CSS Code

body {
    font-family: Arial;
    background: #f4f6f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.todo-container {
    background: white;
    padding: 25px;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.input-section {
    display: flex;
    gap: 10px;
}

input {
    flex: 1;
    padding: 10px;
}

button {
    padding: 10px 15px;
    background: green;
    color: white;
    border: none;
    cursor: pointer;
}

li {
    margin-top: 10px;
}

---

⚡ Step 3: JavaScript Code

let taskInput = document.getElementById("taskInput");
let addBtn = document.getElementById("addBtn");
let taskList = document.getElementById("taskList");

addBtn.addEventListener("click", addTask);

function addTask() {
    let task = taskInput.value;

    if(task === "") {
        alert("Please enter a task");
        return;
    }

    let li = document.createElement("li");
    li.textContent = task;

    li.addEventListener("click", function() {
        li.style.textDecoration = "line-through";
    });

    let deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";

    deleteBtn.addEventListener("click", function() {
        li.remove();
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);

    taskInput.value = "";
}

---

🎯 What You Will Learn

✅ DOM Manipulation
✅ JavaScript Events
✅ Dynamic Task Creation
✅ Beginner Project Logic

---

⭐ Tips

- Try changing colors 🎨
- Add dark mode 🌙
- Store tasks in LocalStorage 💾

---

📌 Conclusion

This was a simple To-Do App project using JavaScript.
A perfect beginner project to improve your coding skills 🚀

---

📢 Also Read

- JavaScript Interview Guide
- Calculator Project
- Python Programs

---

👉 Save and share this post 📌
👉 Follow for more coding projects 💻

Comments

Post a Comment

Popular posts from this blog

Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project)

Image
⚡ Build a Simple Calculator using HTML, CSS & JavaScript (Beginner Project) Hello everyone 👋 Welcome back! In this project, we will build a simple calculator using HTML, CSS, and JavaScript. This is perfect for beginners to understand logic and DOM manipulation 💻 --- 🌟 What You Will Learn - HTML structure - CSS styling - JavaScript logic - Event handling --- 🧱 Step 1: HTML Code <!DOCTYPE html> <html> <head>     <title>Calculator</title> </head> <body> <div class="calculator">     <input type="text" id="result" disabled>     <button onclick="clearResult()">C</button>     <button onclick="deleteLast()">DEL</button>     <button onclick="appendValue('/')">/</button>     <button onclick="appendValue('7')">7</button>     <button onclick="appendValue('8')">8</button>    ...
Read more

Top 10 Python Programs for Beginners (Easy + Practical Guide)

Image
 Top 10 Python Programs for Beginners (Easy + Practical Guide) Hello everyone 👋 Welcome back! Want to practice Python with real examples? These easy Python programs will help beginners understand coding step by step 💻 --- 🌟 Why Practice Programs? - Improves logic 🧠 - Helps in exams 📘 - Builds coding confidence 💻 --- 🔟 Top 10 Python Programs 1. Hello World print("Hello World") --- 2. Even or Odd num = int(input("Enter number: ")) if num % 2 == 0:     print("Even") else:     print("Odd") --- 3. Sum of Two Numbers a = int(input()) b = int(input()) print("Sum =", a + b) --- 4. Factorial num = 5 fact = 1 for i in range(1, num+1):     fact *= i print("Factorial =", fact) --- 5. Prime Number num = 7 for i in range(2, num):     if num % i == 0:         print("Not Prime")         break else:     print("Prime") --- 6. Multiplication Table num = 5 for i in range(1, 11):     print(num, "x...
Read more

JavaScript Notes for Beginners (Simple + Easy Guide) ⚡

Image
⚡ JavaScript Notes for Beginners (Simple + Easy Guide) Hello everyone 👋 Welcome back to my blog! In this post, you will learn JavaScript in a simple and easy way. These notes are perfect for beginners and BCA students for quick revision 📘 --- 🌐 What is JavaScript? JavaScript is a programming language used to make web pages interactive. 👉 It works with HTML and CSS to create dynamic websites. --- 🔢 Variables in JavaScript Variables are used to store data. let name = "Luna"; const age = 20; var city = "Delhi"; --- 📦 Data Types - String → "Hello" - Number → 10 - Boolean → true / false - Array → [1, 2, 3] - Object → {name: "Luna"} --- 🔁 Operators - Arithmetic → + - * / - Comparison → == === != - Logical → && || ! --- 🔄 Conditions let age = 18; if (age >= 18) {   console.log("Adult"); } else {   console.log("Minor"); } --- 🔁 Loops For Loop for (let i = 0; i < 5; i++) {   console.log(i); } While Loop let i = 0...
Read more