Jak zbudować timer Pomodoro z AI - od zera do narzędzia produktywności w 20 minut

Otwórz Claude. Poważnie - zrób to teraz. Druga karta, zaloguj się (darmowe konto wystarczy) i wróć tutaj.

Gotowe?

Za 20 minut będziesz mieć działający timer Pomodoro. Z dźwiękiem alarmu, automatycznymi cyklami pracy i przerw, zapisywaniem sesji i wykresem Twojej produktywności z ostatnich 7 dni. Jeden plik HTML. Zero instalowania. Zero rejestracji. Zero opłat.

Masz 47 nieodczytanych maili, 3 otwarte komunikatory i 0 ukończonych głębokich zadań? Technika Pomodoro rozwiązuje 80% tego problemu. Ale każda gotowa apka Pomodoro chce Twojego maila, subskrypcji premium i dostępu do powiadomień.

Za 20 minut zbudujesz własną. Bez konta. Działa offline. Dokładnie pod Twoje preferencje.

To nie jest artykuł o timerze. To jest artykuł o budowaniu z AI. Timer to efekt uboczny. Kompetencja to cel.

TL;DR: 4 rzeczy, które wyniesiesz z tego artykułu:

• Działający timer Pomodoro - cykle 25/5 min, alarm, statystyki, wykres produktywności
• 5 gotowych promptów CRISP - kopiujesz, wklejasz do Claude, dostajesz kod
• Zero kodowania, zero instalacji - jeden plik HTML, otwierasz w przeglądarce i pracujesz
• Wzorzec pracy z AI - ten sam model zastosujesz do budowania czegokolwiek

---

Poziom 1 (początkujący) | Seria "Zbuduj to z AI" | 5 kroków | 5 promptów CRISP | 1 plik HTML | 0 instalacji | ~20 minut

---

Co zbudujemy

Funkcja	Krok
Wygląd timera - duży zegar, przyciski, ciemny motyw	#1
Działające odliczanie - dokładne nawet w tle	#2
Dźwięk alarmu + automatyczne cykle 25/5/15 min	#3
Zapisywanie sesji + dzisiejsze statystyki	#4
Wykres produktywności z ostatnich 7 dni	#5

Stack: Jeden plik HTML (z CSS i JavaScript w środku). Otwierasz w przeglądarce - działa. Offline.

Zobacz gotowy timer Pomodoro - efekt końcowy, który zbudujesz w tym tutorialu.

---

Krok 0: Przygotowanie (1 minuta)

Dobra wiadomość: w odróżnieniu od aplikacji pogodowej - nie potrzebujesz żadnego klucza API. Zero rejestracji na zewnętrznych serwisach. Wszystko działa lokalnie.

Co potrzebujesz:

1. Przeglądarkę - Chrome, Firefox, Edge, Safari - cokolwiek
2. Edytor tekstu - Notatnik (Windows), TextEdit (Mac), VS Code - cokolwiek
3. Claude - darmowe konto na claude.ai

Przygotuj plik

Utwórz nowy plik tekstowy i nazwij go pomodoro.html. To będzie jedyny plik, z którym pracujemy.

---

