Projekty JavaScript dla początkujących: Zacznij tworzyć już dziś

Przeczytanie samouczka JavaScript a ukończenie go to dwa zupełnie różne doświadczenia.

To pierwsze daje poczucie produktywności. Przy tym drugim faktycznie się uczysz. Przebijasz się przez lekcje JS już od jakiegoś czasu, a Twój kod wciąż żyje tylko w cudzych ćwiczeniach? Cóż, już niedługo.

Wiedza o pętlach jest bezużyteczna, dopóki nie użyjesz jednej z nich, aby coś naprawdę zadziałało. Samouczki uczą Cię słów. Projekty sprawiają, że zaczynasz mówić w tym języku.

Oto 18 projektów w JavaScript dla początkujących, każdy z krótką instrukcją, abyś wiedział, od czego zacząć. Wybierz jeden, stwórz go, a potem przejdź do kolejnego.

Najpierw opanuj podstawy JavaScriptu

Wszystkie projekty JS dla początkujących opierają się na zmiennych, funkcjach, instrukcjach warunkowych, pętlach, tablicach, obiektach i kilku metodach DOM. Jeśli nie masz ich jeszcze w małym palcu, spędzisz więcej czasu na walce ze składnią niż na samym kodowaniu.

Kurs JavaScript na platformie Coddy został stworzony właśnie w tym celu. Pięciominutowe lekcje, które krok po kroku prowadzą Cię przez kluczowe zagadnienia języka. Piszesz i uruchamiasz kod bezpośrednio w przeglądarce. Bez instalacji, bez konfiguracji środowiska i bez komunikatów typu „najpierw zainstaluj Node”.

Bugsy, nasz wbudowany asystent AI, jest pod ręką podczas każdej lekcji, gdy coś pójdzie nie tak.

Jeśli potrafisz bez wahania przeczytać, napisać i wyjaśnić poniższe pojęcia, jesteś gotów. Jeśli nie, przejdź przez podstawy JS na Coddy, aż poczujesz się pewnie.

• Zmienne i typy proste (string, number, boolean)
• Instrukcje if/else oraz switch
• Pętle for, while oraz for...of
• Funkcje i funkcje strzałkowe (arrow functions)
• Tablice i popularne metody (push, pop, map, filter, find)
• Obiekty oraz notacja kropkowa i nawiasowa (dot/bracket notation)
• Podstawowy dostęp do DOM (querySelector, addEventListener, textContent)

Opanowane? Świetnie. Zaczynamy tworzyć!

Projekty na start: Witaj, DOM

Te projekty są celowo niewielkie. Opierają się na jednym lub dwóch konceptach, więc gdy coś pójdzie nie tak, szybko znajdziesz przyczynę. I hej, nie pomijaj ich tylko dlatego, że brzmią prosto!

1. Klasyczny licznik (Counter)

Co to jest: liczba na ekranie oraz przyciski plus i minus.

Dlaczego warto: najmniejsza możliwa aplikacja łącząca HTML, CSS i JavaScript. Poznasz w praktyce stan (zmienną, która się zmienia), aktualizacje DOM oraz listenery zdarzeń (event listeners). Mniej więcej dwadzieścia linii kodu.

Jak to zrobić: jeden element span na liczbę, dwa przyciski. Dodaj let count = 0. Podepnij listenery kliknięć pod każdy przycisk, aby zwiększać lub zmniejszać wartość, a następnie aktualizuj textContent spana. Dodatkowe wyzwanie: przycisk resetowania i blokada, by licznik nie schodził poniżej zera.

2. Kalkulator napiwków (Tip Calculator)

Co to jest: wpisujesz kwotę rachunku i procent napiwku, a aplikacja pokazuje wysokość napiwku oraz łączną kwotę.

Dlaczego warto: wprowadza pola formularza (inputs) oraz funkcję parseFloat, na której na początku potyka się niemal każdy. Przekonasz się też, jak łatwo zepsuć obliczenia, jeśli zapomnisz o NaN.

Jak to zrobić: dwa pola numeryczne (rachunek, procent napiwku), jeden przycisk, dwa spany wyjściowe. Po kliknięciu sparsuj oba wejścia, wykonaj obliczenia, zaokrąglij do dwóch miejsc po przecinku za pomocą .toFixed(2) i wyświetl wynik. Dodatkowe wyzwanie: opcja podziału rachunku na kilka osób.

