Zadania JS cz.II

Zadanie 1: Animowany licznik czasu do określonej daty (Countdown Timer)

Waszym zadaniem jest stworzenie animowanego licznika, który będzie odliczał czas do wybranej daty w przyszłości. Timer powinien być dynamiczny i wyświetlać aktualizowany na bieżąco czas w formacie: dni, godziny, minuty, sekundy.

Wytyczne:
Struktura HTML:

Stwórz prostą strukturę HTML, w której umieścisz elementy odpowiedzialne za wyświetlanie dni, godzin, minut i sekund.
Możesz użyć <div>, <span>, lub innych elementów HTML, aby umieścić wartości licznika na stronie.
Dodaj krótki opis lub nagłówek informujący, do jakiego wydarzenia licznik odlicza czas.

Style CSS:

Stwórz podstawowy wygląd licznika z użyciem CSS.
Możesz dodać animacje, np. zmieniające się kolory lub przeskakujące liczby.
Stylizacja powinna być estetyczna, liczby dobrze widoczne, a układ responsywny.

Logika JavaScript:

W JavaScript stwórz funkcję, która oblicza różnicę między aktualnym czasem a wybraną datą w przyszłości. Wykorzystaj obiekt Date w JavaScript do operacji na czasie.
Wynik (różnica) powinna zostać przekształcona na odpowiednią liczbę dni, godzin, minut i sekund.
Ustaw funkcję, która będzie aktualizować licznik co sekundę, używając metody setInterval.

Kroki:

Stwórz nową zmienną z datą docelową.
Oblicz różnicę między datą docelową a bieżącą datą.
Przekształć różnicę na dni, godziny, minuty i sekundy.
Wyświetl wynik w odpowiednich elementach HTML.
Ustaw, aby kod aktualizował się co sekundę.

Przykład:

—————————————-

Zadanie 2: Interaktywny suwak zmieniający tło strony

Cel zadania:

Waszym zadaniem jest stworzenie interaktywnego suwaka, który pozwoli użytkownikowi zmieniać kolor tła strony. Suwak powinien umożliwiać dynamiczne dostosowanie kolorów w czasie rzeczywistym, używając wartości RGB lub odcieni szarości.

Wytyczne:
Struktura HTML:

Stwórz prostą strukturę HTML zawierającą:
Suwak (input typu range), który kontroluje intensywność wybranego koloru.
Możliwość kontrolowania koloru poprzez trzy suwaki odpowiadające za wartości R, G i B (czerwony, zielony, niebieski) albo jedną wartość dla odcieni szarości.
Dodaj mały nagłówek lub opis wyjaśniający funkcjonalność suwaka

Style CSS:

Zadbaj o prostą i przejrzystą stylizację dla elementów suwaka i tekstu.
Zmień styl suwaków i spraw, aby były widoczne oraz łatwe w użyciu.
Stylizuj nagłówek i elementy opisu tak, aby były dobrze zrozumiałe dla użytkownika.

Logika JavaScript:

Stwórz funkcję JavaScript, która będzie reagowała na zmiany wartości suwaka i automatycznie aktualizowała kolor tła strony w czasie rzeczywistym.
Pobierz wartości z suwaków i skonwertuj je na wartości kolorów RGB.
Ustaw nowe tło dla strony na podstawie wartości suwaka i wyświetlaj aktualny kolor w postaci wartości RGB w widocznym elemencie na stronie.

Kroki:
Pobierz wartości suwaków dla czerwonego, zielonego i niebieskiego koloru.
Użyj funkcji, która po każdej zmianie suwaka aktualizuje tło strony i tekst wyświetlający obecny kolor.
Zastosuj dynamiczne zmiany tła przy każdej zmianie suwaka, aby użytkownik widział natychmiastowy efekt.

Dodatkowo:

Kolor w odcieniach szarości: Dodaj opcję odcienia szarości (np. jeden suwak kontrolujący jasność od czerni do bieli), jeśli chcesz zminimalizować kod.
Podgląd wybranego koloru: Dodaj mały kwadrat obok suwaków, który będzie na bieżąco wyświetlał kolor, na jaki zostanie ustawione tło.
Animacja: Możesz dodać delikatną animację przejścia koloru (już za pomocą transition w CSS).

Przykład: