Zadanie 50: Generator Liczby Losowej

Wstęp

W tym zadaniu stworzysz prostą, ale kompletną aplikację webową: Generator Liczb Losowych. Aplikacja będzie pobierać od użytkownika górną granicę zakresu (n), losować liczbę całkowitą od 1 do n, wyświetlać ją na ekranie oraz informować, czy jest ona parzysta czy nieparzysta.

Nauczysz się:

Obsługi zdarzeń (kliknięcie przycisku).
Pobierania wartości z pól formularza.
Generowania liczb losowych w JavaScript (Math.random).
Korzystania z operatora modulo (%) do sprawdzania parzystości.
Dynamicznej aktualizacji treści na stronie (DOM).

Gdzie umieścić kod JavaScript?

Istnieją dwa sposoby dodania skryptu do strony:

Plik zewnętrzny (zalecane): Tworzysz osobny plik (np. script.js) i łączysz go w HTML przed zamknięciem tagu </body>:
```
<script src="script.js"></script>
```
Skrypt bezpośredni: Umieszczasz kod bezpośrednio w HTML wewnątrz tagu <script>:
```
<script>
    function losuj() {
        // Twój kod tutaj
    }
</script>
```

Opis z Przykładami

1. Zdarzenie kliknięcia (onclick)

Możesz wywołać funkcję JavaScript bezpośrednio z HTML-a za pomocą atrybutu onclick:

<button onclick="losuj()">Losuj teraz</button>

Wtedy w pliku script.js musisz stworzyć taką funkcję:

function losuj() {
    console.log("Kliknięto przycisk!");
}

2. Wyświetlanie treści (innerHTML)

Właściwość innerHTML pozwala na dynamiczną zmianę zawartości elementu HTML. Możesz tam wpisywać zwykły tekst lub tagi HTML (np. pogrubienie <b>).

const element = document.getElementById("wynik");
element.innerHTML = "Wylosowana liczba to: <b>42</b>";

3. Pobieranie wartości od użytkownika (value)

Aby pobrać to, co użytkownik wpisał w pole input, używamy .value:

const n = document.getElementById("mojInput").value;

Struktura Projektu

Część 1: HTML (Struktura)

W pliku index.html stwórz szkielet aplikacji. Pamiętaj o podpięciu CSS i JS.

Wymagane elementy:

Pole typu number dla wartości n (zakres 1-n).
Przycisk "Losuj liczbę".
Miejsce na wyświetlenie wyniku (np. div lub p z id).
Miejsce na informację o parzystości.

Przykład struktury index.html z podpiętym CSS:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generator Liczb</title>
    <!-- Podpięcie zewnętrznego stylu CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h1>Generator Liczby Losowej</h1>
        
        <input type="number" id="mojInput" placeholder="Podaj zakres n">
        <button onclick="losuj()">Losuj liczbę</button>
        
        <div id="wynik"></div>
        <div id="parzystosc"></div>
    </div>

    <!-- Podpięcie skryptu JS -->
    <script src="script.js"></script>
</body>
</html>

Część 2: CSS (Wygląd)

Dodaj style, aby aplikacja wyglądała nowocześnie. Użyj Flexboxa do wyśrodkowania elementów.

Część 3: JavaScript (Logika)

To serce aplikacji.

Algorytm:

Pobierz referencję do przycisku, inputa i elementów wyświetlających wynik.
Dodaj addEventListener na kliknięcie przycisku.
W funkcji obsługującej kliknięcie:
- Pobierz wartość n z inputa.
- Wylosuj liczbę: Math.floor(Math.random() * n) + 1.
- Sprawdź parzystość: liczba % 2 === 0.
- Wstaw wyniki do odpowiednich elementów HTML.

Twoje Zadanie

Stwórz aplikację zgodnie z powyższymi wytycznymi. Postaraj się, aby wynik był czytelny i estetyczny.

Bonus (opcjonalnie):

Dodaj walidację: jeśli użytkownik wpisze liczbę mniejszą niż 1, wyświetl błąd.
Zmień kolor tekstu w zależności od parzystości (np. zielony dla parzystych, czerwony dla nieparzystych).

Warunek Zaliczenia

Po wpisaniu liczby n i naciśnięciu przycisku, na ekranie pojawia się wylosowana liczba oraz poprawna informacja o jej parzystości.

Generator Liczby Losowej + Parzystość