3. Generator palet kolorów

Co to jest: klikasz przycisk i otrzymujesz losowy kolor wyświetlony jako próbka wraz z jego kodem hex.

Dlaczego warto: liczby losowe, szablony tekstowe (template literals) i style inline w jednej małej aplikacji. Wynik jest wizualny, co daje sporo frajdy.

Jak to zrobić: funkcja, która trzykrotnie zwraca losową liczbę całkowitą z przedziału od 0 do 255, a następnie tworzy ciąg znaków typu rgb(${r}, ${g}, ${b}). Ustaw go jako kolor tła próbki. Dodatkowe wyzwanie: pełna, pięciokolorowa paleta zamiast jednej próbki.

4. Generator losowych cytatów

Co to jest: przycisk, który zmienia wyświetlany cytat na losowy z przygotowanej wcześniej tablicy.

Dlaczego warto: świetny trening pracy z tablicami i Math.random, a do tego szybki sukces, którym możesz się pochwalić.

Jak to zrobić: zdefiniuj tablicę obiektów reprezentujących cytaty z polami text i author. Po kliknięciu wylosuj indeks i zaktualizuj dwa elementy na stronie. Dodatkowe wyzwanie: link „udostępnij na Twitterze”, który otwiera gotowy do opublikowania tweet.

5. Zegar cyfrowy

Co to jest: aktualny czas wyświetlany na ekranie, odświeżany co sekundę.

Dlaczego warto: tutaj po raz pierwszy zetkniesz się z setInterval oraz obiektem Date, z których będziesz korzystać nieustannie. Dodanie wiodącego zera do jednocyfrowych minut i sekund to świetna mała łamigłówka.

Jak to zrobić: funkcja, która pobiera new Date(), formatuje godziny, minuty i sekundy, a następnie wpisuje je do spana. Wywołaj ją wewnątrz setInterval(updateClock, 1000). Dodatkowe wyzwanie: przełącznik formatu 12- i 24-godzinnego.

6. Kalkulator BMI

Co to jest: wpisujesz wzrost i wagę, a w zamian otrzymujesz wskaźnik BMI oraz odpowiednią kategorię.

Dlaczego warto: praktyczny przykład użycia instrukcji warunkowych do wyboru odpowiedniej etykiety. To także okazja do poćwiczenia estetycznego układu formularza.

Jak to zrobić: pola numeryczne na wzrost (cm) i wagę (kg). Po przesłaniu formularza oblicz BMI według standardowego wzoru, użyj łańcucha if/else do przypisania kategorii i wyświetl obie wartości. Dodatkowe wyzwanie: przełącznik na jednostki imperialne.

Projekty średniozaawansowane: Więcej ruchomych elementów

Po stworzeniu kilku projektów zauważysz powtarzające się schematy. Kliknięcie przycisku zmienia zmienną, funkcja aktualizuje interfejs na podstawie tej zmiennej i tak w kółko. Na tym polega większość pracy w frontend developmencie. Poniższe projekty będą wymagały zarządzania nieco większą liczbą stanów jednocześnie.

7. Lista zadań (To-do List)

Co to jest: wpisujesz zadanie, wciskasz enter, a ono pojawia się na liście. Kliknięcie elementu oznacza go jako wykonany, a kliknięcie „X” usuwa go.

Dlaczego warto: nie bez powodu to klasyczny „Hello World” frameworków frontendowych. Będziesz operować na tablicy, renderować ją w DOM i obsługiwać dwa lub trzy zdarzenia. Jeśli potrafisz stworzyć listę zadań od zera, nie jesteś już zupełnym nowicjuszem.

Jak to zrobić: przechowuj tablicę obiektów zadań z polami id, text i done. Po każdej zmianie renderuj listę na nowo jako <ul>. Po wciśnięciu enter dodaj (push) nowe zadanie. Po kliknięciu przełącz stan done lub usuń element z tablicy za pomocą splice. Dodatkowe wyzwanie: zapisuj dane w localStorage, aby zadania nie znikały po odświeżeniu strony.

8. Stoper z międzyczasami (Stopwatch with Lap Times)

Co to jest: stoper z funkcjami startu, zatrzymania, resetu oraz przyciskiem międzyczasu (okrążenia).

