Хочу сделать список дел (to-do) в браузере — какой минимальный проект для новичка?
Везде советуют новичкам сделать to-do список. Я знаю базовый HTML и чуть-чуть JS. Не понимаю, как сделать так, чтобы я писал задачу в поле, нажимал кнопку — и она появлялась в списке на странице. С чего начать, чтобы не утонуть?
2 ответа
Начни с самого скромного: добавление задачи в список. Сохранение, удаление, галочки — потом. Вот рабочая основа:
<input id="task">
<button onclick="add()">Добавить</button>
<ul id="list"></ul>
<script>
function add() {
const input = document.getElementById('task');
const text = input.value.trim();
if (text === '') return; // не добавляем пустое
const li = document.createElement('li');
li.textContent = text;
document.getElementById('list').appendChild(li);
input.value = ''; // чистим поле
}
</script>
Суть: берём текст из поля, создаём <li>, добавляем его в <ul>. Когда это заработает, добавляй по одной фиче:
- Удаление по клику на задачу.
- Зачёркивание сделанных.
- Сохранение в
localStorage, чтобы список не пропадал.
Каждая фича — отдельный маленький шаг. Так проект реально доводится до конца.
Совет: не лезь в localStorage сразу, это сбивает многих. Сначала добейся, чтобы задачи просто добавлялись и удалялись (пусть и пропадают при перезагрузке). Когда логика работает, прикрутить сохранение — дело пяти строк. А вот если начать с сохранения, легко запутаться и бросить.