Zbuduj prostą aplikację to‑do krok po kroku (prostym językiem)

Co zbudujemy (i czego się nauczysz)

Gdy w tym przewodniku mówię „aplikacja”, mam na myśli małą aplikację webową: jedną stronę, którą otwierasz w przeglądarce, reagującą na kliknięcia i wpisywanie. Bez instalacji, kont i ciężkiej konfiguracji — po prostu prosty projekt, który możesz uruchomić lokalnie.

Cel (co zrobi gotowa aplikacja)

Na końcu będziesz mieć aplikację to‑do, która potrafi:

• Dodawać zadania z pola tekstowego
• Oznaczać zadania jako zrobione (żeby widzieć, co jest skończone)
• Usuwać zadania, których już nie potrzebujesz
• Zachowywać zadania po odświeżeniu przy użyciu localStorage (żeby zamknięcie karty nie kasowało wszystkiego)

Nie będzie to rozwiązanie idealne ani „enterprise‑grade” — i o to chodzi. To projekt dla początkujących, zaprojektowany tak, żeby uczyć podstaw bez wrzucania na raz wielu narzędzi.

Czego się nauczysz (prostym językiem)

Zbudujesz aplikację krok po kroku i poznasz podstawowe elementy działania aplikacji frontendowych:

• HTML do tworzenia struktury strony (pole, przycisk, lista)
• CSS by uczynić ją czytelną i przyjemną w obsłudze
• JavaScript do obsługi kliknięć, tworzenia elementów listy i aktualizacji strony
• localStorage do zapisywania i ładowania zadań, żeby zostały
• Podstawowe testowanie i debugowanie (wyłapywanie drobnych błędów i ich naprawa)

Co potrzebujesz zanim zaczniemy

Prosto. Potrzebujesz tylko:

• Komputera (Windows, Mac lub Linux)
• Nowoczesnej przeglądarki (Chrome, Firefox, Safari lub Edge)
• Edytora kodu (VS Code jest popularny, ale dowolny edytor działa)

Jeśli potrafisz utworzyć folder i edytować kilka plików, jesteś gotowy.

Krok 1: Zdecyduj cel aplikacji i funkcje

Zanim napiszesz kod, zdecyduj, jak wygląd sukcesu. W tym samouczku budujemy jedną małą aplikację o jasnym zadaniu: pomaga śledzić zadania, które chcesz wykonać.

Wybierz jedno zadanie aplikacji

Napisz jedno zdanie‑cel, które będziesz mieć przed sobą podczas budowy:

„Ta aplikacja pozwala mi dodawać zadania do listy, żeby ich nie zapomnieć.”

To wszystko. Jeśli poczujesz pokusę dodawać kalendarze, przypomnienia, tagi czy konta — odłóż to na później.

Co jest konieczne, a co miłe do mieć

Zrób dwie krótkie listy:

Konieczne (na ten projekt):

• Dodawanie zadania (wpisać tekst, kliknąć przycisk)
• Widok zadań w liście
• Oznaczanie zadania jako zrobione
• Usuwanie zadania
• Zachowanie zadań po odświeżeniu (użyjemy localStorage później)

Miłe do mieć (nie dziś): terminy, priorytety, kategorie, wyszukiwanie, drag-and-drop, synchronizacja w chmurze.

Utrzymanie listy „koniecznych” małych pomaga naprawdę skończyć projekt.

Opisz ekran prostymi słowami

Aplikacja może mieć jedną stronę z:

• Jednym polem tekstowym („Dodaj zadanie…”) i przyciskiem „Dodaj”
• Listą zadań poniżej
• Każde zadanie ma przełącznik „zrobione” i przycisk „usuń”

Zdefiniuj, co znaczy „zrobione”

Bądź konkretny, żeby nie utknąć:

• „Zrobione” = zadanie wygląda na przekreślone (lub wyblakłe) i pozostaje na liście do momentu usunięcia.

Gdy to ustalisz, możesz przygotować pliki projektu.

Krok 2: Przygotuj pliki projektu

Zanim napiszemy kod, stwórzmy porządek. Trzymanie plików od początku w schludzie ułatwia kolejne kroki.

1) Utwórz folder projektu

Stwórz nowy folder na komputerze i nazwij go np. todo-app. W tym folderze będą wszystkie pliki projektu.

W środku utwórz trzy pliki:

• index.html (struktura strony)
• styles.css (wygląd i układ)
• app.js (zachowanie i interaktywność)

Jeśli system ukrywa rozszerzenia plików, upewnij się, że tworzysz prawdziwe pliki — częstym błędem początkujących jest index.html.txt.