Dlaczego warto: trudniejsze niż zwykły zegar, ponieważ samodzielnie zarządzasz zmienną upływającego czasu, zamiast po prostu pytać system o godzinę. Wykorzystasz Date.now(), interwały i logikę pauzowania.

Jak to zrobić: przechowuj startTime oraz akumulator elapsed. Przy starcie ustaw startTime = Date.now() i uruchom interwał. Przy zatrzymaniu wykonaj elapsed += Date.now() - startTime. Przy międzyczasie dodaj aktualny odczyt do tablicy i go wyrenderuj. Dodatkowe wyzwanie: ładne formatowanie milisekund.

9. Timer Pomodoro

Co to jest: 25 minut pracy, 5 minut przerwy i tak w kółko. Sygnał dźwiękowy informuje o zmianie trybu.

Dlaczego warto: maszyny stanów dla początkujących. Aplikacja znajduje się w stanie „praca”, „przerwa” lub „pauza”, a interfejs zmienia się w zależności od aktywnego trybu.

Jak to zrobić: ten sam schemat z interwałem co w stoperze, ale odliczający w dół. Śledź aktualny tryb. Gdy licznik osiągnie zero, zmień tryb i odtwórz krótki dźwięk za pomocą new Audio('beep.mp3').play(). Dodatkowe wyzwanie: licznik ukończonych sesji pracy w ciągu dnia.

10. Aplikacja Quizowa

Co to jest: quiz jednokrotnego wyboru, który na koniec podlicza Twój wynik.

Dlaczego warto: łączy iterację po tablicach, instrukcje warunkowe oraz prostą koncepcję „stanu ekranu” (bieżące pytanie vs. ekran wyników).

Jak to zrobić: zdefiniuj tablicę obiektów pytań z polami text, options i correctIndex. Wyświetlaj jedno pytanie na raz. Po kliknięciu odpowiedzi porównaj ją z correctIndex, zwiększ wynik i przejdź do kolejnego indeksu. Gdy pytania się skończą, pokaż ekran podsumowania. Dodatkowe wyzwanie: licznik czasu na każde pytanie.

11. Generator haseł

Co to jest: wybierasz długość oraz typy znaków, które mają się znaleźć w haśle, i otrzymujesz losowo wygenerowane bezpieczne hasło.

Dlaczego warto: operacje na ciągach znaków, losowość i obsługa pól wyboru (checkboxes) w jednym. Do tego to naprawdę przydatne narzędzie, co rzadko zdarza się przy projektach ćwiczeniowych.

Jak to zrobić: stwórz cztery zestawy znaków (małe litery, wielkie litery, cyfry, symbole). Połącz wybrane zestawy na podstawie zaznaczonych pól. Wykonaj pętlę n-razy, wybierając losowy znak z połączonej puli. Dodatkowe wyzwanie: wskaźnik siły hasła oceniający wygenerowany wynik.

12. Walidator formularzy

Co to jest: formularz rejestracji, który podświetla błędne pola na czerwono i wyświetla komunikat o błędzie pod każdym z nich.

Dlaczego warto: w prawdziwej pracy programisty JS robi się tego mnóstwo. Wyrażenia regularne (regex), zdarzenia focusu i manipulacja DOM – wszystko to w ramach klasycznego formularza.

Jak to zrobić: napisz małe funkcje walidujące dla każdego pola (wzorzec e-mail, długość hasła, zgodność haseł). Przy zdarzeniu blur (utracie fokusu) uruchom walidator, przełącz odpowiednią klasę CSS na polu i zaktualizuj span z błędem. Przy próbie wysłania formularza zablokuj akcję, jeśli którykolwiek walidator wykaże błąd. Dodatkowe wyzwanie: walidacja w czasie rzeczywistym (live validation) po pierwszej utracie fokusu.

Minigry: Tutaj zaczyna się zabawa

Gry rozwijają umiejętności jeszcze szybciej, ponieważ wymagają ciągłego zarządzania stanem, czasem i interakcjami. Gdy po raz pierwszy sprawisz, że piksele poruszą się na elemencie canvas, nagle zrozumiesz, czym tak naprawdę jest JavaScript.

13. Papier, kamień, nożyce

Co to jest: wybierasz papier, kamień lub nożyce. Komputer robi to samo. Sprawdzacie, kto wygrał.

Dlaczego warto: świetne ćwiczenie z instrukcji warunkowych i losowości, dające natychmiastową satysfakcję z wygranej lub przegranej.

