elmuby.github.io/script.js at main · elmuby/elmuby.github.io · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
let searchButton = document.getElementById('search-button');
let countryinp = document.getElementById('country-inp');

searchButton.addEventListener('click', () => {
    let countryName = countryinp.value;

    let url = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`;

    console.log(url);

    // fetch is used to fetch data from an api
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            console.log(data[0]);

        result.innerHTML = `
         <img src="${data[0].flags.svg}"
         class="flag-img" />

         <h2>${data[0].name.common}</h2>

         <div class="wrapper">
           <div class="data-wrapper">
            <h4>Capital:</h4>
            <span>${data[0].capital[0]}</span>
           </div>
           </div>


           <div class="wrapper">
           <div class="data-wrapper">
            <h4>Continent:</h4>
            <span>${data[0].continents[0]}</span>
           </div>
           </div>


           <div class="wrapper">
           <div class="data-wrapper">
            <h4>Population:</h4>
            <span>${data[0].population}</span>
           </div>
           </div>


        `

        });

});


// let searchBtn = document.getElementById("search-button");
// let countryInp = document.getElementById("country-inp");
// searchBtn.addEventListener("click", () => {
//   let countryName = countryInp.value;
//   let finalURL = `https://restcountries.com/v3.1/name/${countryName}?
//   fullText=true`;
//   console.log(finalURL);
//   fetch(finalURL)
//     .then((response) => response.json())
//     .then((data) => {
//         // console.log(data[0]);
//         // console.log(data[0].capital[0]);
//         // console.log(data[0].flags.svg);
//         // console.log(data[0].name.common);
//         // console.log(data[0].continents[0]);
//         // console.log(Object.keys(data[0].currencies)[0]);
//         // console.log(data[0].currencies[Object.keys(data[0].currencies)].name);
//         // console.log(
//         //   Object.values(data[0].languages).toString().split(",").join(", ")
//         // );
//       result.innerHTML = `
//         <img src="${data[0].flags.svg}" class="flag-img">
//         <h2>${data[0].name.common}</h2>
//         <div class="wrapper">
//             <div class="data-wrapper">
//                 <h4>Capital:</h4>
//                 <span>${data[0].capital[0]}</span>
//             </div>
//         </div>
//         <div class="wrapper">
//             <div class="data-wrapper">
//                 <h4>Continent:</h4>
//                 <span>${data[0].continents[0]}</span>
//             </div>
//         </div>
//          <div class="wrapper">
//             <div class="data-wrapper">
//                 <h4>Population:</h4>
//                 <span>${data[0].population}</span>
//             </div>
//         </div>
//         `;
//         // <div class="wrapper">
//         //     <div class="data-wrapper">
//         //         <h4>Currency:</h4>
//         //         <span>${
//         //           data[0].currencies[Object.keys(data[0].currencies)].name
//         //         } - ${Object.keys(data[0].currencies)[0]}</span>
//         //     </div>
//         // </div>
//         //         <div class="wrapper">
//         //     <div class="data-wrapper">
//         //         <h4>Common Languages:</h4>
//         //         <span>${Object.values(data[0].languages)
//         //           .toString()
//         //           .split(",")
//         //           .join(", ")}</span>
//         //     </div>
//         // </div>


//     })
//     // .catch(() => {
//     //   if (countryName.length == 0) {
//     //     result.innerHTML = `<h3>The input field cannot be empty</h3>`;
//     //   } else {
//     //     result.innerHTML = `<h3>Please enter a valid country name.</h3>`;
//     //   }
//     // });
// });