-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (331 loc) · 14.5 KB
/
index.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-EDGE" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="keywords" content="html, css, javascript" />
<meta name="author" content="Joel Anang" />
<title>Name The Flag</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body oncontextmenu="return false">
<div class="container">
<div class="content">
<h1>
<img
src="logo.png"
alt="General Knowledge Icon"
style="width: 50px; height: auto; vertical-align: middle"
/>
Name The Flag
</h1>
</div>
<!--=======================================================-->
<div class="game-container">
<div class="flag-container">
<img id="flag" src=" " alt="Flag" />
</div>
<div id="hint">Capital: <span></span>, Continent:</div>
<div id="options">
<button class="option" onclick="checkAnswer(this)">Option 1</button>
<button class="option" onclick="checkAnswer(this)">Option 2</button>
<button class="option" onclick="checkAnswer(this)">Option 3</button>
</div>
<div id="score">Score: 0</div>
<div id="total-flags">Flag: 0 / 0</div>
<div class="message"></div>
<button id="play-again" onclick="playAgain()" style="display: none">
<img src="repeat.png" alt="Play Again" width="40" height="40" />
</button>
</div>
<!--=======================================================-->
<div class="content">
<h1>How Many Countries Are There in the World?</h1>
</div>
<!--=======================================================-->
<div class="new-content">
<p>
The United Nations has
<span class="general-emphasis">193</span> member nations along with
the recognition of two independent nations namely Vatican City and
Palestine.
</p>
<!--=======================================================-->
<p>
When you include Taiwan and Kosovo, the total count becomes
<span class="general-emphasis">197</span>. Some individuals prefer to
add regions like Western Sahara and Somaliland, which have uncertain
or not universally recognized status, to round the number to
<span class="general-emphasis">200</span>. The classification of what
constitutes a "country" can vary depending on the criteria used.
</p>
</div>
<!--=======================================================-->
<main>
<div class="content">
<h1>In Alphabetical Order</h1>
</div>
<div class="new-content">
<p>
<span class="general-emphasis">A:</span> Afghanistan, Albania,
Algeria, Andorra, Angola, Antigua and Barbuda, Argentina, Armenia,
Australia, Austria, Azerbaijan
</p>
<p>
<span class="general-emphasis">B:</span> Bahamas, Bahrain,
Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bhutan,
Bolivia, Bosnia and Herzegovina, Botswana, Brazil, Brunei, Bulgaria,
Burkina Faso, Burundi
</p>
<p>
<span class="general-emphasis">C:</span> Cambodia, Cameroon, Canada,
Cape Verde, Central African Republic, Chad, Chile, China, Colombia,
Comoros, Costa Rica, Croatia, Cuba, Cyprus, Czech Republic
</p>
<p>
<span class="general-emphasis">D:</span> Democratic Republic of
Congo, Denmark, Djibouti, Dominica, Dominican Republic
</p>
<p>
<span class="general-emphasis">E:</span> East Timor, Ecuador, Egypt,
El Salvador, Equatorial Guinea, Eritrea, Estonia, Eswatini, Ethiopia
</p>
<p><span class="general-emphasis">F:</span> Fiji, Finland, France</p>
<p>
<span class="general-emphasis">G:</span> Gabon, Gambia, Georgia,
Germany, <span>Ghana</span>, Greece, Grenada, Guatemala,
Guinea-Conakry, Guinea-Bissau, Guyana
</p>
<p>
<span class="general-emphasis">H:</span> Haiti, Honduras, Hungary
</p>
<p>
<span class="general-emphasis">I:</span> Iceland, India, Indonesia,
Iran, Iraq, Ireland, Israel, Italy, Ivory Coast
</p>
<p><span class="general-emphasis">J:</span> Jamaica, Japan, Jordan</p>
<p>
<span class="general-emphasis">K:</span> Kazakhstan, Kenya,
Kiribati, Korea, North, Korea, South, Kosovo, Kuwait, Kyrgyzstan
</p>
<p>
<span class="general-emphasis">L:</span> Laos, Latvia, Lebanon,
Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg
</p>
<p>
<span class="general-emphasis">M:</span> Madagascar, Malawi,
Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania,
Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia,
Montenegro, Morocco, Mozambique, Myanmar
</p>
<p>
<span class="general-emphasis">N:</span> Namibia, Nauru, Nepal,
Netherlands, New Zealand, Nicaragua, Niger, Nigeria, North
Macedonia, Norway
</p>
<p><span class="general-emphasis">O:</span> Oman</p>
<p>
<span class="general-emphasis">P:</span> Pakistan, Palau, Palestine,
Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland,
Portugal
</p>
<p><span class="general-emphasis">Q:</span> Qatar</p>
<p>
<span class="general-emphasis">R:</span> Republic of the Congo,
Romania, Russia, Rwanda
</p>
<p>
<span class="general-emphasis">S:</span> Saint Kitts and Nevis,
Saint Lucia, Saint Vincent and the Grenadines, Samoa, San Marino,
São Tomé and Príncipe, Saudi Arabia, Senegal, Serbia, Seychelles,
Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands,
Somalia, South Africa, South Sudan, Spain, Sri Lanka, Sudan,
Suriname, Sweden, Switzerland,
</p>
<p>
<span class="general-emphasis">T:</span> Taiwan, Tajikistan,
Tanzania, Thailand, Togo, Tonga, Trinidad and Tobago, Tunisia,
Turkey, Turkmenistan, Tuvalu
</p>
<p>
<span class="general-emphasis">U:</span> Uganda, Ukraine, United
Arab Emirates, United Kingdom, United States, Uruguay, Uzbekistan
</p>
<p>
<span class="general-emphasis">V:</span> Vanuatu, Vatican City,
Venezuela, Vietnam
</p>
<p><span class="general-emphasis">Y:</span> Yemen</p>
<p><span class="general-emphasis">Z:</span> Zambia, Zimbabwe</p>
</div>
<!--=======================================================-->
<div class="content">
<h1>How Many Continents Are There in the World?</h1>
</div>
<!--=======================================================-->
<div class="new-content">
<p>
A continent is a vast, uninterrupted expanse of land typically seen
as a unified geographical area. There are a total of
<span class="general-emphasis">seven(7)</span> continents, namely
<span class="general-emphasis"
>Asia, Africa, North America, South America, Antarctica, Europe,
and Australia</span
>, listed in order of size from largest to smallest. On occasion,
Europe and Asia are combined into a single continent known as
<span class="general-emphasis">Eurasia</span>.
</p>
<!--=======================================================-->
<p>
Continents generally align with the locations of tectonic plates to
some extent. There is significant diversity in the sizes of
continents. For instance, Asia surpasses Australia in size by more
than fivefold. Greenland, the world's largest island, is
approximately just a quarter of the size of Australia. The
continents exhibit distinct levels of compactness. Africa boasts the
most uniform coastline, resulting in the lowest proportion of
coastline relative to its total area.
</p>
<!--=======================================================-->
<p>
In contrast, Europe stands out as the most irregular and indented
continent, with by far the highest ratio of coastline compared to
its total area.
</p>
<!--=======================================================-->
<p>
There are <span class="general-emphasis">49</span> countries in
<span class="general-emphasis">Asia</span>, including several
countries like Russia, Turkey, and Georgia, that are geographically
located in both Asia and Europe, and are often considered part of
Europe as well.
</p>
<!--=======================================================-->
<p>
There are <span class="general-emphasis">54</span> countries in
<span class="general-emphasis">Africa</span>, making it the
continent with the highest number of countries.
</p>
<!--=======================================================-->
<p>
There are
<span class="general-emphasis">23</span> countries in
<span class="general-emphasis">North America</span>, including
<span class="general-emphasis">7</span> countries that are part of
<span class="general-emphasis">Central America</span>.
</p>
<!--=======================================================-->
<p>
There are
<span class="general-emphasis">12</span> countries in
<span class="general-emphasis">South America</span>, each with its
own unique culture and history.
</p>
<!--=======================================================-->
<p>
There are
<span class="general-emphasis">44</span> countries in
<span class="general-emphasis">Europe</span>, including
<span class="general-emphasis">27</span> countries that are part of
the <span class="general-emphasis">European Union</span>.
</p>
</div>
</main>
</div>
<!--=======================================================-->
<!--Footer-->
<footer class="footer">
<div class="footer-content">
<div class="logo">
<a href="https://jo-erl.github.io/joelanangportfolio/" target="_blank">Joel Anang<span>.</span></a>
</div>
<p class="copyright">
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
All rights reserved
</p>
</div>
</footer>
<!--Footer end-->
<!--=======================================================-->
<!-- Back to top -->
<a id="back-to-top" href="#" onclick="scrollToTop()">
<img src="back_to_top.png" alt="Back to Top" />
</a>
<!--=======================================================-->
<script>
// Footer functionality
const footer = document.querySelector("footer");
const currentYearSpan = document.querySelector(".current-year");
// Set the current year in the footer
if (currentYearSpan) {
currentYearSpan.textContent = new Date().getFullYear();
}
function handleScroll() {
// Footer reveal animation
const footerRect = footer.getBoundingClientRect();
const windowHeight = window.innerHeight;
if (footerRect.bottom <= windowHeight + 100) {
footer.classList.add("reveal");
} else {
footer.classList.remove("reveal");
}
// Footer parallax effect
const scrollPosition = window.pageYOffset;
const parallaxOffset = scrollPosition * 0.3;
footer.style.backgroundPositionY = `${parallaxOffset}px`;
}
window.addEventListener("scroll", handleScroll);
handleScroll();
//=========================================================//
// Back to top functionality
function scrollToTop(event) {
// Prevent the default anchor behavior
event.preventDefault();
// Get the current scroll position
const startPosition = window.pageYOffset;
const startTime = performance.now();
function scrollStep(timestamp) {
const currentTime = timestamp - startTime;
const progress = Math.min(currentTime / 150, 1); // 150ms duration
window.scrollTo(0, startPosition * (1 - easeOutCubic(progress)));
if (progress < 1) {
requestAnimationFrame(scrollStep);
}
}
requestAnimationFrame(scrollStep);
}
// Easing function for smoother animation
function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}
// Show or hide the button based on scroll position
window.addEventListener("scroll", function () {
const backToTopButton = document.getElementById("back-to-top");
if (window.pageYOffset > 300) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
});
// Attach the event listener to the button
document
.getElementById("back-to-top")
.addEventListener("click", scrollToTop);
//=========================================================//
</script>
<script src="script.js"></script>
</body>
</html>