✅ Your first JavaScript project: creating a To-Do list from scratch

Have you just started your journey in programming? Hug yourself and fasten your slippers — it will be fun 😄
🤖 In application Code we teach you how to write code in a friendly way: step by step, with projects, tips and support.
And this To-Do list is just one of the first projects that you will definitely master! 🚀

🚀 Why is a To-Do list the perfect first project?

To-Do list is one of the simplest and most popular projects that everyone who learns web development starts with. It trains the most important skills:

• working with the HTML structure (DOM),

• interaction with the user (events),

• logic, conditions and a few loops,

• and, most importantly, it's fun and visual! 🎯

What do you need?

• HTML — to set the structure: input field, button, task list.

• CSS - for basic design (can be minimal).

• JavaScript — to make everything work: adding, clicks, actions.

📦 Step 1: Layout (HTML)

First, we create a simple HTML page where there will be:

• field for entering a new task;

• button to add it to the list;

• an empty list where tasks will appear.

It's like a blank notebook in which you will write down tasks — only in the browser.

<div class="todo-container">
  <h1>Мои задачи</h1>
  <input id="taskInput" type="text" placeholder="New task..." />
  <button id="addBtn">Добавить</button>
  <ul id="taskList"></ul>
</div>

🎨 Step 2: Styles (CSS)

With CSS you can:

• set indents and alignment;

• make the background pleasant;

• round the corners of the elements;

• and just make your app look neat.

This is not a mandatory step, but it helps you feel what you are doing this product, not just a set of code.

.todo-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
}

🧠 Step 3: JavaScript — bring it to life!

This is where the fun begins 💡

We will "teach" the button to add a task:

• When the user clicks the button, JavaScript takes the text from the input field.

• Creates a new list item (li) and inserts this text into it.

• Adds this item to the list (ul) on the page.

Then we will "teach" the tasks to respond to a click:

• When clicked, the task will be crossed out — this is how we will show that it is completed.

• Additionally, you can delete it by double-clicking.

All this is done with the help of event handlers — special functions that respond to user actions.

const addBtn = document.getElementById("addBtn");
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;

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

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

🧩 Mini-exercise: add task deletion

Try to finalize the project - add the option delete task double-click:

li.addEventListener("dblclick", () => {
  li.remove();
});

Now your To-Do list is even more convenient 💥

We will be glad to see you in the application Codica, where learning programming is easier and faster.

And we also have Telegram community, where you can ask questions, show your code and just find support from the same beginners and experienced developers 👨‍💻👩‍💻

Programming is interesting, especially when you are near Code and friends!