JavaScript

V tomto cvičení si vyzkoušíte:

• načíst seznam filmů ze serveru,
• postupně projít získaná data,
• vypsat jednotlivé filmy do stránky.

Vytvořte si repozitář ze šablony projekt-Filmy, ve kterém máte připravený prázdný projekt se vzorovým HTML a CSS.

Seznam filmů

Ve cvičení budete načítat filmy ze serverového API. K API existuje jednoduchá dokumentace, kde se dozvíte vše potřebné.

Nám pro toto cvičení bude stačit získat přehled filmů z adresy:

https://apps.kodim.cz/daweb/trening-api/apis/movie-api/movies

1. Z adresy uvedené výše načtěte seznam filmů pomocí funkce fetch a výsledek si uložte do proměnné.
2. Vypište proměnnou do konzole prohlížeče a podívejte se, jak data vypadají. Jde o pole objektů, kde každý objekt představuje jeden film. Objekt vypadá následovně:

   {
     "id": 1,
     "title": "Vykoupení z věznice Shawshank",
     "url": "https://www.csfd.cz/film/2294-vykoupeni-z-veznice-shawshank",
     "posterUrl": "https://image.pmgstatic.com/cache/resized/w360/files/images/film/posters/162/505/162505167_735db9.jpg",
     "genres": ["drama", "krimi"],
     "year": 1994
   }
   

3. Vidíte, že každý film má id, název, odkaz na popis filmu na ČSFD, obrázek filmu, rok vydání a také pole, které obsahuje seznam žánrů, do kterých film patří.
4. Vytvořte funkci showMovies, která bude vypisovat seznam filmů. Ve funkci pomocí metody pole forEach projděte postupně seznam filmů a vypište do konzole prohlížeče vždy jenom název filmu. Pokud vše funguje, měli byste pod sebou vidět názvy všech filmů v seznamu.
5. Když nyní víme, že se nám filmy správně načetly ze serveru a že je umíme projít, můžeme přistoupit k jejich vypsání do stránky místo do konzole prohlížeče.
6. Když se podíváte do připraveného HTML, uvidíte v něm <div id="movies"></div>. Uvnitř tohoto divu najdete zakomentovaný kus HTML kódu pro jeden film. Tento HTML kód budeme do stránky přidávat pro každý film místo vypisování jeho názvu do konzole uvnitř funkce showMovies.
7. Pomocí document.querySelector najděte ve stránce prvek s id="movies" a uložte si ho do proměnné s názvem movieList.
8. V cyklu forEach uvnitř funkce showMovies si do proměnné uložte HTML kód pro jeden film (zakomentovaný vzor z HTML souboru) a doplňte do něho na příslušných místech název filmu, adresu obrázku a rok vydání. Řádek s žánrem filmu můžete zatím ignorovat nebo úplně vynechat.
9. Obsah proměnné přidejte do innerHTML elementu uloženého v proměnné movieList.
10. Na stránce byste měli vidět přehled filmů, kde je vždy obrázek filmu a pod ním jeho název a rok vydání.

Bonusy

1. Udělejte z názvu filmu odkaz, který povede na recenzi na ČSFD. V datech je adresa uložená ve vlastnosti url.
2. Vypište ke každému filmu i žánry, do kterého patří. Nezapomeňte, že žánry jsou v datech u každého filmu uloženy do pole.
3. Vytvořte ve vašem kódu komponentu Movie. To bude funkce pro zobrazení jednoho filmu. Funkce bude na vstupu přijímat objekt filmu, který chceme zobrazit. Na výstupu bude funkce vracet jako text HTML kód pro jeden film. Upravte funkci showMovies, aby komponentu používala pro přidání filmu do stránky.
4. Destrukturujte objekt na vstupu komponenty na jednotlivé vlastnosti a upravte komponentu, aby používala takto vytvořené proměnné.
5. Seřaďte filmy abecedně podle názvu.
6. Přidejte do stránky 2 tlačítka. Na tlačítka přidejte událost při kliknutí tlačítkem myši. Jedno tlačítko seřadí filmy na stránce vzestupně a druhé sestupně podle roku vydání.