-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
76 lines (65 loc) · 2.49 KB
/
script.js
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
let searchBtn = document.getElementById("seach-button");
let inputContry = document.getElementById("inputContry");
let resultat = document.getElementById("resultat");
function logKey(e) {
if (e.which === 13) {
getUrl();
} else {
}
}
function getUrl(e) {
let countryName = inputContry.value;
let urlSearch = `https://restcountries.com/v3.1/translation/${countryName}`;
console.log(urlSearch);
fetchFunction(urlSearch);
e.preventDefault();
}
function fetchFunction(urlSearch) {
fetch(urlSearch).then((reponse) => {
console.log(reponse);
if (reponse.ok) {
reponse.json().then((data) => {
console.log(data);
let html = "";
// console.log(Object.keys(data[0].currencies));
// console.log(data[0].currencies[Object.keys(data[0].currencies)].name);
// console.log(data[0].flags.svg);
// console.log(data[0].population);
for (let index = 0; index < data.length; index++) {
html += `
<div class="items">
<div class="block-flag">
<img src= ${
data[index].flags.svg
} class="img-flag" alt="flag" />
<h3> ${data[index].translations.fra.common}</h3>
</div>
<div class="bloc-data">
<h3>Capital : <span>${data[index].capital[0]}</span></h3>
<h3>Continents : <span>${data[index].continents[0]}</span></h3>
<h3>Languages : <span>${Object.values(data[index].languages)
.toString()
.split(",")
.join(", ")}</span></h3>
<h3>Currency : <span>${Object.keys(data[index].currencies)} ( ${
data[index].currencies[Object.keys(data[index].currencies)].name
} )</span></h3>
<h3>Population : <span>${data[index].population}</span></h3>
<h3>Area : <span>${data[index].area}</span></h3>
<h3>IDD Tel : <span>${data[index].idd.root}${
data[index].idd.suffixes[0]
}</span></h3>
</div>
</div>
`;
}
resultat.innerHTML = html;
});
} else {
alert(`
${inputContry.value} is not a contry name. Search by country’s full name. It can be the common or official name`);
}
});
}
searchBtn.addEventListener("click", getUrl);
document.addEventListener("keypress", logKey);