Skip to content

Commit 0f77e42

Browse files
AtharvKasar04AtharvKasar04
committed
added/guess-the-country
1 parent eff41a5 commit 0f77e42

File tree

5 files changed

+319
-1
lines changed

5 files changed

+319
-1
lines changed

‎115 - Guess The Country/assets/favicon.png

3.76 KB
Loading

‎115 - Guess The Country/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Guess The Country using Flag</title>
7+
8+
<link rel="stylesheet" href="style.css">
9+
10+
<link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h2>Guess the Country</h2>
15+
16+
<div class="countryImg">
17+
<img id="country-flag" alt="countryFlag" src="">
18+
</div>
19+
20+
<input type="text" placeholder="Enter Country name" id="guess">
21+
<button id="submitGuess">Submit Guess</button>
22+
<p id="result">Hurray! Thats Correct!</p>
23+
<p id="empty-error"></p>
24+
<button id="nextBtn">Next</button>
25+
26+
<div class="scoreElement">
27+
<h5 id="score-guide">Correct guess = 10 points</h5>
28+
<h4 id="user-score">Your Score: <span id="user-score-val"></span></h4>
29+
</div>
30+
</div>
31+
32+
<footer>
33+
<p>&#x3c; &#47; &#x3e; with ❤️ by
34+
<a href="https://github.com/AtharvKasar04" target="_blank">Atharv Kasar</a>
35+
<br>
36+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
37+
</a>
38+
</p>
39+
</footer>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
</html>

