Tutorial: How to Build a Simple To-Do List Web App

on


Step-by-step tutorial on how to build a simple application in English. This guide will focus on a basic To-Do List app using HTML, CSS, and JavaScript, which is ideal for beginners.

🎯 Tutorial: How to Build a Simple To-Do List Web App

🧰 Prerequisites

Before you start, you should have:

  • A basic understanding of HTML, CSS, and JavaScript

  • A text editor like VS Code

  • A browser (like Chrome)

📁 Step 1: Create Your Project Files

Create a new folder for your project. Inside the folder, create the following files:

  • index.html

  • style.css

  • script.js

📝 Step 2: Write the HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>To-Do List App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="app">
    <h1>To-Do List</h1>
    <div class="input-group">
      <input type="text" id="taskInput" placeholder="Enter a new task" />
      <button onclick="addTask()">Add</button>
    </div>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 Step 3: Add Some Style (style.css)

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.app {
  background: white;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

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

li {
  margin-bottom: 10px;
  padding: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
}

li.completed {
  text-decoration: line-through;
  color: gray;
}

⚙️ Step 4: Add Functionality (script.js)

function addTask() {
  const taskInput = document.getElementById("taskInput");
  const taskText = taskInput.value.trim();

  if (taskText === "") return;

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

  li.addEventListener("click", () => {
    li.classList.toggle("completed");
  });

  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.onclick = () => li.remove();

  li.appendChild(deleteBtn);
  document.getElementById("taskList").appendChild(li);
  taskInput.value = "";
}

✅ Step 5: Test Your App

Open the index.html file in your browser. Try adding tasks, clicking to mark them complete, and deleting them.

Comments

Post a Comment