Jak to zrobić: trzy przyciski dla wyboru gracza. Po kliknięciu komputer losuje jedną z trzech opcji. Użyj prostego mapowania (lub zagnieżdżonych instrukcji if/else), aby określić wynik. Śledź liczbę wygranych i przegranych rund. Dodatkowe wyzwanie: gra do trzech zwycięstw z ekranem końcowym.

14. Kółko i krzyżyk

Co to jest: klasyczna gra na siatce 3x3, w której dwóch graczy wykonuje ruchy naprzemiennie na tym samym ekranie.

Dlaczego warto: wprowadza koncepcję 9-elementowej tablicy jako płaskiej reprezentacji siatki 2D oraz logikę sprawdzania warunków wygranej. Ukończenie tak kultowej gry daje ogromną satysfakcję.

Jak to zrobić: wyrenderuj dziewięć komórek. Śledź, czyja jest kolej. Po kliknięciu w komórkę wstaw znak aktywnego gracza i sprawdź wszystkie osiem zwycięskich kombinacji. Wyświetl baner zwycięzcy, gdy ktoś wygra. Dodatkowe wyzwanie: proste AI, które losowo wybiera wolne pole.

15. Gra Memory (Memory Match)

Co to jest: siatka zakrytych kart. Klikasz dwie. Jeśli pasują, zostają odkryte. Jeśli nie, odwracają się z powrotem.

Dlaczego warto: tasowanie tablic, opóźnienia czasowe i jasny warunek wygranej. Gdy po raz pierwszy zaprogramujesz logikę „odwróć z powrotem po jednej sekundzie”, naprawdę zrozumiesz działanie setTimeout.

Jak to zrobić: podwój tablicę wartości, aby stworzyć pary, a następnie przetasuj ją algorytmem Fishera-Yatesa. Wyrenderuj zakryte karty. Po kliknięciu odkryj kartę. Gdy odkryte są dwie, porównaj je: jeśli pasują, zablokuj je; jeśli nie, odwróć obie po krótkim opóźnieniu. Zakończ grę, gdy wszystkie pary zostaną dopasowane. Dodatkowe wyzwanie: licznik ruchów i zapisywanie najlepszego wyniku w localStorage.

16. Gra w zgadywanie liczb

Co to jest: komputer losuje liczbę od 1 do 100. Ty zgadujesz, a komputer podpowiada „za dużo” lub „za mało”, dopóki nie trafisz.

Dlaczego warto: prosta gra, która uczy obsługi danych wejściowych, porównań oraz schematu „pętli aż do poprawnego wyniku”, który pojawia się niemal wszędzie.

Jak to zrobić: wygeneruj liczbę docelową. Śledź liczbę prób. Przy każdej próbie porównaj wpisaną liczbę z docelową i zaktualizuj komunikat zwrotny. Zablokuj możliwość wpisywania po trafieniu. Dodatkowe wyzwanie: ogranicz gracza do siedmiu prób i wyświetl ekran przegranej, jeśli ich zabraknie.

17. Wisielec

Co to jest: komputer losuje słowo. Zgadujesz litery jedna po drugiej. Błędne odpowiedzi powodują rysowanie kolejnych elementów wisielca.

Dlaczego warto: to projekt, dzięki któremu przestaniesz bać się operacji na ciągach znaków. Budowanie widoku „odgadniętych liter” nauczy Cię metod split, map i join za jednym zamachem.

Jak to zrobić: wylosuj słowo z tablicy. Wyświetl podkreślnik dla każdej litery. Gdy gracz wybierze literę, odkryj pasujące pozycje lub zapisz błąd. Rysuj wisielca etapami (zazwyczaj pozwala się na sześć błędów) za pomocą CSS lub elementu canvas. Dodatkowe wyzwanie: pobieraj słowa z publicznego API ze słownikiem.

18. Klasyczny Snake

Co to jest: kultowa gra w węża – zjadaj jedzenie, rośnij i unikaj zderzenia ze ścianą lub własnym ogonem.

Dlaczego warto: to ostateczny boss wśród projektów dla początkujących. Dotkniesz tu pracy z siatką (canvas lub CSS), obsługi klawiatury, pętli gry (game loop), wykrywania kolizji oraz mechaniki wzrostu.

