Skip to content

Commit 4247b2f

Browse files
beggarsmindbeggarsmind
authored
Add files via upload
0 parents  commit 4247b2f

File tree

3 files changed

+309
-0
lines changed

3 files changed

+309
-0
lines changed

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<meta
7+
name="description"
8+
content="Find detailed information about countries, including flags, population, languages, and more."
9+
/>
10+
<meta name="keywords" content="country info, geography, country flags" />
11+
<meta name="author" content="Jagadheeshwaran D" />
12+
<meta property="og:title" content="Country Info Finder" />
13+
<meta
14+
property="og:description"
15+
content="Find detailed information about countries, including flags, population, languages, and more."
16+
/>
17+
<meta name="twitter:card" content="summary_large_image" />
18+
<meta name="robots" content="index, follow" />
19+
<title>Country Info Finder</title>
20+
<link rel="stylesheet" href="styles.css" />
21+
</head>
22+
<body>
23+
<div class="container">
24+
<h2>Country Info Finder</h2>
25+
<label>Enter Country Name :</label>
26+
<input type="text" id="countryInput" placeholder="Country name..." />
27+
<button onclick="getCountryInfo()">Search</button>
28+
<div id="result"></div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎script.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
async function getCountryInfo() {
2+
const country = document.getElementById('countryInput').value.trim();
3+
if (!country) {
4+
alert('Please enter a country name');
5+
return;
6+
}
7+
const apiURL = `https://restcountries.com/v3.1/name/${country}`;
8+
9+
try {
10+
const response = await fetch(apiURL);
11+
if (!response.ok) {
12+
throw new Error('Country not found');
13+
}
14+
const data = await response.json();
15+
const countryData = data[0];
16+
const mapUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBinfUCKbw0PW4qkYdDFAouoWwznkWdnH8&q=${countryData.name.common}`;
17+
18+
const wikipediaUrl = `https://en.wikipedia.org/wiki/${encodeURIComponent(
19+
countryData.name.common
20+
)}`;
21+
22+
document.getElementById('result').innerHTML = `
23+
<div class="table-container">
24+
<table>
25+
<tr><th colspan="2">Country Name: ${
26+
countryData.name.common
27+
}</th></tr>
28+
<tr><td colspan="2" style="text-align: center;"><strong>Flag : </stong><img src="${
29+
countryData.flags.svg
30+
}" class="flag" alt="Flag"></td></tr>
31+
<tr><td><strong>Capital</strong></td><td>${
32+
countryData.capital ? countryData.capital[0] : 'N/A'
33+
}</td></tr>
34+
<tr><td><strong>Region</strong></td><td>${
35+
countryData.region
36+
}</td></tr>
37+
<tr><td><strong>Subregion</strong></td><td>${
38+
countryData.subregion
39+
}</td></tr>
40+
<tr><td><strong>Population</strong></td><td>${countryData.population.toLocaleString()}</td></tr>
41+
<tr><td><strong>Languages</strong></td><td>${Object.values(
42+
countryData.languages
43+
).join(', ')}</td></tr>
44+
<tr><td><strong>Currency</strong></td><td>${
45+
Object.values(countryData.currencies)[0].name
46+
} (${
47+
Object.values(countryData.currencies)[0].symbol
48+
})</td></tr>
49+
<tr><td><strong>Timezones</strong></td><td>${countryData.timezones.join(
50+
', '
51+
)}</td></tr>
52+
<tr><td><strong>Area (sq km)</strong></td><td>${countryData.area.toLocaleString()}</td></tr>
53+
54+
</table>
55+
</div>
56+
<div class="map-container"><label class="maplabel">Country in Map:</label>
57+
<iframe src="${mapUrl}" allowfullscreen></iframe>
58+
</div>
59+
<div class="wikipedia-link">
60+
<p>For more information, visit the <a href="${wikipediaUrl}" target="_blank">Wikipedia page of ${
61+
countryData.name.common
62+
}</a>.</p>
63+
</div>
64+
`;
65+
} catch (error) {
66+
document.getElementById(
67+
'result'
68+
).innerHTML = `<p style="color: red;">${error.message}</p>`;
69+
}
70+
}

‎styles.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background: linear-gradient(to right, #74ebd5, #acb6e5);
5+
padding: 10px;
6+
}
7+
8+
.container {
9+
max-width: 1200px;
10+
margin: auto;
11+
background: white;
12+
padding: 20px;
13+
border-radius: 8px;
14+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
15+
}
16+
17+
h2 {
18+
font-family: 'Roboto', sans-serif; /* Modern and clean font */
19+
font-size: 1.9rem; /* Larger font size */
20+
color: black; /* Dark blue-gray color */
21+
text-align: center; /* Center the text */
22+
margin: 10px 0; /* Add space above and below */
23+
padding: 10px; /* Add padding inside the h2 */
24+
border-radius: 6px; /* Rounded corners */
25+
letter-spacing: 1.5px; /* Spacing between letters */
26+
font-weight: bold; /* Bold text */
27+
}
28+
29+
label {
30+
font-family: 'Arial', sans-serif; /* Clean font */
31+
font-size: 1.2rem; /* Slightly larger font for the label */
32+
color: #34495e; /* Dark gray-blue color */
33+
margin-right: 10px; /* Space between label and input */
34+
font-weight: 450; /* Bold text */
35+
}
36+
37+
input[type='text'] {
38+
width: 70%;
39+
padding: 12px; /* More padding for better appearance */
40+
margin: 10px 0;
41+
border: 2px solid #ddd;
42+
border-radius: 4px;
43+
font-size: 1.1rem;
44+
transition: all 0.3s ease; /* Smooth transition for focus effect */
45+
}
46+
47+
input[type='text']:focus {
48+
border-color: #3498db; /* Blue border on focus */
49+
outline: none;
50+
box-shadow: 0 0 10px rgba(52, 152, 219, 0.6); /* Focus shadow */
51+
}
52+
53+
input::placeholder {
54+
color: #95a5a6; /* Placeholder text color */
55+
font-style: oblique; /* Italic style for the placeholder */
56+
}
57+
58+
button {
59+
padding: 13px 20px;
60+
background: linear-gradient(
61+
to right,
62+
#3498db,
63+
#2980b9
64+
); /* Blue gradient background */
65+
color: white;
66+
border: none;
67+
border-radius: 5px;
68+
cursor: pointer;
69+
font-size: 16px;
70+
}
71+
72+
button:hover {
73+
background: linear-gradient(
74+
to right,
75+
#2980b9,
76+
#3498db
77+
); /* Reverse blue gradient on hover */
78+
}
79+
80+
table {
81+
width: 100%;
82+
border-collapse: collapse;
83+
margin-top: 20px;
84+
}
85+
86+
th,
87+
td {
88+
border: 2px solid #ddd;
89+
font-size: 1.09rem;
90+
padding: 10px;
91+
text-align: left;
92+
}
93+
94+
th {
95+
background: linear-gradient(to right, #36d1dc, #5b86e5);
96+
color: white;
97+
font-size: 1.5rem;
98+
text-align: center;
99+
}
100+
101+
.flag {
102+
width: 200px;
103+
display: block;
104+
margin: auto;
105+
border-radius: 5px;
106+
}
107+
108+
.map-container {
109+
margin-top: 30px;
110+
}
111+
.maplabel {
112+
font-family: 'Arial', sans-serif; /* Font for the label */
113+
font-size: 1.5rem; /* Font size for the label */
114+
color: #34495e; /* Dark gray-blue color */
115+
font-weight: bold; /* Bold text */
116+
display: block; /* Block display to ensure the label appears above the iframe */
117+
margin-bottom: 4px; /* Space below the label */
118+
}
119+
120+
iframe {
121+
width: 100%; /* Full width of its container */
122+
max-width: 1200px; /* Limit width for better appearance on larger screens */
123+
height: 300px; /* Fixed height for the map */
124+
border: none; /* Remove default iframe border */
125+
border-radius: 10px; /* Rounded corners */
126+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for the iframe */
127+
margin-top: 10px; /* Space above the iframe */
128+
border-radius: 4px;
129+
}
130+
.wikipedia-link {
131+
margin-top: 20px;
132+
font-size: 1.2rem;
133+
}
134+
135+
.wikipedia-link a {
136+
color: #3498db;
137+
text-decoration: none;
138+
font-weight: bold;
139+
}
140+
141+
.wikipedia-link a:hover {
142+
text-decoration: underline;
143+
}
144+
145+
@media (max-width: 768px) {
146+
h2 {
147+
font-size: 1.5rem;
148+
}
149+
150+
label,
151+
input[type='text'] {
152+
font-size: 1.1rem;
153+
}
154+
155+
input[type='text'] {
156+
width: 80%;
157+
}
158+
159+
button {
160+
padding: 12px 18px;
161+
font-size: 14px;
162+
}
163+
164+
table {
165+
font-size: 1rem;
166+
}
167+
168+
th,
169+
td {
170+
padding: 8px;
171+
}
172+
173+
iframe {
174+
height: 250px;
175+
}
176+
}
177+
178+
@media (max-width: 480px) {
179+
h2 {
180+
font-size: 1.5rem;
181+
margin-top: auto;
182+
}
183+
184+
input[type='text'] {
185+
width: 62%;
186+
font-size: 1rem;
187+
padding: 12px;
188+
}
189+
190+
button {
191+
padding: 8px 12px;
192+
font-size: 16px;
193+
}
194+
195+
table {
196+
font-size: 0.9rem;
197+
}
198+
199+
th,
200+
td {
201+
padding: 6px;
202+
}
203+
204+
iframe {
205+
height: 200px;
206+
}
207+
}

0 commit comments

Comments
 (0)