Zaawansowane Ćwiczenia HTML, CSS i JavaScript

Ćwiczenie 1: Responsywna strona internetowa (HTML + CSS)

Stwórz stronę internetową, która będzie dostosowywać swój wygląd do różnych rozdzielczości ekranu (desktop, tablet, telefon). Użyj mediów (media queries) w CSS.

            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 20px;
                }
                h1 {
                    color: #1a73e8;
                }
                @media (max-width: 768px) {
                    h1 {
                        font-size: 24px;
                    }
                }
                @media (max-width: 480px) {
                    h1 {
                        font-size: 20px;
                    }
                }
            </style>
        

            <h1>Responsywna Strona</h1>
            <p>Ten tekst zmienia rozmiar w zależności od rozdzielczości ekranu.</p>
        

Ćwiczenie 2: Formularz rejestracji użytkownika (HTML + CSS + JavaScript)

Stwórz formularz rejestracji użytkownika, który będzie miał walidację danych po stronie klienta (np. sprawdzanie, czy pole e-mail jest w odpowiednim formacie).

            <form id="registrationForm">
                <label for="name">Imię</label>
                <input type="text" id="name" name="name" required>
                <label for="email">E-mail</label>
                <input type="email" id="email" name="email" required>
                <label for="password">Hasło</label>
                <input type="password" id="password" name="password" required>
                <label for="confirmPassword">Powtórz hasło</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
                <button type="submit">Zarejestruj się</button>
            </form>
        

            document.getElementById("registrationForm").addEventListener("submit", function(event) {
                var email = document.getElementById("email").value;
                var password = document.getElementById("password").value;
                var confirmPassword = document.getElementById("confirmPassword").value;
                if (password !== confirmPassword) {
                    alert("Hasła nie pasują do siebie!");
                    event.preventDefault();
                } else if (!email.includes("@")) {
                    alert("Proszę podać poprawny adres e-mail!");
                    event.preventDefault();
                }
            });
        

Ćwiczenie 3: Gra w zgadywanie liczb (JavaScript)

Stwórz prostą grę, w której komputer losuje liczbę w zakresie od 1 do 100, a użytkownik musi zgadnąć, jaka to liczba.

            <input type="number" id="guess" placeholder="Zgadnij liczbę">
            <button id="checkButton">Sprawdź</button>
            <p id="result"></p>
        

            var numberToGuess = Math.floor(Math.random() * 100) + 1;
            document.getElementById("checkButton").addEventListener("click", function() {
                var guess = document.getElementById("guess").value;
                var result = document.getElementById("result");
                if (guess < numberToGuess) {
                    result.textContent = "Za mało!";
                } else if (guess > numberToGuess) {
                    result.textContent = "Za dużo!";
                } else {
                    result.textContent = "Brawo! Zgadłeś!";
                }
            });
        

Ćwiczenie 4: Galeria zdjęć z efektem hover (HTML + CSS)

Stwórz galerię zdjęć, w której przy najechaniu kursorem na zdjęcie pojawia się delikatny efekt przejścia (np. rozmycie lub zmiana rozmiaru).

            <div class="gallery">
                <img src="image1.jpg" class="image">
                <img src="image2.jpg" class="image">
                <img src="image3.jpg" class="image">
            </div>
        

            .gallery {
                display: flex;
                gap: 10px;
            }
            .image {
                width: 200px;
                height: 150px;
                transition: transform 0.3s, filter 0.3s;
            }
            .image:hover {
                transform: scale(1.1);
                filter: blur(2px);
            }
        

Ćwiczenie 5: System kart z animacją (HTML + CSS + JavaScript)

Stwórz system kart, które będą się animować przy przejściu kursora. Użyj CSS grid oraz animacji.

            <div class="card">
                <h4>Produkt 1</h4>
                <p>Opis produktu</p>
            </div>
            <div class="card">
                <h4>Produkt 2</h4>
                <p>Opis produktu</p>
            </div>
        

            .card {
                width: 200px;
                height: 200px;
                background-color: #f4f4f4;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: transform 0.3s;
            }
            .card:hover {
                transform: rotate(10deg);
            }
        

Ćwiczenie 6: Tryb ciemny

Dodaj przełącznik, który zmienia stronę na tryb ciemny.

            <button id="darkModeToggle">Tryb ciemny</button>
            <script>
                document.getElementById("darkModeToggle").addEventListener("click", function() {
                    document.body.classList.toggle("dark-mode");
                });
            </script>
        

Ćwiczenie 7: Dynamiczna lista

Stwórz listę, do której użytkownik może dodawać elementy.

            <input type="text" id="itemInput" placeholder="Dodaj element">
            <button id="addItem">Dodaj</button>
            <ul id="itemList"></ul>
            <script>
                document.getElementById("addItem").addEventListener("click", function() {
                    let item = document.createElement("li");
                    item.textContent = document.getElementById("itemInput").value;
                    document.getElementById("itemList").appendChild(item);
                });
            </script>