version 1.1

Has basic features of denoting weather via image, temperature and depicts the location using navigator.
Deep1Shikha · Feb 13, 2021 · 119b659 · 119b659
1 parent 6af7a28
commit 119b659
Show file tree

Hide file tree

Showing 22 changed files with 216 additions and 0 deletions.
diff --git a/icons/01d.png b/icons/01d.png
diff --git a/icons/01n.png b/icons/01n.png
diff --git a/icons/02d.png b/icons/02d.png
diff --git a/icons/02n.png b/icons/02n.png
diff --git a/icons/03d.png b/icons/03d.png
diff --git a/icons/03n.png b/icons/03n.png
diff --git a/icons/04d.png b/icons/04d.png
diff --git a/icons/04n.png b/icons/04n.png
diff --git a/icons/09d.png b/icons/09d.png
diff --git a/icons/09n.png b/icons/09n.png
diff --git a/icons/10d.png b/icons/10d.png
diff --git a/icons/10n.png b/icons/10n.png
diff --git a/icons/11d.png b/icons/11d.png
diff --git a/icons/11n.png b/icons/11n.png
diff --git a/icons/13d.png b/icons/13d.png
diff --git a/icons/13n.png b/icons/13n.png
diff --git a/icons/50d.png b/icons/50d.png
diff --git a/icons/50n.png b/icons/50n.png
diff --git a/icons/unknown.png b/icons/unknown.png
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!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">
+        <title>Weather App</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Domine&display=swap">
+        <link rel="stylesheet" href="styling/style.css" >
+    </head>
+    <body>
+       <div class="container">
+           <div class="app-title">
+                <p>Weather</p>
+           </div>
+           <div class="notification"></div>
+           <div class="weather-container">
+               <div class="weather-icon">
+                   <img src="icons/unknown.png" alt="">
+               </div>
+               <div class="temperature-value">
+                   <p>- *<span>C</span></p>
+               </div>
+               <div class="temperature-description">
+                   <p>-</p>
+               </div>
+               <div class="location">
+                   <p>-</p>
+               </div>
+           </div>
+       </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,71 @@
+//select elements
+
+const iconElement = document.querySelector(".weather-icon");
+const tempElement = document.querySelector(".temperature-value p");
+const descElement = document.querySelector(".temperature-description p");
+const locationElement = document.querySelector(".location p");
+const notificationElement = document.querySelector(".notification");
+
+//App data
+const weather = {};
+
+weather.temperature = {
+    unit : "celsius"
+}
+
+//app consts and vars
+const KELVIN = 273;
+//API KEY
+const key = "5a8832e4b680a91e82968e34fedc063a";
+
+//check if browser supports geo-location
+if('geolocation' in navigator){
+    navigator.geolocation.getCurrentPosition(setPosition, showError);
+}
+else{
+    notificationElement.style.display = "block";
+    notificationElement.innerHTML = "<p> Browser does not support geolocation</p>";
+}
+
+//set user's position
+function setPosition(position){
+    let latitude = position.coords.latitude;
+    let longitude = position.coords.longitude;
+
+    getWeather(latitude, longitude);
+}
+
+// show error when there is any issue with geolocation service
+function showError(error){
+    notificationElement.style.display = "block";
+    notificationElement.innerHTML = `<p> ${error.message} </p>`
+}
+
+//Get weather from API provider
+function getWeather(latitude, longitude){
+    let api=`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
+
+    fetch(api)
+        .then(function(response){
+            let data = response.json();
+            return data;
+        })
+        .then(function(data){
+            weather.temperature.value = Math.floor(data.main.temp - KELVIN);
+            weather.description = data.weather[0].icon;
+            weather.iconId = data.weather[0].icon;
+            weather.city = data.name;
+            weather.country = data.sys.country;
+        })
+        .then(function(){
+            displayWeather();
+        });
+} 
+
+//Display weather to UI
+function displayWeather(){
+    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png">`;  
+    tempElement.innerHTML = `${weather.temperature.value}*<span>C</span>`;
+    descElement.innerHTML = weather.description;
+    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
+}
diff --git a/styling/style.css b/styling/style.css
@@ -0,0 +1,108 @@
+*{
+    font-family: 'Domine', serif;
+}
+
+body{
+    background-color: #293251;
+}
+
+.container{
+    width: 300px;    
+    background-color: #FFF;
+
+    display: block;
+    margin: 0 auto;
+
+    border-radius: 10px;
+    padding-bottom : 50px;
+}
+
+.app-title{
+    width: 300px;
+    height: 50px;
+    border-radius: 10px 10px 0 0;
+}
+
+.app-title p{
+    text-align: center;
+    padding: 15px;
+    margin: 0 auto;
+    font-size: 1.2em;
+    color: #293251;
+}
+
+.notification{
+    background-color: #f8d7da;
+    display: none;
+}
+
+.notification p{
+    color: #721c24;
+    font-size: 1.2em;
+    margin: 0;
+    text-align: center;
+    padding: 10px 0;
+}
+
+.weather-container{
+    width: 300px;
+    height: 260px;
+    background-color: #F4F9FF;
+}
+
+.weather-icon{
+    width: 300px;
+    height: 128px;
+}
+
+.weather-icon img{
+    display: block;
+    margin: 0 auto;
+}
+
+.temperature-value{
+    width: 300px;
+    height:60px;
+}
+
+.temperature-value p{
+    padding: 0;
+    margin: 0;
+    color: #293251;
+    font-size: 4em;
+    text-align: center;
+    cursor: pointer;
+}
+
+.temperature-value p:hover{
+
+}
+
+.temperature-value span{
+    color: #293251;
+    font-size: 0.5em;
+}
+
+.temperature-description{
+
+}
+
+.temperature-description p{
+    padding: 8px;
+    margin: 0;
+    color: #293251;
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.location{
+
+}
+
+.location p{
+    margin: 0;
+    padding: 0;
+    color: #293251;
+    text-align: center;
+    font-size: 0.8em;
+}