Merge pull request #26 from abiral2057/geoapi

Added @abiral2057 's file in participants. Used Geo Location API
org-45 · Oct 13, 2023 · 8531755 · 8531755
2 parents 948af82 + 2896042
commit 8531755
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 0 deletions.
diff --git a/bootcamp.html b/bootcamp.html
@@ -30,6 +30,7 @@ <h1 class="text-3xl font-bold text-heading">
 				<li><a href="./participants/manjilkoirala/clipboardApp/index.html">manjilkoirala</a></li>
 				<li><a href="./participants/rashilakhadka/rashilakhadka.html">rashilakhadka</a></li>
 				<li><a href="./participants/ankman007/index.html">ankman007</a></li>
+				<li><a href="./participants/abiral/index.html">abiral</a></li>
 			</ul>
 		</nav>
 	</div>

diff --git a/participants/abiral/app.js b/participants/abiral/app.js
@@ -0,0 +1,32 @@
+function findMe(){
+  const status  = document.querySelector("#status");
+  const coordinate = document.querySelector('#coordinate');
+  const coordinatedetail = document.querySelector('#coordinatedetail');
+
+
+  coordinate.href="";
+  coordinate.textContent="";
+
+  function success(position){
+    const latitude = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent="Success";
+    coordinate.href =`https://www.google.com/maps/@${latitude},${longitude},163m/data=!3m1!1e3?entry=ttu`
+    coordinate.textContent =`Click Here`;
+
+    coordinatedetail.textContent = `Latitude : ${latitude} , Longitude : ${longitude}`;
+
+  }
+  function error(){
+    status.textContent = "Unable to Find your Location";
+  }
+  if(!navigator.geolocation){
+    status.textContent="Geolocation NOT SUPPORTED";
+
+  }
+  else{
+    status.textContent = "Searching .... .";
+    navigator.geolocation.getCurrentPosition(success,error);
+  }
+}
diff --git a/participants/abiral/earth.gif b/participants/abiral/earth.gif
diff --git a/participants/abiral/index.html b/participants/abiral/index.html
@@ -0,0 +1,25 @@
+<!-- Using GeoAPI -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GeoLocation API</title>
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="app.js" type="text/javascript"></script>
+</head>
+<body>
+    <div class="location-title">
+           <h1 id="locationtitle">GEOLOCATION API</h1>
+    <img id="animearth" src="earth.gif" alt="Rotating Earth">
+</div>
+
+<div class="location-body">
+  <button id="search" onclick="findMe()">Find your Location <span><img  class="placeholder" src="placeholder.png"></span></button>
+    <h3 id="status">Check Status</h3>
+    <p id="coordinatedetail">Please Click Button to Get your Location  </p>
+    <span id="text"><a id="coordinate" target="_blank"></a></span>
+</div>
+
+</body>
+</html>
diff --git a/participants/abiral/placeholder.png b/participants/abiral/placeholder.png
diff --git a/participants/abiral/style.css b/participants/abiral/style.css
@@ -0,0 +1,37 @@
+
+.location-title{
+
+    display: flex;
+    justify-content: center;  
+}
+#animearth{
+    width: 120px;
+    height: 120px;
+}
+
+#locationtitle{
+    margin-top: 40px;
+}
+
+.location-body{
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+#search{
+    outline: none;
+    font-weight: 600;
+    color: cadetblue;
+    font-size: 20px;
+    outline-color: none;
+    border-radius: 4px;
+}
+.placeholder{
+    width: 20px;
+}
+body{
+    margin-top: 150px;
+}