Zdarzenia w JS - Zadania
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Zadanie 1: Zmiana tekstu po kliknięciu
- Opis: Stwórz przycisk, który po kliknięciu zmieni tekst w akapicie na „Kliknięto!”.
Kod startowy:
- Oczekiwany efekt: Po kliknięciu przycisku tekst w akapicie zmienia się na „Kliknięto!”.
- Podpowiedź: Użyj zdarzenia click i zmodyfikuj textContent elementu <p>.
Zadanie 2: Licznik kliknięć z efektem wizualnym
- Opis: Stwórz przycisk, który zlicza, ile razy został kliknięty, i wyświetla wynik w akapicie. Dodatkowo, po każdym kliknięciu przycisk zmienia kolor tła na losowy.
Kod startowy:
- Oczekiwany efekt: Po każdym kliknięciu liczba w akapicie rośnie (np. „Liczba kliknięć: 1”, „Liczba kliknięć: 2” itd.), a przycisk zmienia kolor tła na losowy.
- Podpowiedź: Użyj zmiennej do liczenia kliknięć, zdarzenia click i funkcji generującej losowy kolor (np. Math.random()).
Zadanie 3: Interaktywny kwadrat z wieloma zdarzeniami:
- Opis: Stwórz kwadrat, który:
- Po kliknięciu zmienia kolor na czerwony.
- Po najechaniu myszą powiększa się o 20%.
- Po opuszczeniu myszą wraca do oryginalnego rozmiaru.
Kod startowy:
- Oczekiwany efekt: Kwadrat reaguje na kliknięcie (czerwony), najechanie myszą (powiększenie), opuszczenie myszą (powrót do rozmiaru) i naciśnięcie „b” (niebieski).
- Podpowiedź: Użyj zdarzeń click, mouseover, mouseout. Do zmiany stylu użyj style.
Zadanie 4 (na ocenę bdb): Pasek postępu przy przewijaniu:
- Opis: Stwórz pasek postępu, który wypełnia się w zależności od tego, jak daleko użytkownik przewinął stronę. Pasek powinien być widoczny na górze strony i zmieniać szerokość proporcjonalnie do przewinięcia.
Kod startowy:
- Oczekiwany efekt: Pasek na górze strony rośnie od 0% do 100% szerokości w miarę przewijania strony od góry do dołu.
- Podpowiedź: Użyj zdarzenia scroll, oblicz procent przewinięcia (window.scrollY i document.body.scrollHeight) i ustaw style.width paska w procentach.
Wskazówki do realizacji
- W każdym zadaniu wybierz elementy za pomocą document.querySelector() lub document.getElementById().
- Używaj addEventListener do nasłuchiwania zdarzeń.
- Testuj w konsoli przeglądarki, aby upewnić się, że wszystko działa.