Krok 1: Wygląd timera (Prompt #1)

---

Stan aplikacji: Pusty plik pomodoro.html. Zaczynamy od zera.

Czas na ten krok: ~4 minuty

---

Zaczynamy od wyglądu. Timer jeszcze nie będzie działać - ale będzie wyglądać profesjonalnie. To ważne: wizualny rezultat od pierwszego kroku utrzymuje motywację.

Dlaczego ten prompt działa

Prompt używa formatu CRISP - tego samego, co w tutorialu pogodowym:

Element	Co robi	W tym prompcie
Context	Kontekst projektu	Jeden plik HTML, timer Pomodoro
Role	Rola AI	UI/UX designer
Intent	Cel	Wygląd timera z przyciskami
Scope	Ograniczenia	Ciemny motyw, responsywny, po polsku
Precision	Format odpowiedzi	Pełny plik HTML

Pełne wyjaśnienie metody: Inżynieria promptów - Framework CRISP

Prompt do skopiowania

Otwórz Claude i wklej:

<context>
Buduję timer Pomodoro w jednym pliku HTML (z CSS i JavaScript
w środku). Aplikacja ma działać po otwarciu pliku .html
w przeglądarce - zero serwera, zero instalacji, działa offline.
To narzędzie do zarządzania produktywnością metodą Pomodoro
(25 min pracy, 5 min przerwy).
</context>

<role>
Jesteś UI/UX designerem specjalizującym się w nowoczesnych,
ciemnych interfejsach webowych i aplikacjach produktywności.
</role>

<intent>
Stwórz wygląd timera Pomodoro:
1. Duży, czytelny zegar w centrum (format MM:SS, np. "25:00")
   - czcionka co najmniej 72px, dobrze widoczna
2. Pod zegarem: 3 przyciski - Start, Pauza, Reset
3. Nad zegarem: etykieta trybu ("Praca" / "Przerwa")
4. Pod przyciskami: informacja o sesji ("Sesja 1 z 4")
5. Okrągły progress ring wokół zegara (SVG circle)
   który będzie się wypełniać w miarę upływu czasu
6. Tło strony z subtelnymi gradientami
</intent>

<scope>
- Jeden plik HTML - style i skrypt w środku
- Ciemny motyw: tło #1a1a2e, karty #16213e,
  akcent pracy #ff6b6b (koralowy), akcent przerwy #51cf66 (zielony)
- Polski interfejs (przyciski, etykiety)
- Responsywny - czytelny na telefonie i desktopie
- Timer jeszcze NIE musi działać - skupiamy się na wyglądzie
- Przyciski Pauza i Reset domyślnie nieaktywne (disabled)
- Komentarze w kodzie po polsku
</scope>

<precision>
Zwróć KOMPLETNY plik HTML gotowy do zapisania i otwarcia
w przeglądarce. Pełna implementacja wyglądu. Kod czytelny
i dobrze skomentowany po polsku.
</precision>

Co dostaniesz

Claude wygeneruje plik HTML z pięknym timerem. Duży zegar 25:00 w centrum, okrągły pierścień postępu, trzy przyciski, ciemne tło z gradientem. Skopiuj cały kod, wklej do pomodoro.html, zapisz i otwórz w przeglądarce.

Weryfikacja

• Widzisz duży zegar "25:00" na ciemnym tle
• Są 3 przyciski (Start aktywny, Pauza i Reset wyszarzone)
• Pierścień/okrąg wokół zegara jest widoczny
• Na telefonie (zmniejsz okno) wygląda dobrze

Co się tu uczysz

• SVG circle - pierścień postępu to koło SVG z atrybutem stroke-dasharray. Claude użyje go automatycznie.
• CSS gradients - ciemne tło z subtelnym gradientem robi różnicę między "amatorskim" a "profesjonalnym" wyglądem.
• CSS variables - kolory zdefiniowane raz, używane wszędzie. Zmiana jednej zmiennej zmienia cały motyw.

---

Krok 2: Działający timer (Prompt #2)

---

Stan aplikacji: Piękny, ale statyczny timer. Przyciski nic nie robią. Pora to zmienić.

Czas na ten krok: ~4 minuty

---

To najważniejszy krok technicznie. Timer musi odmierzać czas dokładnie - nawet gdy przełączysz kartę przeglądarki. Przeglądarki spowalniają timery w nieaktywnych zakładkach. Nasz prompt każe Claude użyć sprytnego rozwiązania.

Prompt do skopiowania

Wklej do Claude (w tej samej rozmowie - Claude pamięta kontekst):

<context>
Mam statyczny timer Pomodoro w jednym pliku HTML.
Przyciski jeszcze nie działają. Chcę dodać logikę odliczania.
WAŻNE: przeglądarki throttlują setInterval w nieaktywnych
zakładkach - timer MUSI być dokładny nawet w tle.
</context>

<role>
Jesteś doświadczonym frontend developerem specjalizującym
się w precyzyjnym odmierzaniu czasu w JavaScript.
</role>

<intent>
Dodaj logikę timera:
1. Kliknięcie "Start" rozpoczyna odliczanie od 25:00
2. Kliknięcie "Pauza" zatrzymuje - ponowne "Start" wznawia
3. Kliknięcie "Reset" przywraca 25:00
4. Timer używa Date.now() do obliczania czasu (NIE polegaj
   na regularnych tickach setInterval - są niedokładne w tle)
5. Dodaj Page Visibility API - gdy użytkownik wraca na kartę,
   natychmiast przelicz aktualny czas
6. Progress ring animuje się proporcjonalnie do upływu czasu
7. Gdy timer dojdzie do 0:00 - wyświetl "00:00" i zatrzymaj
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- setInterval co 250ms jako heartbeat do odświeżania UI
- Rzeczywisty czas obliczaj z Date.now() (timestamp approach)
- Przycisk Start/Pauza zmienia etykietę (Start -> Pauza -> Start)
- Reset aktywny tylko gdy timer jest uruchomiony lub spauzowany
- Zachowaj cały istniejący wygląd
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML.
Nie pomijaj istniejącego kodu - pełna implementacja.
Dodaj komentarze przy nowej logice.
</precision>

Co się zmieni

Timer zacznie odliczać. Kliknij Start - zegar rusza od 25:00. Pierścień postępu się wypełnia. Pauza zatrzymuje. Reset wraca do początku.

Kluczowy test: Włącz timer, przełącz na inną kartę na 2-3 minuty, wróć. Timer powinien pokazywać prawidłowy czas (nie "zamrożony" w momencie przełączenia karty).

Weryfikacja

• Start uruchamia odliczanie
• Pauza zatrzymuje, ponowny Start wznawia od tego samego miejsca
• Reset wraca do 25:00
• Pierścień postępu się animuje
• Timer jest dokładny po powrocie z innej karty

Jeśli timer "zamraża się" po przełączeniu karty - Claude nie użył timestamp approach. Napisz:

"Timer zatrzymuje się, gdy przełączam kartę. Użyj Date.now() do obliczania czasu zamiast dekrementacji zmiennej w setInterval."

Co się tu uczysz

• Timestamp-based timing - zamiast "odejmij 1 sekundę co sekundę" (co jest niedokładne), zapisujesz czas startu i obliczasz różnicę. To standard w produkcyjnych aplikacjach.
• Page Visibility API - document.visibilitychange pozwala wykryć, gdy użytkownik wraca na kartę. Przydatne w każdej aplikacji z odświeżaniem danych.
• setInterval jako heartbeat - interval odświeża UI, ale logika czasu jest niezależna od jego częstotliwości.

---

Krok 3: Alarm dźwiękowy + cykle Pomodoro (Prompt #3)

---

Stan aplikacji: Timer odlicza od 25:00, można pauzować i resetować. Ale po dojściu do 0:00 nic się nie dzieje. Brak dźwięku. Brak automatycznych przerw.

Czas na ten krok: ~4 minuty

---

Teraz dodajemy to, co robi z timera prawdziwe narzędzie Pomodoro: dźwięk alarmu i automatyczne przełączanie między pracą a przerwą.

Jak działa dźwięk bez plików MP3?

Web Audio API to technologia wbudowana w przeglądarkę. Generuje dźwięk programowo - z oscylatora. Zero pobierania plików. Zero zewnętrznych zależności. Claude napisze 15 linijek kodu, a Ty usłyszysz alarm.

Prompt do skopiowania

<context>
Mój timer Pomodoro odlicza od 25:00 i zatrzymuje się na 0:00.
Chcę dodać dźwięk alarmu i automatyczne cykle Pomodoro:
praca 25 min -> przerwa 5 min -> praca -> przerwa -> ...
Po 4 sesjach pracy - długa przerwa 15 min.
</context>

<role>
Jesteś frontend developerem z doświadczeniem w Web Audio API
i aplikacjach produktywności.
</role>

<intent>
Dodaj alarm i cykle:
1. Gdy timer dojdzie do 0:00 - odtwórz dźwięk alarmu
   używając Web Audio API (OscillatorNode). Wzór: 3 krótkie
   bipnięcia (800Hz, sinusoida). Bez zewnętrznych plików audio.
2. Automatyczne przełączanie cykli:
   - Praca: 25 minut (kolor akcentu: #ff6b6b)
   - Krótka przerwa: 5 minut (kolor akcentu: #51cf66)
   - Co 4 sesje pracy: długa przerwa 15 minut
3. Etykieta nad zegarem zmienia się: "Praca" / "Przerwa" /
   "Długa przerwa"
4. Licznik sesji: "Sesja 2 z 4" - aktualizowany po każdym cyklu
5. Zmień document.title na "⏰ Przerwa!" lub "🔴 Praca"
   gdy timer się przełącza - użytkownik zobaczy to na karcie
6. Stwórz AudioContext po pierwszym kliknięciu Start
   (wymagane przez przeglądarki - autoplay policy)
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Kolory interfejsu zmieniają się z cyklem
  (czerwonawy przy pracy, zielonawy przy przerwie)
- Progress ring resetuje się na początku każdego cyklu
- Przycisk Reset wraca do początku bieżącego cyklu
- Dodaj przycisk "Pomiń" - przeskakuje do następnego cyklu
</scope>

<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj całą istniejącą funkcjonalność.
</precision>

Co się zmieni

Timer staje się pełnym systemem Pomodoro. Po 25 minutach usłyszysz 3 bipnięcia. Timer automatycznie przełączy się na 5-minutową przerwę (zielony akcent). Po przerwie - z powrotem praca. Co 4 sesje - 15 minut długiej przerwy.

Wskazówka: Dźwięk zadziała dopiero po kliknięciu Start. To ograniczenie przeglądarek - nie mogą odtwarzać dźwięku bez interakcji użytkownika. To normalne zachowanie, nie błąd.

Weryfikacja

• Poczekaj aż timer dojdzie do 0:00 (lub zmień czas na 5 sekund do testów - poproś Claude: "Ustaw czas pracy na 5 sekund do testowania")
• Słyszysz 3 krótkie bipnięcia
• Timer automatycznie przełącza się na przerwę
• Etykieta zmienia się z "Praca" na "Przerwa"
• Kolory interfejsu się zmieniają
• Tytuł karty przeglądarki się aktualizuje

Jeśli nie słyszysz dźwięku - sprawdź głośność. Jeśli dalej cisza:

"Dźwięk alarmu nie działa. Sprawdź, czy AudioContext jest tworzony po kliknięciu Start. Użyj fallbacku: new (window.AudioContext || window.webkitAudioContext)()."

Co się tu uczysz

• Web Audio API - generowanie dźwięku w przeglądarce bez żadnych plików. OscillatorNode tworzy falę sinusoidalną o zadanej częstotliwości. 15 linijek kodu = alarm.
• Autoplay policy - przeglądarki blokują dźwięk bez interakcji użytkownika. Dlatego AudioContext tworzymy po kliknięciu Start.
• document.title - zmiana tytułu karty to prosty, ale skuteczny sposób na powiadomienie użytkownika bez Notification API.

---

Krok 4: Zapisywanie sesji i statystyki (Prompt #4)

---

Stan aplikacji: Pełny cykl Pomodoro z alarmem. Ale po odświeżeniu strony - wszystko znika. Brak historii, brak statystyk.

Czas na ten krok: ~4 minuty

---

localStorage to pamięć przeglądarki. Dane przetrwają odświeżenie strony, zamknięcie przeglądarki, nawet restart komputera. Idealne do zapisywania sesji Pomodoro.

Prompt do skopiowania

<context>
Mój timer Pomodoro działa: cykle 25/5/15, alarm dźwiękowy,
automatyczne przełączanie. Chcę zapisywać ukończone sesje
i wyświetlać statystyki produktywności.
</context>

<role>
Jesteś frontend developerem z doświadczeniem w zarządzaniu
danymi w localStorage i budowaniu dashboardów.
</role>

<intent>
Dodaj zapisywanie sesji i statystyki:
1. Po każdej ukończonej sesji pracy (25 min) zapisz
   w localStorage: datę (ISO string YYYY-MM-DD)
   i timestamp zakończenia
2. Panel statystyk pod timerem pokazujący:
   - "Dzisiaj: X sesji (Y min skupienia)"
   - "Ten tydzień: X sesji"
   - Aktualny streak (ile dni z rzędu masz min. 1 sesję)
3. localStorage key: "pomodoro_v1_sessions"
4. Dane: JSON array obiektów {date: "2026-04-03", timestamp: 1234567890}
5. Przy starcie strony: załaduj dane z localStorage
   i wyświetl statystyki
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Panel statystyk: karty z dużymi liczbami, spójne z designem
- Statystyki odświeżają się natychmiast po ukończeniu sesji
- Streak liczy się: min. 1 sesja dziennie, ciągłość do wczoraj
  lub dzisiaj. Brak sesji wczoraj = streak resetuje się do 0
  (lub do dzisiejszych sesji jeśli są)
- Nie usuwaj danych automatycznie - niech się kumulują
</scope>

<precision>
Zwróć KOMPLETNY plik HTML. Zachowaj cały timer,
cykle i alarm. Dodaj panel statystyk poniżej timera.
</precision>

Co się zmieni

Pod timerem pojawi się panel ze statystykami. Ukończ jedną sesję (lub do testów zmień czas na 5 sekund). Zobaczysz: "Dzisiaj: 1 sesja (25 min skupienia)". Odśwież stronę - dane nadal są.

Weryfikacja

• Ukończ sesję pracy (lub użyj skróconego czasu do testów)
• Panel statystyk aktualizuje się natychmiast
• Odśwież stronę (F5) - statystyki nadal widoczne
• Zamknij i otwórz przeglądarkę - statystyki nadal tam

Co się tu uczysz

• localStorage - setItem zapisuje, getItem odczytuje, JSON.parse/stringify konwertuje obiekty. To 4 metody, które wystarczą do 90% przypadków.
• ISO date strings - format "2026-04-03" jest czytelny, sortowalny i jednoznaczny. Claude użyje go do porównywania dat.
• Streak calculation - algorytm "ile dni z rzędu" to klasyczne ćwiczenie z logiki dat. Przydatne w każdej aplikacji z elementem gamifikacji.

---

Krok 5: Wykres produktywności (Prompt #5)

---

Stan aplikacji: Timer z cyklami, alarmem, statystykami i zapisywaniem w localStorage. Brakuje wizualizacji: jak wyglądała moja produktywność w ostatnim tygodniu?

Czas na ten krok: ~4 minuty

---

Ostatni krok. Dodajemy wykres słupkowy - ile sesji Pomodoro ukończyłeś każdego dnia w ostatnich 7 dniach. Zbudowany w czystym CSS - zero bibliotek, zero CDN.

Prompt do skopiowania

<context>
Mój timer Pomodoro zapisuje ukończone sesje w localStorage
(tablica obiektów z datą i timestampem). Chcę dodać wizualny
wykres produktywności z ostatnich 7 dni.
</context>

<role>
Jesteś frontend developerem i data visualization specialist
tworzącym czytelne wykresy w czystym CSS.
</role>

<intent>
Dodaj sekcję "Twoja produktywność" z wykresem i statystykami:
1. Wykres słupkowy ostatnich 7 dni:
   - Oś X: dni tygodnia po polsku (Pon, Wt, Śr, Czw, Pt, Sob, Nd)
     z datą (np. "Pon 31.03")
   - Oś Y: liczba sesji (słupki proporcjonalne do max wartości)
   - Słupki kolorowane gradientem (od akcentu pracy do akcentu przerwy)
   - Nad każdym słupkiem: liczba sesji
   - Dzisiejszy słupek wyróżniony (jaśniejszy lub z ramką)
2. Pod wykresem: 3 karty statystyk:
   - "Średnia dzienna: X sesji"
   - "Najlepszy dzień: [dzień] (X sesji)"
   - "Łącznie: X sesji (Y godzin skupienia)"
3. Wykres budowany w czystym CSS (flexbox, div jako słupki)
   - BEZ Chart.js, BEZ Canvas, BEZ zewnętrznych bibliotek
4. Wykres aktualizuje się po każdej ukończonej sesji
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Sekcja wykresu pod panelem statystyk dziennych
- Responsywny: na telefonie słupki węższe, etykiety mniejsze
- Jeśli brak danych za dany dzień - słupek ma minimalną
  wysokość (2px) z etykietą "0"
- Animacja słupków przy ładowaniu (grow from bottom)
- Spójny design z resztą aplikacji
- Usuń emoji, całość musi być nowoczesna i zgodna z aktualnymi trendami
</scope>

<precision>
Zwróć KOMPLETNY, FINALNY plik HTML. To jest ostateczna
wersja aplikacji - zawiera WSZYSTKO: timer, cykle, alarm,
localStorage, statystyki i wykres. Pełny, gotowy do użycia kod.
</precision>

Co dostaniesz

Sekcja z wykresem słupkowym pokazującym Twoją produktywność. Każdy dzień to słupek - im więcej sesji, tym wyższy. Pod wykresem statystyki: średnia dzienna, najlepszy dzień, łączny czas skupienia.

Wskazówka: Wykres będzie pusty (same zera), dopóki nie ukończysz kilku sesji. Do testowania zmień czas pracy na 5 sekund i ukończ kilka sesji. Albo poproś Claude: "Dodaj przycisk 'Wygeneruj testowe dane' który wstawi losowe sesje z ostatnich 7 dni do localStorage."

Weryfikacja

• Sekcja wykresu jest widoczna pod statystykami
• Słupki mają animację pojawiania się
• Dzisiejszy dzień jest wyróżniony
• Statystyki pod wykresem się wyświetlają
• Na telefonie wykres jest czytelny

Co się tu uczysz

• CSS jako narzędzie wizualizacji - nie potrzebujesz Chart.js do prostego wykresu słupkowego. Flexbox + zmienne wysokości div = wykres. To jest zaskakująco proste.
• Data aggregation - grupowanie danych po dacie (ile sesji per dzień) to fundamentalna operacja w każdej analityce.
• Responsywny wykres - media queries + elastyczne jednostki (%, vw) sprawiają, że wykres działa na każdym ekranie.

---

Efekt końcowy - co masz po 20 minutach

Zobacz działający timer Pomodoro - dokładnie taki efekt uzyskasz po przejściu 5 kroków.

Po przejściu 5 kroków masz plik pomodoro.html z:

Funkcja	Status
Duży, czytelny zegar z progress ringiem	Działa
Przyciski Start / Pauza / Reset / Pomiń	Działa
Dokładny timer (nawet w tle)	Działa
Automatyczne cykle: 25 min praca / 5 min przerwa	Działa
Długa przerwa co 4 sesje (15 min)	Działa
Dźwięk alarmu (Web Audio API)	Działa
Zmiana kolorów: praca (czerwony) / przerwa (zielony)	Działa
Tytuł karty aktualizuje się z trybem	Działa
Zapisywanie sesji w localStorage	Działa
Statystyki: dzisiejsze sesje, streak, tydzień	Działa
Wykres produktywności z ostatnich 7 dni	Działa
Responsywny design (telefon + desktop)	Działa
Działa offline	Działa

Jeden plik. Zero serwera. Zero opłat. Otwierasz w przeglądarce i masz osobisty dashboard produktywności.

---

Co się właśnie nauczyłeś

Cztery kompetencje, które ćwiczyłeś - i które powtórzysz przy każdym kolejnym narzędziu:

1. Briefowanie AI (prompt engineering)

Każdy prompt miał strukturę CRISP: Context, Role, Intent, Scope, Precision. Im lepiej opiszesz, co chcesz - tym lepszy kod dostaniesz. AI nie czyta w myślach. Czyta briefy.

2. Progresywne budowanie

Nie budowaliśmy całego timera jednym promptem. 5 kroków - każdy z jednym celem. Krok 1: wygląd. Krok 2: logika. Krok 3: dźwięk. To jest wzorzec, który działa na każdy projekt.

3. Debugowanie z AI

Coś nie zadziałało? Wklejasz błąd do Claude i opisujesz problem. Claude diagnozuje w 90% przypadków. To jest kompetencja cenniejsza niż sam kod.

4. Weryfikacja wyniku

AI generuje kod, Ty go testujesz. Klikasz Start, przełączasz kartę, wracasz. Sprawdzasz, czy alarm działa. Ta pętla "generuj -> testuj -> popraw" to sedno pracy z AI.

---

5 kierunków rozbudowy

Masz fundament. Każdy kierunek to 1-2 dodatkowe prompty do Claude:

1. Ustawienia czasu

"Dodaj panel ustawień: suwaki do zmiany czasu pracy (1-60 min), krótkiej przerwy (1-15 min) i długiej przerwy (5-30 min). Zapisuj preferencje w localStorage."

2. Kategorie sesji

"Dodaj kategorie: praca, nauka, kreatywność, ćwiczenia. Przy starcie sesji użytkownik wybiera kategorię. Statystyki rozbite per kategoria."

3. Powiadomienia push

"Dodaj Notification API - gdy timer się skończy, wyślij powiadomienie systemowe (poza przeglądarką). Poproś o zgodę przy pierwszym użyciu. Jeśli użytkownik odmówi - polegaj na dźwięku."

4. Eksport danych

"Dodaj przycisk 'Eksportuj dane' który generuje plik CSV z wszystkimi sesjami (data, czas trwania, kategoria). Plik pobiera się automatycznie."

5. Tryb ciemny/jasny

"Dodaj przełącznik motywu (ikona słońca/księżyca). Tryb jasny: białe tło, ciemny tekst. Zapisuj preferencję w localStorage."

---

Najczęstsze problemy i rozwiązania

Problem	Przyczyna	Rozwiązanie
Timer "zamraża się" w tle	Claude nie użył timestamp approach	"Użyj Date.now() do obliczania czasu, nie dekrementuj zmiennej co sekundę"
Brak dźwięku alarmu	AudioContext wymaga interakcji	Dźwięk działa dopiero po kliknięciu Start
Progress ring się nie animuje	Brak aktualizacji stroke-dashoffset	"Progress ring się nie animuje. Zaktualizuj atrybut stroke-dashoffset co tick"
Dane znikają po odświeżeniu	Brakuje zapisu do localStorage	"Dodaj localStorage.setItem po każdej ukończonej sesji"
Wykres jest pusty	Brak danych testowych	"Dodaj przycisk 'Wygeneruj testowe dane' z losowymi sesjami z 7 dni"
Na telefonie jest za mały	Brak meta viewport	Sprawdź: <meta name="viewport" content="width=device-width, initial-scale=1">

Inny problem? Wklej treść błędu z konsoli (F12 -> Console) do Claude i opisz, co się dzieje.

---

Nie chodzi o timer. Chodzi o model pracy.

W tutorialu pogodowym zbudowałeś aplikację, która pobiera dane z API. Dzisiaj zbudowałeś narzędzie, które generuje dane lokalne - dźwięk, czas, statystyki. Dwa różne projekty. Ten sam wzorzec pracy:

1. Opisz, co chcesz (CRISP)
2. Wklej do Claude
3. Skopiuj kod do pliku
4. Otwórz w przeglądarce
5. Testuj i iteruj

Ten wzorzec nie ma daty ważności. Model AI się zmieni. Framework się zmieni. Ale umiejętność "opisz problem, dostań rozwiązanie, zweryfikuj wynik" zostanie z Tobą.

---

Co dalej

Chcesz...	Przeczytaj
Zbudować coś bardziej złożonego	Tablica Kanban z AI
Opanować promptowanie	Framework CRISP
Budować zaawansowane aplikacje	Vibe coding z Claude Code
Przejść kurs od zera	Kurs Claude AI - darmowy, 38 lekcji

Jeśli jesteś nowy na blogu - Zacznij Tutaj. 3 ścieżki nauki dopasowane do Twojej roli.

---

Ten artykuł to część serii "Zbuduj to z AI". Zobacz też: Aplikacja pogodowa | Tablica Kanban | Tracker nawyków