2) Otwórz folder w edytorze i w przeglądarce

Otwórz folder todo-app w edytorze (VS Code, Sublime Text itp.). Następnie otwórz index.html w przeglądarce.

Na tym etapie strona może być pusta — i to w porządku. Dodamy zawartość w następnym kroku.

3) Jak zobaczysz zmiany

Po edycji plików przeglądarka nie odświeży się automatycznie (chyba że używasz narzędzia, które to robi).

Podstawowy cykl to:

1. Zapisz plik w edytorze
2. Przejdź do karty przeglądarki
3. Odśwież stronę, by zobaczyć zmianę

Jeśli coś „nie działa”, odświeżenie to pierwszy krok.

Opcjonalnie: prosty lokalny serwer (warto, ale nie wymagany)

Możesz otwierać index.html dwuklikiem, ale lokalny serwer zapobiega dziwnym problemom (szczególnie gdy zaczniesz zapisywać dane lub ładować pliki).

Proste opcje dla początkujących:

• Wejdź do VS Code, zainstaluj Live Server i kliknij „Go Live”
• Jeśli masz zainstalowanego Pythona, uruchom w folderze:

python -m http.server

Następnie otwórz adres, który zostanie wyświetlony (często http://localhost:8000) w przeglądarce.

Krok 3: Zbuduj strukturę strony (HTML)

Teraz stworzymy szkielet aplikacji. Ten HTML nie sprawi, że aplikacja będzie interaktywna (to zadanie JavaScriptu), ale da mu jasne miejsca do odczytu i zapisu.

Minimalny układ, którego potrzebujemy

Powinien zawierać:

• Tytuł, żeby strona była czytelna na pierwszy rzut oka
• Pole tekstowe na treść zadania
• Przycisk Dodaj, by dodać zadanie
• Obszar listy, gdzie pojawią się zadania

Proste, czytelne nazwy i dobre id/klasy ułatwią później pracę JavaScriptowi.

Wklej to do index.html

\u003c!doctype html\u003e
\u003chtml lang=\"en\"\u003e
  \u003chead\u003e
    \u003cmeta charset=\"utf-8\" /\u003e
    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e
    \u003ctitle\u003eTo‑Do App\u003c/title\u003e
    \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e
  \u003c/head\u003e
  \u003cbody\u003e
    \u003cmain class=\"app\" id=\"app\"\u003e
      \u003ch1 class=\"app__title\" id=\"appTitle\"\u003eMy To‑Do List\u003c/h1\u003e

      \u003cform class=\"task-form\" id=\"taskForm\"\u003e
        \u003clabel class=\"task-form__label\" for=\"taskInput\"\u003eNew task\u003c/label\u003e
        \u003cdiv class=\"task-form__row\"\u003e
          \u003cinput
            id=\"taskInput\"
            class=\"task-form__input\"
            type=\"text\"
            placeholder=\"e.g., Buy milk\"
            autocomplete=\"off\"
          /\u003e
          \u003cbutton id=\"addButton\" class=\"task-form__button\" type=\"submit\"\u003e
            Add
          \u003c/button\u003e
        \u003c/div\u003e
      \u003c/form\u003e

      \u003cul class=\"task-list\" id=\"taskList\" aria-label=\"Task list\"\u003e\u003c/ul\u003e
    \u003c/main\u003e

    \u003cscript src=\"app.js\"\u003e\u003c/script\u003e
  \u003c/body\u003e
\u003c/html\u003e

To wszystko jeśli chodzi o strukturę. Zauważ, że użyliśmy id="taskInput" i id="taskList" — to te elementy, z którymi najczęściej będzie rozmawiał JavaScript.

Krok 4: Uczyń to ładnym (CSS)

Strona działa, ale prawdopodobnie wygląda jak zwykły dokument. Trochę CSS sprawi, że będzie czytelniej: odstępy, rozmiar tekstu i przyciski, które zachęcają do kliknięcia.

Zacznij od prostego wyśrodkowanego kontenera

Wyśrodkowane pole skupia uwagę i zapobiega rozciąganiu treści na szerokich ekranach.

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

Uczyń zadania czytelnymi

Każde zadanie powinno wyglądać jak osobny wiersz, z odpowiednimi odstępami.

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

Dodaj czytelny wygląd „zrobione”

Gdy zadanie jest ukończone, powinno to być od razu widoczne.

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

Ujednolicenie przycisków

Trzymaj przyciski w jednym stylu, by wyglądały jak elementy tej samej aplikacji.

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

To wystarczy, żeby UI był schludny i przyjazny — bez zaawansowanych trików. Teraz podłączymy zachowanie przez JavaScript.

Krok 5: Dodawanie zadań (podstawy JavaScript)

Mając pole, przycisk i listę, sprawimy, by działały. Cel: gdy ktoś wpisze zadanie i kliknie Add (lub naciśnie Enter), nowy element pojawi się w liście.

Podłącz przycisk i klawisz Enter

W pliku JavaScript najpierw pobierz elementy, a potem nasłuchuj dwóch akcji: kliknięcia przycisku i wciśnięcia Enter w polu.

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

Co to robi, prostymi słowami

• Czyta tekst z inputa i używa trim(), by usunąć zbędne spacje na początku/końcu.
• Zatrzymuje się, jeśli zadanie jest puste, żeby nie dodawać pustych elementów.
• Tworzy nowy \u003cli\u003e, ustawia jego tekst i dodaje do listy.
• Resetuje pole i ustawia na nim fokus, żeby szybciej dodać kolejne zadanie.

Jeśli nic się nie dzieje, sprawdź, czy id w HTML dokładnie pasuje do selektorów w JavaScripcie — to częsty błąd początkujących.

Krok 6: Oznaczanie jako zrobione i usuwanie zadań

Gdy dodawanie działa, dajmy zadaniom akcje: oznaczanie jako zrobione oraz usuwanie.

Przechowuj zadania jako proste obiekty

Zamiast trzymać zadania jako zwykłe ciągi znaków, użyj obiektów. Dzięki temu każde zadanie ma stabilną tożsamość i miejsce na status „zrobione”:

• text: treść zadania
• done: true lub false
• id: unikalny numer, żeby odnaleźć/usunąć właściwe zadanie

Przykład:

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

Dodaj kontrolkę „Zrobione” i przycisk „Usuń”

W czasie renderowania każdego zadania dodaj checkbox albo przycisk „Done” oraz przycisk „Delete”.

Listener (nasłuchiwacz zdarzeń) to sposób reagowania na kliknięcia — przypinasz go do przycisku (lub całej listy), a on uruchamia kod po kliknięciu.

Wzorzec przyjazny początkującym to delegacja zdarzeń: dodaj jeden nasłuchiwacz na pojemnik listy i sprawdzaj, co zostało kliknięte.

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

W renderTasks():

• Dodaj data-id="${task.id}" do każdego przycisku.
• Graficznie pokaż zadania zrobione (np. dodając klasę .done).

Krok 7: Zapisz zadania, żeby zostały (localStorage)

Teraz twoja lista ma problem: po odświeżeniu strony wszystko znika.

Dzieje się tak, bo zadania istnieją tylko w pamięci JavaScript. Po przeładowaniu strony pamięć się zeruje.

localStorage = małe „pudełko” w przeglądarce

localStorage jest wbudowany w przeglądarkę. Wyobraź sobie, że to małe pudełko, w którym możesz zapisać tekst pod nazwą (kluczem). Świetne do projektów dla początkujących, bo nie trzeba serwera ani kont.

Zapiszemy całą listę zadań jako tekst JSON, a potem załadujemy przy otwieraniu strony.

1) Zapisuj po każdej zmianie

