Zadanie: API + JavaScript

Ten artykuł jest częścią wyzwania Summer Of Code i podsumowuje 6-ty tydzień wakacyjnego challengu! Jeśli nie wiesz o co chodzi, zajrzyj do pierwszego posta zapowiadającego letni challenge #FlyNerdSummerOfCode.

Podczas ostatnich 5 dni uczyliśmy się korzystania z zewnętrznych API (na blogu: Wstęp do API dla początkujących) oraz manipulacji danymi przychodzącymi w formacie JSON. Mamy za sobą tydzień HTML i CSS, poprzedni tydzień był w temacie JavaScript. Teraz jest czas, aby zastosować te umiejętności w praktyce!

PROJEKT API:

Eksplorator Uniwersum „Gwiezdnych Wojen”

Oto ćwiczenie, które utrwali umiejętność pracy z API. Twoim zadaniem jest stworzenie aplikacji, która pozwoli użytkownikowi na eksplorację uniwersum „Gwiezdnych Wojen” dzięki API SWAPI (https://swapi.dev/documentation).

Proponowane funkcje:

• Strona główna: Wyświetla listę filmów z uniwersum „Gwiezdnych Wojen”, zawierającą tytuł, datę wydania i reżysera
• Menu: Dwie dodatkowe sekcje do eksploracji – planety i postacie
• Logowanie: Umożliwia użytkownikowi symulowane logowanie, po którym na górze strony wyświetlana jest nazwa użytkownika
• Ulubione ❤️ : Użytkownik ma możliwość dodania wybranego filmu do ulubionych, co zapisuje się w local storage

PSEUDOKOD:

Pseudkod podany tutaj to tylko sugestia, propozycja, jaka wam może pomóc w rozwiązywaniu powyższego zadania

1. Funkcja fetchMovies:
  - Wykonaj żądanie HTTP GET do SWAPI dla filmów
  - Po otrzymaniu danych, wywołaj funkcję displayMovies

2. Funkcja displayMovies(dane):
  - Iteruj przez dane o filmach
  - Dla każdego filmu, utwórz element HTML z tytułem, datą i reżyserem
  - Dodaj element do strony głównej

3. Funkcja displayMenu:
  - Dodaj do menu opcje: "Planety", "Postacie"

4. Funkcja loginUser:
  - Pobierz nazwę użytkownika i "hasło" z formularza
  - Zapisz nazwę użytkownika w local storage
  - Wyświetl nazwę użytkownika na stronie

5. Funkcja addToFavorites(filmID):
  - Zapisz ID filmu w local storage pod kluczem "ulubione"

6. Funkcja removeFromFavorites(filmID):
  - Usuń ID filmu z local storage z klucza "ulubione"

Rozszerzenia:

• Wyszukiwanie: Dodaj funkcję, która pozwoli użytkownikowi przeszukiwać filmy, postacie czy planety
• Szczegóły: Klikając na dany film, planeta czy postać, użytkownik może zobaczyć więcej informacji
• Zachęty do interakcji: Stwórz ciekawe animacje CSS/JS lub efekty przy interakcji z elementami strony

Nie zapomnij dodać opisu funkcjonalności na początku jako instrukcję korzystania z aplikacji lub w README.md swojego repozytorium (szablon github README.md).

Do kodu i powodzenia!