Jak to zrobić: wyrenderuj siatkę za pomocą CSS lub <canvas>. Przechowuj węża jako tablicę obiektów z współrzędnymi. Przy każdym „tyknięciu” zegara przesuń węża o jedną komórkę w aktualnym kierunku. Jeśli nowa głowa trafi na pozycję jedzenia, wydłuż węża i wygeneruj nowe jedzenie. Jeśli głowa uderzy w ścianę lub inną część ciała węża – następuje koniec gry. Nasłuchuj klawiszy strzałek, aby zmieniać kierunek. Dodatkowe wyzwanie: przyspieszanie tempa gry wraz ze wzrostem wyniku.

Bonus: Aplikacja pogodowa

Co to jest: wpisujesz miasto, a w odpowiedzi otrzymujesz aktualną temperaturę i opis pogody.

Dlaczego warto: Twój pierwszy prawdziwy kontakt z publicznym API i kodem asynchronicznym. Dowolne darmowe API pogodowe da Ci wystarczająco dużo możliwości do zabawy.

Jak to zrobić: zdobądź darmowy klucz API. Przy wysyłaniu formularza użyj fetch z nazwą miasta w adresie URL. Poczekaj na odpowiedź (await), sparsuj JSON i zaktualizuj DOM odpowiednimi danymi. Owiń całość w blok try/catch, aby błędne nazwy miast nie psuły interfejsu. Dodatkowe wyzwanie: widok prognozy pięciodniowej.

Jak kończyć projekty, które zaczynasz

Powyższa lista na nic się nie przyda, jeśli zaczniesz połowę z nich i porzucisz resztę. Oto kilka sprawdzonych wskazówek, które pomogą Ci dokończyć to, co zacząłeś:

• Wybierz najmniejszy projekt, który Cię ekscytuje. Ekscytacja pozwala zacząć. Mały rozmiar pozwala skończyć. A potem powtórz proces.
• Ograniczaj czas, a nie zakres (Time-boxing). Daj sobie godzinę lub dwie pełnego skupienia na prosty projekt. Jeśli nie skończysz, to cenna informacja o tym, gdzie się zaciąłeś, a nie porażka.
• Najpierw buduj, potem upiększaj. Stwórz brzydką, ale działającą wersję, zanim w ogóle dotkniesz CSS. Dopracowany wizualnie, ale niedziałający kod jest gorszy niż brzydki, ale w pełni funkcjonalny.
• Unikaj skakania po samouczkach (tutorial-hopping). Oglądanie trzech różnych poradników do tego samego projektu oznacza, że tracisz czas, nie pisząc ani linijki kodu. Buduj niedoskonale, a potem wyszukuj tylko te konkretne elementy, których nie potrafisz zrobić.
• Ćwicz podstawy w dni, kiedy nie masz czasu na budowanie. Pięć minut z Coddy w autobusie to pełnoprawna sesja. Każdy dzień serii (streak) przybliża Cię do celu.

Ta ostatnia rada spaja wszystko w całość. Projekty sprawiają, że Twoja wiedza staje się namacalna, ale opierają się na fundamentach. Krótkie, codzienne lekcje sprawiają, że trudniejsze wyzwania przestaną wydawać się nieosiągalne.

Gdzie w tym wszystkim jest miejsce dla Coddy?

To nie jest reklama konkretnego narzędzia do tworzenia tych projektów. Używaj dowolnego edytora, uruchamiaj kod w przeglądarce, hostuj go, gdzie tylko chcesz.

Coddy pomaga na wcześniejszym etapie: dba o to, by Twoje podstawy JavaScriptu były na tyle solidne, by hasło „stwórz aplikację quizową” nie oznaczało „spędź dwie godziny na googlowaniu, co robi .map”.

Coddy nauczyło JavaScriptu miliony użytkowników na przeglądarkach, iOS i Androidzie. Te same lekcje, ten sam postęp i ten sam Bugsy – niezależnie od tego, gdzie otworzysz aplikację.

Darmowy pakiet obejmuje każdą lekcję JS bez konieczności konfiguracji. Jedynym ograniczeniem jest system energii, która odnawia się po kilku godzinach.

Chcesz mieć nieograniczone sesje i pomoc Bugsy'ego przy każdym pytaniu? Płatne pakiety kosztują około połowę tego, co konkurencyjne platformy. Tak czy inaczej: najpierw podstawy, potem projekty.