Zadania

Cel zadania: Stworzenie rozbudowanej strony internetowej o książce "Innowatorzy" Waltera Isaacsona, wykorzystującej zaawansowane elementy języka HTML, CSS do kompleksowej stylizacji oraz JavaScript do dodania interaktywnych i dynamicznych elementów. Zadanie ma na celu utrwalenie i poszerzenie umiejętności tworzenia złożonej struktury dokumentu HTML, zaawansowanego formatowania wyglądu za pomocą CSS oraz implementacji skryptów JavaScript reagujących na działania użytkownika i manipulujących treścią strony.

Wprowadzenie:

Książka "Innowatorzy" Waltera Isaacsona to nie tylko historia wynalazków, ale przede wszystkim opowieść o ludziach – ich współpracy, rywalizacji, porażkach i sukcesach, które doprowadziły do powstania cyfrowego świata. Aby w pełni oddać dynamikę tej opowieści, stworzymy stronę internetową, która nie będzie jedynie statyczną prezentacją, ale miejscem, gdzie użytkownik może wejść w interakcję z treścią.

Waszym zadaniem jest zaprojektowanie i zaimplementowanie strony, która zaprezentuje książkę w atrakcyjny i interaktywny sposób, wykorzystując pełen zakres poznanych technologii front-endowych.

Wymagania techniczne:

1. Strona powinna składać się z jednego pliku HTML (index.html).

2. Do stylizacji strony należy użyć zewnętrznego arkusza stylów CSS (style.css).

3. Do dodania interaktywności i dynamicznych elementów należy użyć zewnętrznego pliku JavaScript (script.js), podłączonego do dokumentu HTML.

4. Na stronie powinny znaleźć się grafiki związane z książką (okładka, zdjęcia kluczowych postaci, ikony itp.). Pliki graficzne powinny znajdować się w osobnym folderze (images). Zalecane użycie kilku grafik.

Elementy strony (HTML i struktura):

Strona powinna być podzielona na logiczne sekcje i zawierać co najmniej:

1. Nagłówek strony ( <h1> ): Tytuł strony.

2. Sekcja wprowadzająca: Krótkie przedstawienie książki.

3. Sekcja "O książce/Autorze": Bardziej szczegółowe informacje o treści, głównych tematach i autorze.

4. Sekcja "Kluczowe Postacie": Prezentacja wybranych, ważnych postaci opisanych w książce (np. Ada Lovelace, Alan Turing, Bill Gates, Steve Jobs, Tim Berners-Lee). Dla każdej postaci:

   • Imię i nazwisko ( <h3> ).

   • Krótkie wprowadzenie.

   • Element, który po kliknięciu/najechaniu myszą ujawni więcej szczegółów o tej postaci (np. przycisk "Więcej", nagłówek, zdjęcie). Treść szczegółowa powinna być początkowo ukryta.

5. Sekcja "Galeria/Wizualizacje": Prezentacja grafik związanych z książką lub opisywanymi wynalazkami (np. zdjęcie wczesnego komputera, układu scalonego, itp.).

6. Stopka ( <footer> ): Informacje o autorze strony i ewentualne linki.

7. Dodatkowe elementy HTML: Można użyć list ( <ul>, <ol>, <li> ), tabel ( <table> ) do zaprezentowania np. osi czasu wynalazków, czy innych znaczników semantycznych ( <article>, <aside>, <nav> ), aby poprawić strukturę.

Stylizacja (CSS):

Arkusz stylów (style.css) powinien zapewniać kompleksowe formatowanie strony, wykraczające poza podstawy. Należy zastosować co najmniej:

1. Responsywny design (media queries) - strona powinna wyglądać poprawnie na różnych rozmiarach ekranów (komputer, tablet, telefon).

2. Zaawansowane stylowanie elementów tekstowych (różne czcionki, warianty, odstępy między wierszami/literami).

3. Stylowanie sekcji strony (tła, ramki, marginesy wewnętrzne/zewnętrzne, cienie).

4. Stylowanie elementów interaktywnych (przyciski, linki) w różnych stanach ( :hover, :active ).

5. Ukrywanie początkowej treści w sekcji "Kluczowe Postacie" ( display: none; lub visibility: hidden; ).

6. Estetyczne rozmieszczenie grafik, np. przy użyciu Flexbox lub Grid do tworzenia układów galerii.

7. (Opcjonalnie) Proste animacje CSS, np. przy pojawianiu się ukrytej treści.

Funkcjonalność (JavaScript):

Plik script.js powinien implementować następujące funkcje:

1. Ujawnianie/ukrywanie treści: Po kliknięciu na element wyzwalający w sekcji "Kluczowe Postacie", powinna zostać ujawniona (lub ukryta, jeśli jest już widoczna) szczegółowa informacja o danej postaci. Należy zaimplementować to dla co najmniej dwóch postaci.

   • Wymaga dodania nasłuchiwaczy zdarzeń (addEventListener) do odpowiednich elementów.

   • Wymaga manipulacji stylem (element.style.display lub dodawanie/usuwanie klas CSS element.classList.toggle).

2. Prosta interakcja z grafiką: Po kliknięciu na grafikę w sekcji "Galeria/Wizualizacje", grafika powinna zostać zaprezentowana w inny sposób, np.:

   • Pojawienie się grafiki w większym rozmiarze w oknie modalnym (lightbox).

   • Zmiana grafiki na inną w tej samej sekcji (prosta karuzela manualna na 2-3 grafiki).

   • (Alternatywnie/Dodatkowo) Zmiana opisu pod grafiką po kliknięciu. Należy zaimplementować co najmniej jedną z tych funkcji dla minimum dwóch grafik.

3. Dowolny inny element interaktywny: Dodanie elementu JavaScript, który wzbogaci stronę, np.:

   • Wyświetlanie aktualnej daty i godziny w stopce lub nagłówku.

   • Prosty walidator (np. sprawdzający, czy pole tekstowe nie jest puste, jeśli dodacie formularz).

   • Zmiana koloru tła strony po kliknięciu przycisku.

   • Licznik kliknięć danego elementu.

   • Menu nawigacyjne, które chowa się na mniejszych ekranach i wysuwa po kliknięciu przycisku (tzw. hamburger menu) - wymaga też odpowiedniego CSS.

Instrukcje dodatkowe:

• Kod HTML, CSS i JavaScript powinien być czytelny, z odpowiednimi wcięciami i komentarzami, zwłaszcza w przypadku kodu JavaScript.

• Zmienne i funkcje w JavaScript powinny mieć sensowne nazwy.

• Należy unikać kodu JavaScript wewnątrz atrybutów HTML (np. onclick="..."). Cała logika powinna być w pliku script.js z wykorzystaniem addEventListener.

• Folder z projektem powinien być dobrze zorganizowany (plik HTML, CSS, JS w głównym folderze, grafiki w podfolderze images).