‎115 - Guess The Country/script.js

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
const countries = [
2+
{ name: "France", flag: "https://flagcdn.com/fr.svg" },
3+
{ name: "Germany", flag: "https://flagcdn.com/de.svg" },
4+
{ name: "Italy", flag: "https://flagcdn.com/it.svg" },
5+
{ name: "Japan", flag: "https://flagcdn.com/jp.svg" },
6+
{ name: "Brazil", flag: "https://flagcdn.com/br.svg" },
7+
{ name: "United States", flag: "https://flagcdn.com/us.svg" },
8+
{ name: "Canada", flag: "https://flagcdn.com/ca.svg" },
9+
{ name: "United Kingdom", flag: "https://flagcdn.com/gb.svg" },
10+
{ name: "Australia", flag: "https://flagcdn.com/au.svg" },
11+
{ name: "China", flag: "https://flagcdn.com/cn.svg" },
12+
{ name: "India", flag: "https://flagcdn.com/in.svg" },
13+
{ name: "Mexico", flag: "https://flagcdn.com/mx.svg" },
14+
{ name: "Russia", flag: "https://flagcdn.com/ru.svg" },
15+
{ name: "South Africa", flag: "https://flagcdn.com/za.svg" },
16+
{ name: "Argentina", flag: "https://flagcdn.com/ar.svg" },
17+
{ name: "South Korea", flag: "https://flagcdn.com/kr.svg" },
18+
{ name: "Nigeria", flag: "https://flagcdn.com/ng.svg" },
19+
{ name: "Egypt", flag: "https://flagcdn.com/eg.svg" },
20+
{ name: "Spain", flag: "https://flagcdn.com/es.svg" },
21+
{ name: "Portugal", flag: "https://flagcdn.com/pt.svg" },
22+
{ name: "Netherlands", flag: "https://flagcdn.com/nl.svg" },
23+
{ name: "Sweden", flag: "https://flagcdn.com/se.svg" },
24+
{ name: "Norway", flag: "https://flagcdn.com/no.svg" },
25+
{ name: "Greece", flag: "https://flagcdn.com/gr.svg" },
26+
{ name: "Turkey", flag: "https://flagcdn.com/tr.svg" },
27+
{ name: "Saudi Arabia", flag: "https://flagcdn.com/sa.svg" },
28+
{ name: "New Zealand", flag: "https://flagcdn.com/nz.svg" },
29+
{ name: "Switzerland", flag: "https://flagcdn.com/ch.svg" },
30+
{ name: "Poland", flag: "https://flagcdn.com/pl.svg" },
31+
{ name: "Ukraine", flag: "https://flagcdn.com/ua.svg" },
32+
{ name: "Malaysia", flag: "https://flagcdn.com/my.svg" },
33+
{ name: "Thailand", flag: "https://flagcdn.com/th.svg" },
34+
{ name: "Vietnam", flag: "https://flagcdn.com/vn.svg" },
35+
{ name: "Indonesia", flag: "https://flagcdn.com/id.svg" },
36+
{ name: "Philippines", flag: "https://flagcdn.com/ph.svg" },
37+
{ name: "Pakistan", flag: "https://flagcdn.com/pk.svg" },
38+
{ name: "Bangladesh", flag: "https://flagcdn.com/bd.svg" },
39+
{ name: "Iran", flag: "https://flagcdn.com/ir.svg" },
40+
{ name: "Iraq", flag: "https://flagcdn.com/iq.svg" },
41+
{ name: "Israel", flag: "https://flagcdn.com/il.svg" },
42+
{ name: "Cuba", flag: "https://flagcdn.com/cu.svg" },
43+
{ name: "Venezuela", flag: "https://flagcdn.com/ve.svg" },
44+
{ name: "Colombia", flag: "https://flagcdn.com/co.svg" },
45+
{ name: "Peru", flag: "https://flagcdn.com/pe.svg" },
46+
{ name: "Chile", flag: "https://flagcdn.com/cl.svg" },
47+
{ name: "Morocco", flag: "https://flagcdn.com/ma.svg" },
48+
{ name: "Algeria", flag: "https://flagcdn.com/dz.svg" },
49+
{ name: "Ethiopia", flag: "https://flagcdn.com/et.svg" },
50+
{ name: "Kenya", flag: "https://flagcdn.com/ke.svg" },
51+
{ name: "Tanzania", flag: "https://flagcdn.com/tz.svg" },
52+
{ name: "Uganda", flag: "https://flagcdn.com/ug.svg" }
53+
];
54+
55+
let currentCountryIndex = 0;
56+
let currentScore = 0;
57+
58+
document.addEventListener('DOMContentLoaded', () => {
59+
const flagElement = document.getElementById('country-flag');
60+
const guessInput = document.getElementById('guess');
61+
const submitGuessButton = document.getElementById('submitGuess');
62+
const resultElement = document.getElementById('result');
63+
const nextCountryButton = document.getElementById('nextBtn');
64+
const emptyErrorVal = document.querySelector("#empty-error");
65+
const userScoreVal = document.querySelector("#user-score-val")
66+
userScoreVal.textContent = currentScore;
67+
68+
function showCountry(index) {
69+
flagElement.src = countries[index].flag;
70+
guessInput.value = '';
71+
resultElement.textContent = '';
72+
emptyErrorVal.textContent = '';
73+
}
74+
75+
function checkGuess() {
76+
const userGuess = guessInput.value.trim().toLowerCase();
77+
const correctAnswer = countries[currentCountryIndex].name.toLowerCase();
78+
if (userGuess === correctAnswer) {
79+
resultElement.textContent = 'Correct!';
80+
resultElement.style.color = 'green';
81+
currentScore += 10;
82+
userScoreVal.textContent = currentScore;
83+
} else {
84+
resultElement.textContent = `Wrong! The correct answer is ${countries[currentCountryIndex].name}.`;
85+
resultElement.style.color = 'red';
86+
}
87+
88+
}
89+
90+
function nextCountry() {
91+
currentCountryIndex = (currentCountryIndex + 1) % countries.length;
92+
showCountry(currentCountryIndex);
93+
}
94+
95+
submitGuessButton.addEventListener('click', () => {
96+
if (guessInput.value == "") {
97+
emptyErrorVal.textContent = "Input field cannot be empty";
98+
} else {
99+
checkGuess();
100+
emptyErrorVal.textContent = "";
101+
}
102+
});
103+
104+
guessInput.addEventListener('keyup', (e) => {
105+
if (e.key === 'Enter') {
106+
if (guessInput.value == "") {
107+
emptyErrorVal.textContent = "Input field cannot be empty";
108+
} else {
109+
checkGuess();
110+
emptyErrorVal.textContent = "";
111+
}
112+
}
113+
});
114+
115+
nextCountryButton.addEventListener('click', nextCountry);
116+
117+
// Show the first country on page load
118+
showCountry(currentCountryIndex);
119+
});

