Jak zbudować tracker nawyków z AI - siatka w stylu GitHub i wykresy w 30 minut
Otwórz Claude. Ostatni raz w tej serii - ale nie ostatni raz w życiu. Zaloguj się i wróć.
Gotowe?
Za 30 minut będziesz mieć własny tracker nawyków. Z siatką w stylu GitHub (zielone kwadraciki za każdy dzień z nawykiem), wykresami Chart.js, streak counterem i statystykami wykonania. Jeden plik HTML. Twoje dane. Twoje nawyki.
66 dni - tyle średnio trwa zbudowanie nawyku (European Journal of Social Psychology, Lally et al.). Większość ludzi rzuca po 2 tygodniach. Główny powód? Nie widzą progresu. Siatka w stylu GitHub to zmienia. Widzisz każdy dzień. Dosłownie.
To nie jest artykuł o nawykach. To jest artykuł o budowaniu z AI. Tracker to efekt uboczny. Kompetencja to cel. A Chart.js - biblioteka, którą poznasz - przyda Ci się przy wizualizacji czegokolwiek: sprzedaży, ruchu na stronie, wyników kampanii.
TL;DR: 4 rzeczy, które wyniesiesz z tego artykułu:
- Działający tracker nawyków - siatka GitHub, wykresy, streaki, statystyki
- 6 gotowych promptów CRISP - kopiujesz, wklejasz do Claude, dostajesz kod
- Chart.js - nauczysz się zewnętrznej biblioteki do wykresów (przydatna wszędzie)
- Wzorzec pracy z AI - trzeci projekt tą samą metodą. Teraz to jest Twój nawyk.
Poziom 2 (średniozaawansowany) | Seria "Zbuduj to z AI" | 6 kroków | 6 promptów CRISP | 1 plik HTML | 0 instalacji | ~30 minut
Co zbudujemy
| Funkcja | Krok |
|---|---|
| Dashboard z listą nawyków i checkboxami | #1 |
| Dodawanie, usuwanie, zaznaczanie + localStorage | #2 |
| Siatka w stylu GitHub contributions | #3 |
| Statystyki: streak, procenty wykonania | #4 |
| Wykresy Chart.js (słupkowy + doughnut) | #5 |
| Nawigacja dat + eksport danych | #6 |
Stack: Jeden plik HTML + Chart.js z CDN. Otwierasz w przeglądarce - działa.
Krok 0: Przygotowanie (1 minuta)
Identycznie jak w poprzednich tutorialach - zero rejestracji, zero kluczy API.
Co potrzebujesz:
- Przeglądarkę - Chrome, Firefox, Edge, Safari
- Edytor tekstu - Notatnik, VS Code, cokolwiek
- Claude - darmowe konto na claude.ai
- Internet - Chart.js ładuje się z CDN (w kroku 5)
Utwórz nowy plik: nawyki.html. To będzie jedyny plik.
Krok 1: Dashboard z listą nawyków (Prompt #1)
Stan aplikacji: Pusty plik nawyki.html. Zaczynamy od zera.
Czas na ten krok: ~5 minut
Zaczynamy od wyglądu. Lista nawyków z checkboxami, formularz dodawania, ładny design. Jeszcze nic nie działa - ale widzisz, dokąd zmierzamy.
Dlaczego ten prompt działa
Prompt używa formatu CRISP - tego samego, co w całej serii "Zbuduj to z AI":
| Element | Co robi | W tym prompcie |
|---|---|---|
| Context | Kontekst projektu | Jeden plik HTML, tracker nawyków |
| Role | Rola AI | UI/UX designer, wellness apps |
| Intent | Cel | Dashboard z listą nawyków |
| Scope | Ograniczenia | Ciemny motyw, emoji, 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ę tracker nawyków 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.
To narzędzie do codziennego śledzenia nawyków z wizualizacją
postępu w stylu GitHub contributions.
</context>
<role>
Jesteś UI/UX designerem specjalizującym się w aplikacjach
wellness, produktywności i gamifikacji zachowań.
</role>
<intent>
Stwórz wygląd trackera nawyków:
1. Nagłówek: "Tracker Nawyków" z dzisiejszą datą po polsku
(np. "poniedziałek, 28 kwietnia 2026")
2. Formularz dodawania nawyku:
- Pole na nazwę nawyku
- Wybór emoji z predefiniowanej listy: 🧘 💪 📚 🏃 💧 🎯
🧠 ✍️ 🎵 😴 (klikalne buttony)
- Wybór koloru: 6 kółek kolorowych do kliknięcia
(#4CAF50, #2196F3, #FF9800, #E91E63, #9C27B0, #00BCD4)
- Przycisk "Dodaj nawyk"
3. Lista nawyków na dziś:
- Każdy nawyk: emoji + nazwa + checkbox "Wykonane"
- Kolorowy pasek po lewej stronie (kolor nawyku)
- 3-4 przykładowe nawyki: Medytacja 🧘, Ćwiczenia 💪,
Czytanie 📚, Picie wody 💧
4. Pod listą: podsumowanie dnia "3 z 4 wykonane (75%)"
</intent>
<scope>
- Jeden plik HTML - style i skrypt w środku
- Ciemny motyw: tło #0f0f23, karty #1a1a3e,
akcenty: kolory nawyków
- Polski interfejs
- Responsywny - na telefonie lista pełnej szerokości
- Nawyki jeszcze NIE muszą być interaktywne
- Emoji jako ikony - zero zewnętrznych fontów ikon
- Komentarze w kodzie po polsku
</scope>
<precision>
Zwróć KOMPLETNY plik HTML gotowy do zapisania i otwarcia
w przeglądarce. Pełna implementacja wyglądu z przykładowymi
nawykami. Kod czytelny i dobrze skomentowany.
</precision>Co dostaniesz
Dashboard z listą nawyków. Każdy nawyk ma emoji, nazwę, checkbox i kolorowy pasek. Formularz dodawania z wyborem emoji i koloru. Podsumowanie dnia na dole.
Weryfikacja
- Lista nawyków się wyświetla z emoji i kolorami
- Formularz dodawania jest widoczny
- Checkboxy są widoczne (ale jeszcze nie działają)
- Podsumowanie dnia jest na dole
- Na telefonie wygląda dobrze
Co się tu uczysz
- Emoji jako ikony - zero bibliotek, zero Font Awesome. Emoji są uniwersalnie wspierane i wystarczają do ikon w 90% przypadków.
- CSS custom properties (zmienne) - kolor każdego nawyku to zmienna CSS. Zmiana jednej wartości zmienia cały wiersz.
- Predefiniowane opcje - buttony z emoji i kółka z kolorami zamiast pól tekstowych. Ograniczasz wybór = lepszy UX.
Krok 2: Interakcje + localStorage (Prompt #2)
Stan aplikacji: Piękny dashboard ze statycznymi nawykami. Nic nie działa - checkboxy nie reagują, formularz nie dodaje.
Czas na ten krok: ~5 minut
Najważniejszy krok. Dodajemy CRUD (dodaj, usuń nawyk), zaznaczanie "wykonane" i localStorage. Po tym kroku tracker jest używalny.
Prompt do skopiowania
Wklej do Claude (w tej samej rozmowie):
<context>
Mam statyczny tracker nawyków w jednym pliku HTML.
Chcę dodać interaktywność: dodawanie nawyków, zaznaczanie
wykonanych i zapisywanie w localStorage.
</context>
<role>
Jesteś frontend developerem specjalizującym się w aplikacjach
z client-side storage i zarządzaniu stanem.
</role>
<intent>
Dodaj logikę trackera:
1. Dodawanie nawyku:
- Klik "Dodaj nawyk" tworzy nowy nawyk z wybranym
emoji, kolorem i nazwą
- Walidacja: nazwa nie może być pusta
- Po dodaniu formularz się czyści
2. Usuwanie nawyku:
- Przycisk X na każdym nawyku (z confirm)
3. Zaznaczanie "Wykonane dzisiaj":
- Checkbox zmienia status nawyku na dziś
- Zaznaczony nawyk: przekreślony tekst + zielony checkmark
- Podsumowanie dnia aktualizuje się natychmiast
4. Dwa oddzielne zbiory danych w localStorage:
- "habits_v1_list": tablica nawyków
[{id, name, emoji, color, createdAt}]
- "habits_v1_entries": tablica wpisów
[{habitId, date (ISO string YYYY-MM-DD), completed: bool}]
5. Przy starcie: załaduj dane z localStorage.
Jeśli brak - wstaw przykładowe nawyki
</intent>
<scope>
- Zaktualizuj istniejący plik HTML
- Oddziel nawyki (definicje) od wpisów (dzienne wykonania)
- Nawyki to "co śledzę"
- Wpisy to "kiedy wykonałem"
- Porównuj daty jako ISO strings (YYYY-MM-DD),
nie obiekty Date (unikanie timezone bugs)
- Zapisuj po każdej zmianie
- Zachowaj cały istniejący wygląd
</scope>
<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML.
Zachowaj cały istniejący wygląd i dodaj interaktywność.
</precision>Co się zmieni
Tracker ożywa. Dodajesz nawyk - pojawia się na liście. Zaznaczasz checkbox - nawyk się przekreśla, podsumowanie się aktualizuje. Odświeżasz stronę - dane nadal są.
Weryfikacja
- Dodaj nowy nawyk z formularza - pojawia się na liście
- Zaznacz checkbox - nawyk się przekreśla, procent rośnie
- Odśwież stronę (F5) - nawyki i zaznaczenia nadal są
- Usuń nawyk (X) - znika po potwierdzeniu
Co się tu uczysz
- Separacja danych - nawyki (definicje) i wpisy (wykonania) to dwa osobne zbiory. Nawyki się rzadko zmieniają. Wpisy rosną codziennie. Oddzielne kolekcje = szybsze filtrowanie.
- ISO date strings - "2026-04-28" jest czytelne, sortowalne i nie ma problemów z timezone. Porównujesz stringi, nie obiekty Date.
- Defensive loading -
try/catchprzy parsowaniu localStorage. Jeśli dane są uszkodzone, ładujesz domyślne. Twoja apka nigdy nie crashuje.
Krok 3: Siatka GitHub contributions (Prompt #3)
Stan aplikacji: Działający tracker - CRUD nawyków, zaznaczanie, localStorage. Ale widzisz tylko dzisiejszy stan. Brak historii.
Czas na ten krok: ~5 minut
To jest "wow moment" tego tutoriala. Siatka 52 tygodnie x 7 dni - zielone kwadraciki za każdy dzień, w którym wykonałeś nawyki. Dokładnie jak na profilu GitHub.
Jak działa siatka?
CSS Grid z jednym kluczowym trickiem: grid-auto-flow: column. To sprawia, że komórki wypełniają się kolumnami (poniedziałek-niedziela w dół), nie wierszami. Bez tego siatka wygląda źle.
Prompt do skopiowania
<context>
Mój tracker nawyków zapisuje wpisy (habit_id + date + completed)
w localStorage. Chcę dodać wizualizację roczną w stylu
GitHub contributions - siatkę 365 dni z kolorowaniem komórek
wg tego, ile nawyków wykonano danego dnia.
</context>
<role>
Jesteś frontend developerem i data visualization specialist
tworzącym siatki danych w czystym CSS Grid.
</role>
<intent>
Dodaj siatkę GitHub contributions:
1. Siatka 52-53 tygodnie x 7 dni w CSS Grid:
- KRYTYCZNE: grid-auto-flow: column
(wypełnianie kolumnami, nie wierszami)
- Komórki 14x14px z gap 3px
- Etykiety dni po lewej: Pon, Śr, Pt (co drugi dzień)
- Etykiety miesięcy na górze
2. Kolorowanie komórek wg intensywności:
- level-0: #161b22 (brak nawyków - szary)
- level-1: #0e4429 (1-25% nawyków)
- level-2: #006d32 (26-50%)
- level-3: #26a641 (51-75%)
- level-4: #39d353 (76-100%)
3. Tooltip na hover (atrybut data-tooltip + CSS ::after):
"28.04.2026: 3 z 4 nawyków (75%)"
4. Dzisiejszy dzień: biała ramka
5. Legenda kolorów pod siatką ("Mniej -> Więcej")
</intent>
<scope>
- Zaktualizuj istniejący plik HTML
- Siatka nad listą nawyków (główny element wizualny)
- Generuj ostatnie 365 dni dynamicznie z JavaScript Date
- Na mobile: mniejsze komórki (10x10px), poziomy scroll
- Tooltips w czystym CSS (data-tooltip + ::after), nie title attr
- Siatka aktualizuje się po zaznaczeniu nawyku na liście
</scope>
<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj całą dotychczasową funkcjonalność.
</precision>Co dostaniesz
Siatka 365 dni z kolorowymi kwadracikami. Puste dni - szare. Dni z nawykami - różne odcienie zieleni. Najechanie na komórkę - tooltip z datą i liczbą nawyków.
Wskazówka: Siatka będzie głównie szara (bo dopiero zaczynasz śledzić). Do testów poproś Claude: "Dodaj przycisk 'Wygeneruj testowe dane' - wstaw losowe wpisy z ostatnich 90 dni do localStorage."
Weryfikacja
- Siatka jest widoczna nad listą nawyków
- Komórki układają się kolumnami (Pon-Nd w dół)
- Najechanie na komórkę pokazuje tooltip z datą
- Zaznacz nawyk na dzisiaj - dzisiejsza komórka zmieni kolor
- Na telefonie siatka jest przewijalna w poziomie
Jeśli komórki układają się wierszami zamiast kolumnami:
"Siatka wygląda źle - komórki są w wierszach. Dodaj grid-auto-flow: column do kontenera siatki. To KRYTYCZNE dla poprawnego wyglądu."
Co się tu uczysz
- CSS Grid -
grid-template-rows: repeat(7, 14px)+grid-auto-flow: column= siatka kalendarzowa. Dwie właściwości CSS. Potężny efekt. - Dynamiczne generowanie dat - JavaScript
DateAPI: cofnij 365 dni, iteruj dzień po dniu, generuj komórki. Klasyczne ćwiczenie z dat. - CSS tooltips -
::afterpseudo-element zcontent: attr(data-tooltip). Zero JavaScript dla tooltipów.
Krok 4: Statystyki - streak i procenty (Prompt #4)
Stan aplikacji: Tracker z siatką GitHub. Widzisz kolorowe kwadraciki. Ale nie wiesz: ile dni z rzędu ćwiczysz? Jaki masz procent w tym tygodniu?
Czas na ten krok: ~5 minut
Statystyki to serce gamifikacji. Streak counter (ile dni z rzędu) to najpotężniejszy motywator - nikt nie chce przerwać serii.
Prompt do skopiowania
<context>
Mój tracker nawyków ma listę z checkboxami, localStorage
i siatkę GitHub. Chcę dodać panel statystyk dla każdego
nawyku - streak, procenty, najlepszy wynik.
</context>
<role>
Jesteś frontend developerem z doświadczeniem w gamifikacji
i obliczeniach na datach w JavaScript.
</role>
<intent>
Dodaj panel statystyk:
1. Dla KAŻDEGO nawyku pokaż:
- Aktualny streak (ile dni z rzędu wykonany)
Streak liczy się, jeśli nawyk jest zaznaczony
dzisiaj LUB wczoraj. Brak zaznaczenia wczoraj = 0.
- Najdłuższy streak w historii
- Procent wykonania w tym tygodniu (X/7 dni)
- Procent wykonania w tym miesiącu
2. Globalne statystyki na górze:
- "Dzisiejszy progres: X z Y nawyków (Z%)" z progress barem
- "Najdłuższy globalny streak: X dni (nawyk)"
- "Łącznie wykonanych: X razy"
3. Statystyki jako karty z dużymi liczbami i małymi etykietami
4. Emoji przy streaku: 🔥 dla >7 dni, ⭐ dla >30 dni
</intent>
<scope>
- Zaktualizuj istniejący plik HTML
- Statystyki per nawyk: małe karty pod każdym nawykiem
na liście (lub rozwijane po kliknięciu)
- Globalne statystyki: panel nad siatką GitHub
- Streak obliczaj porównując ISO date strings
(YYYY-MM-DD), nie obiekty Date
- Statystyki odświeżają się natychmiast po zaznaczeniu
- Animacja: liczby "wskakują" z efektem countup
</scope>
<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj siatkę GitHub, CRUD i localStorage.
</precision>Co się zmieni
Każdy nawyk dostaje swoje statystyki. Widzisz: "Medytacja 🧘 - streak: 5 dni 🔥, tydzień: 71%, miesiąc: 65%". Na górze globalny progres. Gamifikacja działa - chcesz utrzymać streak.
Weryfikacja
- Każdy nawyk ma kartę statystyk (streak, procenty)
- Globalny progress bar na górze
- Zaznacz nawyk - statystyki się aktualizują natychmiast
- Streak jest 0, jeśli wczoraj nie zaznaczono (prawidłowo)
- Emoji 🔥 pojawia się przy streaku >7
Co się tu uczysz
- Streak algorithm - sortuj daty malejąco, sprawdzaj czy kolejna jest "wczoraj". Przerwa = koniec streaku. Prosty, ale skuteczny algorytm.
- Date arithmetic -
new Date(date).getTime() - 86400000= wczoraj. Ale porównuj ISO strings, nie timestamps (timezone safety). - Gamifikacja - streak + emoji + progress bar. Trzy elementy, które sprawiają, że użytkownik wraca. To jest wzorzec z Duolingo, Snapchat, GitHub.
Krok 5: Wykresy Chart.js (Prompt #5)
Stan aplikacji: Tracker z siatką, statystykami, strekami. Brakuje jednego: profesjonalnych wykresów. Siatka GitHub to dane roczne. Potrzebujemy tygodniowego i procentowego widoku.
Czas na ten krok: ~5 minut
Chart.js to open-source'owa biblioteka do wykresów. Ładujesz jedną linijką z CDN. 15 linijek JavaScript = profesjonalny wykres. To jest moment, gdy Twoja aplikacja wygląda jak komercyjny produkt.
Prompt do skopiowania
<context>
Mój tracker nawyków ma listę, siatkę GitHub i statystyki.
Chcę dodać profesjonalne wykresy używając Chart.js z CDN.
Dane są w localStorage (habits_v1_entries).
</context>
<role>
Jesteś frontend developerem i data visualization specialist
z doświadczeniem w Chart.js 4.x.
</role>
<intent>
Dodaj Chart.js i 2 wykresy:
1. Załaduj Chart.js z CDN:
https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js
(jeden tag script w head)
2. Wykres słupkowy (bar) - "Ostatnie 14 dni":
- Oś X: daty (DD.MM) z ostatnich 14 dni
- Oś Y: liczba wykonanych nawyków
- Słupki kolorowane gradientem zieleni
- Dzisiejszy słupek wyróżniony
- Linia średniej (annotation line)
3. Wykres pierścieniowy (doughnut) - "Ten tydzień":
- Segmenty: wykonane vs niewykonane
- Kolor: zielony (done) vs szary (not done)
- Procent w centrum wykresu
- Etykieta: "X z Y wykonanych"
4. Wykresy w sekcji pod siatką GitHub
5. Wykresy aktualizują się po zaznaczeniu nawyku
</intent>
<scope>
- Zaktualizuj istniejący plik HTML
- Chart.js 4.x z CDN (chart.umd.min.js) - nie wymaga
manualnej rejestracji komponentów (auto-register)
- Wykresy responsywne (responsive: true w opcjach)
- Ciemny motyw wykresów: białe etykiety, ciemne tło
- Wykresy obok siebie na desktopie, pionowo na mobile
- Graceful degradation: jeśli CDN nie załaduje się
(brak internetu), pokaż komunikat zamiast wykresu
</scope>
<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj całą dotychczasową funkcjonalność.
</precision>Co dostaniesz
Dwa profesjonalne wykresy. Słupkowy - ile nawyków wykonałeś w każdym z ostatnich 14 dni. Pierścieniowy - procent wykonania w tym tygodniu. Ciemny motyw. Responsywne.
Ważne: Chart.js wymaga internetu (CDN). Jeśli otworzysz plik offline - wykresy nie załadują się, ale reszta trackera będzie działać normalnie.
Weryfikacja
- Oba wykresy są widoczne
- Wykres słupkowy pokazuje 14 słupków (dni)
- Wykres pierścieniowy pokazuje procent
- Zaznacz nawyk - wykresy się aktualizują
- Na telefonie wykresy są czytelne
Jeśli wykresy nie pojawiają się:
"Wykresy Chart.js się nie ładują. Sprawdź: (1) Czy masz połączenie z internetem. (2) Czy tag script src jest poprawny. (3) Sprawdź konsolę (F12) - czy jest błąd 'Chart is not defined'."
Co się tu uczysz
- Chart.js - biblioteka do wykresów ładowana jedną linijką.
new Chart(ctx, { type: 'bar', data: {...} })= wykres. To jest standard branżowy - 60 000+ gwiazdek na GitHubie. - CDN (Content Delivery Network) - zamiast pobierać bibliotekę, ładujesz ją z serwera, który jest blisko użytkownika. Jedna linia w
<script src="...">. - Graceful degradation - sprawdź
typeof Chart !== 'undefined'przed tworzeniem wykresu. Jeśli CDN nie załadował się (offline) - pokaż komunikat zamiast crash.
Krok 6: Nawigacja dat + eksport (Prompt #6)
Stan aplikacji: Kompletny tracker z siatką, statystykami, wykresami. Ale widzisz tylko dzisiejsze nawyki. Co, jeśli zapomniałeś zaznaczyć wczoraj?
Czas na ten krok: ~5 minut
Ostatni krok. Nawigacja do poprzednich dni i eksport danych.
Prompt do skopiowania
<context>
Mój tracker nawyków jest prawie kompletny: CRUD, siatka GitHub,
statystyki, wykresy Chart.js, localStorage. Chcę dodać
nawigację między dniami i możliwość eksportu danych.
</context>
<role>
Jesteś frontend developerem z doświadczeniem w nawigacji
datami i eksporcie danych w aplikacjach klienckich.
</role>
<intent>
Dodaj nawigację dat i eksport:
1. Nawigacja dat przy liście nawyków:
- Strzałki ← → obok daty
- Kliknięcie ← pokazuje nawyki z wczoraj (cofasz dzień)
- Kliknięcie → pokazuje następny dzień (max = dziś)
- Przycisk "Dziś" wraca do bieżącego dnia
- Checkboxy pozwalają zaznaczać nawyki z przeszłości
- Data wyraźnie widoczna: "wtorek, 27 kwietnia 2026"
2. Kliknięcie na komórkę w siatce GitHub:
- Przeskakuje do tego dnia w liście nawyków
- Pozwala zaznaczać nawyki z dowolnego dnia
3. Eksport danych:
- Przycisk "Eksportuj JSON" - pobiera plik JSON
ze wszystkimi nawykami i wpisami
- Przycisk "Importuj JSON" - ładuje dane z pliku
(z potwierdzeniem: "Nadpiszesz aktualne dane")
4. Animacja przejścia między dniami (slide left/right)
</intent>
<scope>
- Zaktualizuj istniejący plik HTML
- To jest FINALNA wersja - pełna i kompletna
- Nawigacja dat: przesuwanie się dzień po dniu,
max 365 dni wstecz
- Eksport: Blob + URL.createObjectURL + download link
- Import: input type="file" + FileReader
- Zachowaj wydajność - siatka i wykresy aktualizują
się po zmianie dnia
</scope>
<precision>
Zwróć KOMPLETNY, FINALNY plik HTML. To jest ostateczna
wersja trackera nawyków - zawiera WSZYSTKO: dashboard,
CRUD, siatkę GitHub, statystyki, wykresy Chart.js,
nawigację dat, eksport/import. Pełny, gotowy do użycia kod.
</precision>Co dostaniesz
Nawigacja strzałkami - możesz wrócić do wczoraj i zaznaczyć zapomniane nawyki. Klik na siatkę - przeskakujesz do tego dnia. Eksport/import - backup danych jednym klikiem.
Weryfikacja
- Kliknij strzałkę ← - data zmieni się na wczoraj
- Zaznacz nawyk z wczoraj - siatka GitHub się zaktualizuje
- Kliknij "Dziś" - wraca do dzisiejszego dnia
- Kliknij na komórkę w siatce - nawiguje do tego dnia
- Kliknij "Eksportuj JSON" - pobierze się plik
- Na telefonie nawigacja działa dotykiem
Co się tu uczysz
- Date navigation -
date.setDate(date.getDate() - 1)cofa o dzień. Proste, ale potężne w połączeniu z UI. - File download z JavaScript -
Blob+URL.createObjectURL+ klik na<a>zdownload. Trzy linie JS = pobieranie pliku. - File upload z JavaScript -
FileReader.readAsText()+JSON.parse. Import danych bez serwera.
Efekt końcowy - co masz po 30 minutach
| Funkcja | Status |
|---|---|
| Lista nawyków z emoji i kolorami | Działa |
| Dodawanie i usuwanie nawyków | Działa |
| Zaznaczanie "wykonane" z checkboxem | Działa |
| localStorage (dane trwałe) | Działa |
| Siatka GitHub contributions (365 dni) | Działa |
| Kolorowanie komórek wg intensywności | Działa |
| Tooltips na siatce | Działa |
| Streak counter per nawyk | Działa |
| Statystyki: tydzień, miesiąc, procenty | Działa |
| Wykres słupkowy (14 dni) - Chart.js | Działa |
| Wykres pierścieniowy (tydzień) - Chart.js | Działa |
| Nawigacja do poprzednich dni | Działa |
| Zaznaczanie nawyków z przeszłości | Działa |
| Eksport/import JSON | Działa |
| Responsywny design | Działa |
Jeden plik. Twoje dane. Twoje nawyki.
Co się właśnie nauczyłeś
To był trzeci projekt w serii "Zbuduj to z AI." Trzy nowe kompetencje:
1. Zewnętrzne biblioteki z CDN
Chart.js - ładujesz jedną linijką, masz profesjonalne wykresy. Ten sam wzorzec działa z dowolną biblioteką JavaScript: Leaflet (mapy), Three.js (3D), D3.js (wizualizacje danych). Jeden <script src="..."> otwiera drzwi.
2. Wizualizacja danych w CSS
Siatka GitHub to CSS Grid z kolorowaniem komórek. Prosty CSS potrafi prezentować dane na poziomie, który wygląda jak komercyjny dashboard. Nie zawsze potrzebujesz biblioteki.
3. Praca z datami
Date API, ISO strings, streak calculation, nawigacja dniami. Daty to najtrudniejszy temat w programowaniu (timezone, DST, leap years). Nauczyłeś się bezpiecznego podejścia: porównuj stringi, nie obiekty.
5 kierunków rozbudowy
1. Przypomnienia
"Dodaj Notification API - o wybranej godzinie (np. 20:00) wyślij powiadomienie 'Czy zaznaczyłeś dzisiejsze nawyki?'. Zapisuj godzinę przypomnienia w localStorage."
2. Kategorie nawyków
"Dodaj kategorie: Zdrowie, Produktywność, Rozwój. Każdy nawyk przypisany do kategorii. Filtrowanie listy i statystyk po kategorii."
3. Cele tygodniowe
"Dodaj cele: dla każdego nawyku ustaw cel (np. 5 z 7 dni w tygodniu). Progress bar pokazujący postęp do celu. Powiadomienie po osiągnięciu."
4. Udostępnianie wyników
"Dodaj przycisk 'Udostępnij' - generuje obrazek PNG z siatką GitHub i statystykami (Canvas API + toDataURL). Gotowy do wrzucenia na social media."
5. Dark/light mode
"Dodaj przełącznik motywu. Tryb jasny: białe tło, ciemny tekst, jaśniejsze kolory siatki. Zapisuj preferencję w localStorage."
Najczęstsze problemy i rozwiązania
| Problem | Przyczyna | Rozwiązanie |
|---|---|---|
| Siatka wygląda źle (wiersze zamiast kolumn) | Brak grid-auto-flow: column | "Dodaj grid-auto-flow: column do kontenera siatki" |
| Wykresy Chart.js nie ładują się | Brak internetu (CDN) | Sprawdź połączenie. Offline = brak Chart.js |
| Streak pokazuje zły numer | Timezone bug | "Porównuj daty jako ISO strings (YYYY-MM-DD), nie obiekty Date" |
| Zaznaczenie z wczoraj nie działa | Brak nawigacji dat | To dodajemy w kroku 6 |
| Emoji nie wyświetlają się | Stara przeglądarka | Zaktualizuj przeglądarkę lub zamień emoji na tekst |
| localStorage jest pełny | Zbyt dużo danych (mało prawdopodobne) | "Dodaj przycisk 'Wyczyść dane starsze niż rok'" |
Seria "Zbuduj to z AI" - podsumowanie
To był czwarty i ostatni tutorial w tej serii (na razie). Spójrz, co zbudowałeś:
| Poziom | Projekt | Czego się nauczyłeś |
|---|---|---|
| 1 | Aplikacja pogodowa | API, fetch, async, geolokalizacja |
| 1 | Timer Pomodoro | setInterval, Web Audio, localStorage |
| 2 | Tablica Kanban | Drag & drop, CRUD, state management |
| 2 | Tracker nawyków (ten artykuł) | Chart.js, CSS Grid, date operations |
Cztery projekty. Ten sam wzorzec: opisz problem (CRISP), wklej do Claude, skopiuj kod, testuj, iteruj. Cztery razy powtórzony - teraz to jest Twój nawyk.
A nawyki, jak wiesz, trwają dłużej niż narzędzia.
Nie chodzi o nawyki. Chodzi o to, kim się stajesz.
W aplikacji pogodowej pobierałeś dane z API. W timerze Pomodoro generowałeś dane lokalne. W tablicy Kanban zarządzałeś stanem aplikacji. Dzisiaj wizualizowałeś postęp z Chart.js i CSS Grid.
Cztery projekty. Cztery różne zestawy technologii. Jeden wzorzec: opisz problem, wklej do Claude, testuj, iteruj.
Ten wzorzec nie wymaga aktualizacji. Narzędzia się zmienią. Modele AI się zmienią. Ale umiejętność "przekształć pomysł w działające narzędzie" zostanie z Tobą. I właśnie to jest najcenniejszy nawyk z całej tej serii.
Co dalej
| Chcesz... | Przeczytaj |
|---|---|
| Budować zaawansowane systemy | Vibe coding z Claude Code |
| Opanować promptowanie | Framework CRISP |
| Poznać więcej narzędzi AI | 50 narzędzi AI dla marketerów |
| 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 | Timer Pomodoro | Tablica Kanban
Chcesz więcej praktycznych frameworków AI?
Dołącz do społeczności Strategic AI Implementation - co tydzień dzielę się metodami, które testowałem na setkach wdrożeń.