Zaawansowane Ćwiczenia HTML, CSS i JavaScript

Ćwiczenie 1: Stworzenie interaktywnego menu nawigacyjnego

Stwórz menu nawigacyjne, które będzie się zmieniać w zależności od szerokości okna przeglądarki. Wykorzystaj media queries w CSS do zmiany układu:

            <nav>
                <ul>
                    <li><a href="#home">Strona Główna</a></li>
                    <li><a href="#about">O nas</a></li>
                    <li><a href="#services">Usługi</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </nav>
        

            nav {
                background-color: #333;
                padding: 10px;
            }
            nav ul {
                list-style: none;
                display: flex;
                justify-content: space-around;
            }
            nav ul li a {
                color: white;
                text-decoration: none;
                padding: 10px;
            }
            @media (max-width: 600px) {
                nav ul {
                    flex-direction: column;
                    align-items: center;
                }
            }
        

Ćwiczenie 2: Formularz z walidacją JavaScript

Stwórz formularz kontaktowy z polem "E-mail", "Wiadomość" oraz "Przycisk wysyłania". Dodaj walidację w JavaScript, aby upewnić się, że e-mail jest poprawny, a wiadomość nie jest pusta:

            <form id="contactForm">
                <label for="email">E-mail</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Wiadomość</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit">Wyślij</button>
            </form>
        

            document.getElementById("contactForm").addEventListener("submit", function(event) {
                var email = document.getElementById("email").value;
                var message = document.getElementById("message").value;
                if (email === "" || message === "") {
                    alert("Proszę wypełnić wszystkie pola!");
                    event.preventDefault();
                } else if (!email.includes("@")) {
                    alert("Proszę podać poprawny adres e-mail!");
                    event.preventDefault();
                }
            });
        

Ćwiczenie 3: Dynamiczny formularz za pomocą JavaScript

Stwórz formularz, który dynamicznie doda nowe pola do formularza po kliknięciu przycisku "Dodaj więcej pól". Dodaj także możliwość usuwania tych pól:

            <form id="dynamicForm">
                <label for="name">Imię</label>
                <input type="text" name="name">
                <button type="button" id="addField">Dodaj więcej pól</button>
            </form>
        

            document.getElementById("addField").addEventListener("click", function() {
                var newField = document.createElement("input");
                newField.type = "text";
                newField.name = "name";
                document.getElementById("dynamicForm").appendChild(newField);
            });
        

Ćwiczenie 4: Animacja przy użyciu CSS i JavaScript

Stwórz animację, w której element strony (np. prostokąt) przesuwa się na ekranie po kliknięciu przycisku. Użyj CSS do zdefiniowania animacji oraz JavaScript do jej uruchomienia:

            <div id="animatedBox"></div>
            <button id="animateBtn">Animuj</button>
        

            #animatedBox {
                width: 100px;
                height: 100px;
                background-color: #FF5733;
                position: relative;
            }
            @keyframes moveRight {
                from { left: 0; }
                to { left: 200px; }
            }
            #animateBtn {
                margin-top: 20px;
            }
        

            document.getElementById("animateBtn").addEventListener("click", function() {
                var box = document.getElementById("animatedBox");
                box.style.animation = "moveRight 2s forwards";
            });
        

Ćwiczenie 5: Strona z responsywnym gridem

Stwórz układ strony z wykorzystaniem CSS Grid, który będzie responsywny. Układ ma zawierać 3 kolumny na szerokich ekranach i 1 kolumnę na ekranach mobilnych:

            <div class="grid-container">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
        

            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
            .item {
                background-color: #ddd;
                padding: 20px;
                text-align: center;
            }
            @media (max-width: 600px) {
                .grid-container {
                    grid-template-columns: 1fr;
                }
            }