Create a Simple To-Do List Using HTML, CSS & JavaScript

March 3, 20261 minute read

mustaf hersi farah

mustaf hersi farah

Instructor

Create a Simple To-Do List Using HTML, CSS & JavaScript

A small to-do list app.

🧱 HTML

<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add Task</button>

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

⚡ JavaScript

function addTask() {
  let input = document.getElementById("taskInput");
  let taskText = input.value;

  if (taskText === "") return;

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

  document.getElementById("taskList").appendChild(li);

  input.value = "";
}

© 2026 Softcamper. All rights reserved.