Za każdym razem, gdy dodasz zadanie, oznaczysz jako zrobione lub usuniesz, wywołaj saveTasks().

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

Gdziekolwiek aktualizujesz tablicę tasks, zrób to natychmiast po zmianie:

saveTasks(tasks);
renderTasks(tasks);

2) Ładuj na starcie strony (i renderuj)

Kiedy strona się ładuje, odczytaj zapisane dane. Jeśli nic nie ma, użyj pustej listy.

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

I to tyle: aplikacja teraz pamięta zadania po odświeżeniu.

Wskazówka: localStorage przechowuje tylko tekst, więc JSON.stringify() zamienia tablicę na tekst, a JSON.parse() przywraca ją do tablicy.

Krok 8: Testuj i naprawiaj częste błędy

Testowanie brzmi nudno, ale to najszybszy sposób, żeby twoja aplikacja przestała być „działa na moim komputerze” i zaczęła „działać zawsze”. Zrób szybki test po każdej drobnej zmianie.

Szybki test (60 sekund)

Przejdź przez główny przepływ w tej kolejności:

• Dodaj zadanie
• Oznacz je jako zrobione
• Usuń je
• Odśwież stronę (czy UI nadal działa jak trzeba)

Jeśli któryś krok nie działa, napraw go, zanim dodasz nowe funkcje. Małe aplikacje robią się chaotyczne, gdy nakładasz problemy na problemy.

