Кодик
Начать бесплатно

✅ Твой первый JavaScript-проект: создаём To-Do список с нуля

Хочешь почувствовать, как JavaScript оживляет страницу? Погнали делать свой первый интерактивный проект — простой, но крутой To-Do список.

JSРазработка

6 мин

Ты только начал свой путь в программировании? Обними себя и пристегни тапочки — будет весело 😄
🤖 В приложении Кодик мы учим писать код по-доброму: шаг за шагом, с проектами, подсказками и поддержкой.
А этот To-Do список — как раз один из первых проектов, который ты точно осилишь! 🚀

🚀 Почему To-Do список — идеальный первый проект?

To-Do список — это один из самых простых и популярных проектов, с которых начинают все, кто учится веб-разработке. Он тренирует важнейшие навыки:

  • работа с HTML-структурой (DOM),

  • взаимодействие с пользователем (события),

  • логика, условия и немного циклов,

  • и, главное — это весело и наглядно! 🎯

Что тебе понадобится?

  • HTML — чтобы задать структуру: поле ввода, кнопка, список задач.

  • CSS — для базового оформления (можно минимально).

  • JavaScript — для того, чтобы всё заработало: добавление, клики, действия.

📦 Шаг 1: Верстка (HTML)

Сначала мы создаём простую HTML-страницу, где будет:

  • поле для ввода новой задачи;

  • кнопка, чтобы добавить её в список;

  • пустой список, куда задачи будут появляться.

Это как пустой блокнот, в который ты будешь записывать задачи — только в браузере.

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

🎨 Шаг 2: Стили (CSS)

С помощью CSS ты можешь:

  • задать отступы и выравнивание;

  • сделать фон приятным;

  • скруглить углы элементов;

  • и просто сделать так, чтобы твоё приложение выглядело опрятно.

Это не обязательный шаг, но он помогает почувствовать, что ты делаешь настоящий продукт, а не просто набор кода.

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

🧠 Шаг 3: JavaScript — оживляем!

Вот тут начинается самое интересное 💡

Мы «научим» кнопку добавлять задачу:

  • Когда пользователь нажимает на кнопку, JavaScript берёт текст из поля ввода.

  • Создаёт новый элемент списка (li) и вставляет в него этот текст.

  • Добавляет этот элемент в список (ul) на странице.

Потом мы «научим» задачи реагировать на клик:

  • При клике задача будет зачеркиваться — так мы покажем, что она выполнена.

  • Дополнительно — при двойном клике можно её удалить.

Всё это делается с помощью обработчиков событий — специальных функций, которые реагируют на действия пользователя.

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 = "";
});

🧩 Мини-упражнение: добавь удаление задач

Попробуй доработать проект — добавь возможность удалять задачу двойным кликом:

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

Теперь твой To-Do список стал ещё удобнее 💥

Будем рады видеть тебя в приложении Кодика, где учиться программированию легче и быстрее.

А ещё у нас есть Telegram-сообщество, где можно задать вопросы, показать свой код и просто найти поддержку от таких же новичков и опытных разработчиков 👨‍💻👩‍💻

Программирование — это интересно, особенно когда рядом Кодик и друзья!

Комментарии