‎115 - Guess The Country/style.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/* Importing the Fonts */
2+
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
3+
4+
*{
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
body{
11+
background-color: #19172e;
12+
}
13+
14+
.container{
15+
/* border: 2px solid wheat; */
16+
background-color: rgba(255, 255, 255, 1);
17+
padding: 10px;
18+
width: 40%;
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
transform: translate(-50%, -50%);
23+
border-radius: 18px;
24+
display: flex;
25+
flex-direction: column;
26+
text-align: center;
27+
align-items: center;
28+
box-shadow: 3px 3px 1px darkolivegreen;
29+
}
30+
31+
.container > h2{
32+
font-family: "Lilita One", sans-serif;
33+
font-size: 3.6rem;
34+
color: #19172e;
35+
margin: 14px;
36+
}
37+
38+
#guess{
39+
padding: 8px 16px;
40+
border: 2px solid darkolivegreen;
41+
border-radius: 18px;
42+
width: 50%;
43+
margin: 10px;
44+
}
45+
46+
#submitGuess{
47+
padding: 10px 20px;
48+
color: white;
49+
font-weight: bold;
50+
font-family: sans-serif;
51+
letter-spacing: 0px;
52+
background-color: darkolivegreen;
53+
outline: none;
54+
border: none;
55+
border-radius: 4px;
56+
box-shadow: 4px 4px 0px darkkhaki;
57+
transition: 0.3s ease-in-out;
58+
margin-bottom: 8px;
59+
}
60+
61+
#submitGuess:hover{
62+
box-shadow: 0px 0px 0px;
63+
letter-spacing: 1px;
64+
cursor: pointer;
65+
}
66+
67+
#result{
68+
color: green;
69+
font-family:"Lilita one", sans-serif;
70+
font-weight: bold;
71+
font-size: 1.5rem;
72+
letter-spacing: 1px;
73+
}
74+
75+
#nextBtn{
76+
padding: 10px 40px;
77+
background-color: transparent;
78+
color: #19172e;
79+
font-weight: bold;
80+
font-family: sans-serif;
81+
letter-spacing: 0px;
82+
outline: none;
83+
border: 2px solid #19172e;
84+
border-radius: 4px;
85+
transition: 0.3s ease-in-out;
86+
}
87+
88+
#nextBtn:hover{
89+
cursor: pointer;
90+
background-color: lightgreen;
91+
border-radius: 20px;
92+
letter-spacing: 2px;
93+
}
94+
95+
#country-flag{
96+
width: 250px;
97+
border-radius: 4px;
98+
border: 2px solid #19172e;
99+
}
100+
101+
#empty-error{
102+
color: red;
103+
font-family: sans-serif;
104+
font-weight: bold;
105+
margin: 10px;
106+
}
107+
108+
.scoreElement{
109+
padding: 10px;
110+
}
111+
112+
#score-guide{
113+
color: gray;
114+
}
115+
116+
#user-score{
117+
color: #19172e;
118+
font-family: "Lilita one";
119+
font-size: 1.2rem;
120+
}
121+
122+
@media only screen and (max-width: 600px) {
123+
.container{
124+
width: 75%;
125+
}
126+
127+
.container > h2{
128+
font-size: 2rem;
129+
}
130+
131+
#country-flag{
132+
width: 150px;
133+
}
134+
135+
#guess{
136+
width: 75%;
137+
}
138+
}
139+
140+
141+
footer {
142+
text-align: center;
143+
color: white;
144+
font-size: 1rem;
145+
position: absolute;
146+
left: 0;
147+
right: 0;
148+
bottom: 0;
149+
margin-bottom: 0;
150+
padding: 5px;
151+
}
152+
153+
footer a:visited {
154+
color: inherit;
155+
}

‎30DaysOfJavaScript/script.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,8 @@ function search_project() {
187187
{ name: "Pixel to em Converter", url: "./110 - Pixel to em Converter/index.html" },
188188
{ name: "Luminosity Particle Js", url: "./111 - Luminosity Particle Js/index.html" },
189189
{ name: "Maze Game", url: "./112 - Maze Game/index.html" },
190-
{ name: "Minesweeper", url: "./113 - Minesweeper/index.html" }
190+
{ name: "Minesweeper", url: "./113 - Minesweeper/index.html" },
191+
{ name: "Guess the Country", url: "./115 - Guess The Country/index.html"}
191192

192193
];
193194

0 commit comments

Comments
 (0)