1949 - Project

theriturajps · Nov 29, 2024 · 234f614 · 234f614
1 parent f93f018
commit 234f614
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 0 deletions.
diff --git a/whereAmI-Project/index.html b/whereAmI-Project/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title></title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link href="./style.css" rel="stylesheet">
+	</head>
+	<body>
+
+		<h1>whereAmI</h1>
+
+		<div class="btn">
+			<button class="btn-country" type="button">whereAmI</button>
+		</div>
+
+		<div class="output"></div>
+
+	<script src="./main.js"></script>
+	</body>
+</html>
diff --git a/whereAmI-Project/main.js b/whereAmI-Project/main.js
@@ -0,0 +1,31 @@
+const btn = document.querySelector('.btn-country')
+const output = document.querySelector('.output')
+
+// NEW REVERSE GEOCODING API URL (use instead of the URL shown in videos):
+// https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}
+
+const whereAmI = function (lat, lng) {
+	const geoAPI = `https://api-bdc.io/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`
+	fetch(geoAPI)
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(`Problem in Geo Coding ${res.status}`)
+      } else {
+        return res.json()
+      }
+    })
+		.then((data) => {
+
+			const preview = `<span class="continent">Continent: ${data.continent}</span>
+			<span class="countryName">Country: ${data.countryName}</span>
+			<span class="principalSubdivision">Sub-Division: ${data.principalSubdivision}</span>
+			<span class="city">City: ${data.city}</span>
+			<span class="locality">Locality: ${data.locality}</span>
+			<span class="plusCode">PlusCode: ${data.plusCode}</span>`
+
+			output.insertAdjacentHTML('beforeend', preview)
+		})
+		.catch((err) => console.log(`😒 ${err.message} : Error)}`))
+}
+
+whereAmI(25.369203, 85.042997)
diff --git a/whereAmI-Project/style.css b/whereAmI-Project/style.css
@@ -0,0 +1,43 @@
+*{
+	margin: 0;
+}
+
+body{
+	background-color: rgba(0, 0, 0, 0.808);
+	color: aqua;
+}
+
+h1{
+	display: flexbox;
+	text-align: center;
+	margin-top: 1em;
+}
+
+.btn{
+	display: flexbox;
+	text-align: center;
+	margin-top: 1em;
+}
+
+.btn-country{
+	background-color: bisque;
+	padding: 0.5em;
+	border-radius: .4em;
+	border: none;
+	font-weight: 700;
+}
+
+.output {
+    display: grid;
+    background-color: rgb(29, 31, 30);
+    margin-top: 1em;
+    min-height: 4em;
+    max-width: 300px;
+    gap: 1em;
+    padding: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+    border: 0.2em solid rgb(255, 255, 255);
+    border-radius: 0.4em;
+    color: white;
+}