API-Countries-Of-The-World/script.js at main · SylvieHoareau/API-Countries-Of-The-World · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//Javascript
window.onload = function() {

    let countriesData = [];
    const dataContainer = document.querySelector(".dataContainer");

    const searchInput = document.getElementById("searchInput");


    //Connexion  à l'API
    const fetchCountries = () => {
        fetch("https://restcountries.com/v3.1/all")
        .then(response => response.json())
        .then(data => {
           countriesData = data;
           displayCountries();
        })
        .catch(error => {
            console.error("Une erreur s'est produite : ", error);
        })
    };


    //Fonction pour afficher les pays
    const displayCountries = () => {
        dataContainer.innerHTML = "";
        countriesData
        .filter((country) =>
            country.translations.fra.common.toLowerCase()
            .includes(searchInput.value.toLowerCase()))
        .map((country) => {
            dataContainer.innerHTML += `
                <div class="card">
                    <div class="cardHeader">
                        ${
                            country.coatOfArms.png !== undefined
                            ? `<img id="coatOfArms" src=" ${country.coatOfArms.png}" alt="coat of Arms">`
                            : ""
                        }
                        <h1 id="name">${country.translations.fra.common}</h1>
                    </div>

                    <div class="flagContainer">
                        <img id="flag" src="${country.flags.png}" alt="${country.flags.alt}">
                        ${
                            country.flags.alt !== undefined
                            ?`<div><h2>Symbolique du drapeau : </h2><p>${country.flags.alt}</p></div>`
                            : ""
                        }
                    </div>

                    <div class="infoPays">
                        ${
                            country.capital !== undefined
                            ? `<div id="capital"><h2>Capital : </h2><p>${country.capital}<p> </div>`
                            : ""

                        }
                        <p id="population"><h2>Population :</h2> ${country.population.toLocaleString("fr-FR")} habitants</p>
                        <p id="continent"><h2>Continent :</h2> ${country.continents}</p>
                    </div>

                    <div class="cardFooter">
                        <h2>Lien vers les cartes</h2>
                        <p>Open Street Maps : <a href =" ${country.maps.openStreetMaps}"><span class="material-symbols-outlined">map</span></a></p>
                        <p>Google Maps : <a href =" ${country.maps.googleMaps}"><span class="material-symbols-outlined">location_on</span></a></p>
                    </div>
                </div>
            `
        });
    };

    searchInput.addEventListener("input", () => {
        displayCountries();
    });

    fetchCountries();

};