Préparation examen !

Modifier le code : https://github.com/dupontdenis/fetch.git

Pour afficher à partir de https://ghibliapi.herokuapp.com/films

H. Miyazakis's Films

  1. The Red Turtle : Michaël Dudok de Wit
  2. When Marnie Was There : Hiromasa Yonebayashi
  3. The Tale of the Princess Kaguya : Isao Takahata
  4. The Wind Rises : Hayao Miyazaki
  5. From Up on Poppy Hill : Gorō Miyazaki
  6. Arrietty : Hiromasa Yonebayashi
  7. Ponyo : Hayao Miyazaki
  8. Tales from Earthsea : Gorō Miyazaki
  9. Howl's Moving Castle : Hayao Miyazaki
  10. The Cat Returns : Hiroyuki Morita
  11. Spirited Away : Hayao Miyazaki
  12. My Neighbors the Yamadas : Isao Takahata
  13. Princess Mononoke : Hayao Miyazaki
  14. Whisper of the Heart : Yoshifumi Kondō
  15. Pom Poko : Isao Takahata
  16. Porco Rosso : Hayao Miyazaki
  17. Only Yesterday : Isao Takahata
  18. Kiki's Delivery Service : Hayao Miyazaki
  19. My Neighbor Totoro : Hayao Miyazaki
  20. Grave of the Fireflies : Isao Takahata
  21. Castle in the Sky : Hayao Miyazaki

Directors

  1. Michaël Dudok de Wit
  2. Yoshifumi Kondō
  3. Gorō Miyazaki
  4. Hayao Miyazaki
  5. Hiroyuki Morita
  6. Isao Takahata
  7. Hiromasa Yonebayashi

H. Miyazakis's Films

  1. The Red Turtle : Michaël Dudok de Wit
  2. When Marnie Was There : Hiromasa Yonebayashi
  3. The Tale of the Princess Kaguya : Isao Takahata
  4. The Wind Rises : Hayao Miyazaki
  5. From Up on Poppy Hill : Gorō Miyazaki
  6. Arrietty : Hiromasa Yonebayashi
  7. Ponyo : Hayao Miyazaki
  8. Tales from Earthsea : Gorō Miyazaki
  9. Howl's Moving Castle : Hayao Miyazaki
  10. The Cat Returns : Hiroyuki Morita
  11. Spirited Away : Hayao Miyazaki
  12. My Neighbors the Yamadas : Isao Takahata
  13. Princess Mononoke : Hayao Miyazaki
  14. Whisper of the Heart : Yoshifumi Kondō
  15. Pom Poko : Isao Takahata
  16. Porco Rosso : Hayao Miyazaki
  17. Only Yesterday : Isao Takahata
  18. Kiki's Delivery Service : Hayao Miyazaki
  19. My Neighbor Totoro : Hayao Miyazaki
  20. Grave of the Fireflies : Isao Takahata
  21. Castle in the Sky : Hayao Miyazaki

Directors

  1. Michaël Dudok de Wit
  2. Yoshifumi Kondō
  3. Gorō Miyazaki
  4. Hayao Miyazaki
  5. Hiroyuki Morita
  6. Isao Takahata
  7. Hiromasa Yonebayashi

Films By Director

  • Michaël Dudok de Wit
    • The Red Turtle
  • Hiromasa Yonebayashi
    • When Marnie Was There
    • Arrietty
  • Gorō Miyazaki
    • From Up on Poppy Hill
    • Tales from Earthsea
  • Hiroyuki Morita
    • The Cat Returns
  • Yoshifumi Kondō
    • Whisper of the Heart
  • Isao Takahata
    • The Tale of the Princess Kaguya
    • My Neighbors the Yamadas
    • Pom Poko
    • Only Yesterday
    • Grave of the Fireflies
  • Hayao Miyazaki
    • The Wind Rises
    • Ponyo
    • Howl's Moving Castle
    • Spirited Away
    • Princess Mononoke
    • Porco Rosso
    • Kiki's Delivery Service
    • My Neighbor Totoro
    • Castle in the Sky



async function getFilms() {
    try {
        const url = 'https://ghibliapi.herokuapp.com/films';
        const filmsResponse = await fetch(`${url}`);
        const films = await filmsResponse.json();

        //Hayao Miyazaki
        films.forEach(({ director, title }) =>
            document
                .querySelector("#filmsBy")
                .insertAdjacentHTML('afterbegin', `<li ${"Hayao Miyazaki" == director ? 'class="selected"' : ""}> ${title} : ${director} </li>`))


        //find directors
        const directors = films.map(({ director }) => director);

        [... new Set(directors)]
            .sort((a, b) => {
                if (a.split(" ")[1] > b.split(" ")[1])
                    return -1;
                else
                    return 1;
            })
            .forEach((director) => {
                document
                    .querySelector("#directors")
                    .insertAdjacentHTML('afterbegin', `<li> ${director} </li>`)
            })

        //directors's films
        const directorsFilms = films.reduce((a, { director, title }) => {
            if (!a[director]) a[director] = [];
            a[director].push(title);
            return a;
        }, []);


        //views
        Object.entries(directorsFilms).forEach(([director, films]) => {
            const tempLi = document.createElement('li')
                , tempUl = document.createElement('ul');

            films.forEach((film) => tempUl.insertAdjacentHTML('afterbegin', `<li> ${film} </li>`))
           
            tempLi.insertAdjacentElement('beforeend', tempUl)
                .insertAdjacentText('beforebegin', `${director}`)

            document
                .querySelector("#directorsfilmsList")
                .insertAdjacentElement('afterbegin', tempLi)

        })

    } catch (error) {
        console.log(error);
    }
}

getFilms();




Application :


https://github.com/dupontdenis/filmsGhibliDirectors.git