Merge pull request sanscript-tech#393 from Mukulbaid63/aqi_1

tejan-singh · web-flow · commit da6a7d28f539 · 2020-11-19T22:59:40.000+05:30
AQI Detector added
diff --git a/JavaScript/AqiDetector/README.md b/JavaScript/AqiDetector/README.md
@@ -0,0 +1,6 @@
+## AQI Detector:
+- This script built in Javascript is a AQI Detector. 
+- The script automatically detects the location of the current city or the nearest city.
+- If the browser supports the geolocation feature, it didplays AQI and the location,else error message is displayed. 
+![Image](capture.JPG)
+- Output of the script. 
diff --git a/JavaScript/AqiDetector/app.js b/JavaScript/AqiDetector/app.js
@@ -0,0 +1,32 @@
+var temp = {
+    key: "943422edf7ee41eb9b0ba3854e628f08	",
+    base: "https://api.weatherbit.io/v2.0/current/airquality?"
+  }
+var notificationElement = document.querySelector(".notification");
+if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(setPosition);
+    notificationElement.innerHTML = "";
+
+}
+else {
+    notificationElement.innerHTML = "Geolocation is not supported by this browser.";
+  }
+function setPosition(position){
+    let latitude = position.coords.latitude;
+    let longitude = position.coords.longitude;
+    console.log(latitude);
+    console.log(longitude);    
+getAQI(latitude, longitude);
+  }
+function getAQI(lat,lon) {
+      fetch(`${temp.base}lat=${lat}&lon=${lon}&units=metric&key=${temp.key}`)
+        .then(aqi => {
+          return aqi.json();
+        }).then(displayResults);
+}
+function displayResults(aq){
+    let aqi=document.querySelector(".aqi");
+    aqi.innerHTML=`${aq.data[0].aqi}`;
+    let location=document.querySelector(".location");
+    location.innerHTML=`${aq.city_name},${aq.country_code}`
+}
diff --git a/JavaScript/AqiDetector/capture.JPG b/JavaScript/AqiDetector/capture.JPG
diff --git a/JavaScript/AqiDetector/index.html b/JavaScript/AqiDetector/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>AQI DETECTOR</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>AQI DETECTOR</h1>
+    
+        <div class="notification"></div>
+        <div class="loc">Your Current Location:<span class="location"></span></div>
+        <div class="aq">The AQI is:<span class="aqi"></span> micrograms per cubic meter (µg/m3)</div>
+        
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/JavaScript/AqiDetector/style.css b/JavaScript/AqiDetector/style.css
@@ -0,0 +1,29 @@
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.notification{
+   
+    font-size: 20px;
+}
+.loc{
+    margin: 10px;
+    padding: 15px;
+    font-size: 30px;
+}
+.aq{
+    margin: 10px;
+    padding: 15px;
+    font-size: 30px;
+}
+h1{
+    border-bottom: 3px black solid;
+}
+.aqi{
+    font-weight: 700;
+}
+.location{
+    font-weight: 500;
+}
