Ten artykuł jest częścią wyzwania Summer Of Code i podsumowuje 6-ty tydzień wakacyjnego challengu! jeżeli 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 wszystkich 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 interesujące 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!