Przetestuj przypadki brzegowe

To przypadki, których nie przewidziałeś, a które użytkownicy i tak zrobią:

• Bardzo długi tekst (czy nie wychodzi poza ekran?)
• Powtarzające się zadania (czy usuwasz właściwe?)
• Puste pole (czy dodaje pusty wpis?)

Częsta poprawka to blokowanie pustych zadań:

const text = input.value.trim();
addButton.disabled = text === "";

(Możesz uruchamiać to przy każdym zdarzeniu input, i jeszcze raz tuż przed dodaniem.)

Szybka lista „nic się nie dzieje”

Gdy kliknięcia nic nie robią, zwykle to:

• Selekcje nie pasują (inny id lub klasa między HTML a JS).
• Skrypt się nie ładuje (zły plik/ścieżka albo app.js nie znaleziony).
• Jest błąd JavaScript, który zatrzymuje resztę pliku.

Użyj konsoli, żeby zobaczyć, co naprawdę się dzieje

Gdy coś zachowuje się losowo, loguj:

console.log("Adding:", text);
console.log("Current tasks:", tasks);

Sprawdź Konsolę przeglądarki w poszukiwaniu błędów (czerwony tekst). Gdy naprawisz problem, usuń zbędne logi, żeby nie zaśmiecały projektu.

Krok 9: Uczyń aplikację przyjazną (dostępność + mobilność)

Aplikacja jest „gotowa”, gdy jest wygodna dla prawdziwych ludzi — na telefonach, z klawiaturą i z czytnikami ekranu.

Łatwe klikanie na urządzeniach mobilnych

Na małych ekranach małe przyciski są frustrujące. Daj elementom dotykowym wystarczająco dużo miejsca:

• Użyj większego paddingu przycisków (celuj w około 44px wysokości)
• Dodaj odstęp między przyciskami Done i Delete, by nie trafiać w złe
• Trzymaj pole input na pełną szerokość na mobile, żeby wygodnie się pisało

W CSS powiększenie padding, font-size i gap często wystarcza.

Dodaj etykiety i ARIA (co i dlaczego)

Czytniki ekranu potrzebują jasnych nazw kontrolkom.

• Pole tekstowe powinno mieć prawdziwy \u003clabel\u003e (najlepsza opcja). Jeśli nie chcesz go pokazywać, możesz go ukryć wizualnie w CSS, ale pozostaw w HTML.
• Przycisk tylko z ikoną (np. kosz) powinien mieć aria-label="Delete task", żeby czytnik wiedział, co robi.

To pomaga osobom korzystającym z technologii wspomagających zrozumieć interfejs.

Obsługa klawiatury: Tab + Enter

Upewnij się, że cały interfejs działa bez myszy:

• Powinieneś móc Tab przejść do inputa i przycisków.
• Naciśnięcie Enter w polu powinno dodać zadanie (użyj \u003cform\u003e, by Enter działał naturalnie).
• Po dodaniu zadania możesz ustawić fokus z powrotem na input, żeby szybko dodawać kolejne.

Czytelność: kontrast i rozmiar fontu

Używaj czytelnego rozmiaru (16px to dobry punkt wyjścia) i silnego kontrastu (ciemny tekst na jasnym tle lub odwrotnie). Unikaj używania tylko koloru do pokazania „zrobione” — dodaj też wyraźny styl jak przekreślenie.

Krok 10: Posprzątaj i uporządkuj kod

Gdy wszystko działa, poświęć 10–15 minut na porządki. Ułatwi to przyszłe poprawki i pomoże zrozumieć projekt po powrocie.

Prosta struktura folderów

Ma być mało i przewidywalnie:

• /index.html — struktura strony (input, przycisk, lista)
• /styles.css — wygląd (odstępy, fonty, styl „zrobione”)
• /app.js — logika (dodaj, oznacz, usuń, zapisz/ładuj)
• /README.md — notatka dla „przyszłego siebie”

Jeśli wolisz podfoldery, możesz też użyć:

• /css/styles.css
• /js/app.js

Pamiętaj, żeby \u003clink\u003e i \u003cscript\u003e miały dopasowane ścieżki.

Uczyń JavaScript czytelniejszym

Kilka szybkich wskazówek:

• Używaj jasnych nazw: taskInput, taskList, saveTasks()
• Trzymaj funkcje krótkie: jedna funkcja = jedno zadanie
• Komentuj krótko tam, gdzie kod nie jest oczywisty (nie komentuj każdej linii)

Na przykład łatwiej czyta się:

