-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
126 lines (122 loc) · 4.6 KB
/
app.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
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
const tbody = document.getElementById("tbody");
const currentPageUpdate = document.getElementById("current-page");
const warning = document.getElementById("warning");
let currentPage = 1;
function paginate(pageNo, url = "all") {
tbody.innerHTML = "";
let len;
warning.innerHTML = "⏱️<br />Wait Data is coming Bro<br />👦";
warning.style.display = "block";
fetch(`https://restcountries.com/v3.1/${url}`)
.then((res) => res.json())
.then((data) => {
len = data?.length;
if (!len) {
warning.innerHTML = "✒️<br>Banan Thik kore lekh<br>💯";
}
data?.slice(10 * (pageNo - 1), 10 * pageNo).map((e) => setCountry(e));
console.log(len);
})
.then(() => {
currentPageUpdate.innerHTML = `
Showing
<span class="font-semibold text-gray-900 dark:text-white">${
10 * (pageNo - 1) + 1
}</span> to
<span class="font-semibold text-gray-900 dark:text-white">${Math.min(
10 * pageNo,
len
)}</span> of
<span class="font-semibold text-gray-900 dark:text-white">${len}</span>
Entries
`;
});
}
paginate(currentPage);
const setCountry = (country) => {
warning.style.display = "none";
let currency;
try {
currency = Object.entries(country.currencies)[0][1];
} catch (e) {
// console.log(e);
}
const tr = document.createElement("tr");
tr.setAttribute("data-modal-toggle", "large-modal");
tr.className =
"bg-white hover:bg-slate-100 border-b dark:bg-slate-800 dark:border-slate-700 hover:dark:bg-slate-900 group";
tr.innerHTML = `
<th
scope="row"
class="py-4 px-6 font-medium text-slate-900 whitespace-nowrap dark:text-white"
>
${country?.name?.common}
</th>
<td class="py-4 px-6"><img class='w-16' src="${
country.flags?.svg
}"/></td>
<td class="py-4 px-6">${country.capital}</td>
<td class="py-4 px-6">${
currency ? currency.name : "No Currency"
} <span class='text-lg'>${
currency && "- " + currency.symbol
}</span></td>
<td class="py-4 px-6 text-right">
<label for=${
country.cca3
} class="text-sky-500 hover:text-sky-300 cursor-pointer hover:underline">more</label>
<input type="checkbox" id=${country.cca3} class="modal-toggle" />
<label for=${country.cca3} class="modal cursor-pointer ">
<label class="modal-box w-11/12 text-lg min-h-[400px] p-20 max-w-5xl space-y-5 text-left relative" for="">
<div class='flex gap-10 items-center'>
<div>
<h3 class="text-3xl font-bold">${country.name.common}</h3>
<h3 class='text-lg font-semibold'>${
country.name.official
}</h3>
</div>
<img class='w-20' src=${country.coatOfArms.svg}/>
</div>
<div class='grid grid-cols-3 justify-start gap-5'>
<span>Language: ${Object.values(country.languages).map(
(e) => " " + e
)}</span>
<span>Population: ${country.population}</span>
<span>FIFA: ${country.fifa}</span>
</div>
<div class='grid grid-cols-3 justify-start gap-5'>
<span>Region: ${country.region}</span>
<span>Sub Region: ${country.subregion}</span>
<span>Continent: ${country.continents?.map((e) => e)}</span>
</div>
<div class='grid grid-cols-3 justify-start gap-5'>
<span>Area: ${country.area} sq. km</span>
<span>Starting Day: ${country.startOfWeek}</span>
<span>Time Zone: ${country.timezones[0]}</span>
</div>
</label>
</label>
</td>
`;
tbody.append(tr);
};
const nextPage = document
.getElementById("next-page")
.addEventListener("click", (e) => {
e.preventDefault();
if (currentPage === 25) {
alert("Tor ki mathai shomossa?");
return;
}
paginate(++currentPage); // note: if we use currentPage++ then it may pass currentPage to the function and then it may increase it's value
});
const prevPage = document
.getElementById("prev-page")
.addEventListener("click", (e) => {
e.preventDefault();
if (currentPage === 1) {
alert("Paglami koros kn?");
return;
}
paginate(--currentPage);
});