• renderTasks(tasks)
• addTask(text)
• toggleTask(id)
• deleteTask(id)

Dodaj krótki README

README.md może być prosty:

• Co robi (lista zadań zapisująca zadania)
• Jak uruchomić (otwórz index.html w przeglądarce)
• Opcjonalnie: znane ograniczenia

Zrób kopię zapasową projektu

Przynajmniej spakuj folder po ukończeniu ważnego kroku (np. „localStorage działa”). Jeśli chcesz historię zmian, Git jest świetny — ale nie jest konieczny. Nawet jedna kopia zapasowa może uchronić przed przypadkowym usunięciem.

Krok 11: Opublikuj aplikację i podziel się nią

Publikacja to udostępnienie plików (HTML, CSS, JavaScript) publicznie, żeby inni mogli otworzyć link i z nich skorzystać. Ponieważ to aplikacja statyczna (działa w przeglądarce, bez serwera), możesz ją hostować za darmo.

Opcja 1: GitHub Pages (świetne dla stron statycznych)

Kroki w skrócie:

1. Załóż konto GitHub (jeśli go nie masz).
2. Stwórz nowe repozytorium i wrzuć pliki (albo wypchnij je przez Git).
3. W repo przejdź do Settings → Pages.
4. Wybierz branch do publikacji (często main) i folder (zwykle / root).
5. Zapisz — GitHub poda publiczny adres.

Jeśli masz osobne pliki, sprawdź nazwy plików i linki (np. styles.css vs style.css).

Opcja 2: Netlify lub Vercel (proste przeciągnij‑i‑upuść)

Dla najszybszego „wrzuć i idź”:

1. Załóż konto w Netlify lub Vercel.
2. Wybierz Deploy / Add New Project.
3. Przeciągnij folder projektu albo połącz repozytorium GitHub.
4. Poczekaj na upload/build.
5. Otwórz wygenerowany URL i przetestuj.

Szybka lista przed udostępnieniem

• Odśwież stronę: czy zadania dalej są (localStorage działa)?
• Dodaj, oznacz i usuń zadania: czy wszystko działa?
• Otwórz na mobile (albo zwęż okno): czy nic nie wystaje poza ekran?

Gdy wszystko działa, wyślij link znajomemu i poproś o test — świeże spojrzenie szybko wykrywa błędy.

Następne kroki: proste ulepszenia

Zbudowałeś działającą aplikację to‑do. Jeśli chcesz dalej się uczyć bez skakania do dużych projektów, te dodatki wniosą wartość i nauczą przydatnych wzorców.

1) Edycja tekstu zadania

Dodaj przycisk „Edytuj” przy każdym zadaniu. Po kliknięciu zamień etykietę na małe pole input (wypełnione treścią) oraz przyciski „Zapisz” i „Anuluj”.

Wskazówka: trzymaj dane jako tablica obiektów (z id i text). Edycja to: znajdź zadanie po id, zaktualizuj text, renderuj i zapisz.

2) Filtry: Wszystkie / Aktywne / Zrobione

Dodaj trzy przyciski na górze: All, Active, Done.

Przechowuj obecny filtr w zmiennej, np. currentFilter = 'all'. Podczas renderowania pokazuj:

• All: wszystkie zadania
• Active: zadania niezrobione
• Done: zadania zrobione

3) Terminy lub proste kategorie

Zachowaj lekkość:

• Dodaj opcjonalny termin (YYYY-MM-DD) i pokaż go obok zadania
• Albo dodaj kategorię typu „Praca / Dom / Szkoła” za pomocą małego selecta

Nawet jedno dodatkowe pole uczy, jak zaktualizować model danych i UI razem.

4) Później: przejście z localStorage na prosty backend

Gdy będziesz gotów, główna zmiana to: zamiast zapisywać do localStorage, wysyłasz zadania do API (serwera) przez fetch(). Serwer przechowuje je w bazie, więc zsynchronizują się między urządzeniami.

Jeśli chcesz spróbować tego skoku bez przepisywania wszystkiego, platforma typu Koder.ai może pomóc: opisz funkcje w chatcie (endpointy, tabele bazy, zmiany UI), iteruj w trybie planowania i eksportuj kod źródłowy wygenerowanego projektu React/Go/PostgreSQL, gdy będziesz gotów.

5) Dobry następny projekt dla początkujących

Spróbuj zbudować aplikację do notatek (z wyszukiwaniem) albo tracker nawyków (codzienne odhaczanie). Wykorzystują te same umiejętności: renderowanie listy, edycję, zapisywanie i prosty design UI.