Weather Application And Location In JavaScript

Introduction 

 
In this article, you will learn how to create a temperature appliction and location in JavaScript.
 
Step 1
 
First open a Sublime Text editor, 
  • Open start -> Sublime Text Editor.
  • Go to file -> File -> New File
  • Name of File -> Weather app.html.
Step 2
 
Note that in the below sample, I have inserted CSS styles inside the <style> tag. You will create CSS styles for the notification and temperature value font sizes in the below code,
  1. *{  
  2.     font-family"Rimouski";  
  3. }  
  4.   
  5. body{  
  6.     background-color#293251;  
  7. }  
  8.   
  9. .container{  
  10.     width300px;      
  11.     background-color#FFF;  
  12.       
  13.     displayblock;  
  14.     margin0 auto;  
  15.       
  16.     border-radius: 10px;  
  17.     padding-bottom : 50px;  
  18. }  
  19.   
  20. .app-title{  
  21.     width300px;  
  22.     height50px;  
  23.     border-radius: 10px 10px 0 0;  
  24. }  
  25.   
  26. .app-title p{  
  27.     text-aligncenter;  
  28.     padding15px;  
  29.     margin0 auto;  
  30.     font-size1.2em;  
  31.     color#293251;  
  32. }  
  33.   
  34. .notification{  
  35.     background-color#f8d7da;  
  36.     displaynone;  
  37. }  
  38.   
  39. .notification p{  
  40.     color#721c24;  
  41.     font-size1.2em;  
  42.     margin0;  
  43.     text-aligncenter;  
  44.     padding10px 0;  
  45. }  
  46.   
  47. .weather-container{  
  48.     width300px;  
  49.     height260px;  
  50.     background-color#F4F9FF;  
  51. }  
  52.   
  53. .weather-icon{  
  54.     width300px;  
  55.     height128px;  
  56. }  
  57.   
  58. .weather-icon img{  
  59.     displayblock;  
  60.     margin0 auto;  
  61. }  
  62.   
  63. .temperature-value{  
  64.     width300px;  
  65.     height:60px;  
  66. }  
  67.   
  68. .temperature-value p{  
  69.     padding0;  
  70.     margin0;  
  71.     color#293251;  
  72.     font-size4em;  
  73.     text-aligncenter;  
  74.     cursorpointer;  
  75. }  
  76.   
  77. .temperature-value p:hover{  
  78.       
  79. }  
  80.   
  81. .temperature-value span{  
  82.     color#293251;  
  83.     font-size0.5em;  
  84. }  
  85.   
  86. .temperature-description{  
  87.       
  88. }  
  89.   
  90. .temperature-description p{  
  91.     padding8px;  
  92.     margin0;  
  93.     color#293251;  
  94.     text-aligncenter;  
  95.     font-size1.2em;  
  96. }  
  97.   
  98. .location{  
  99.       
  100. }  
  101.   
  102. .location p{  
  103.     margin0;  
  104.     padding0;  
  105.     color#293251;  
  106.     text-aligncenter;  
  107.     font-size0.8em;  

Step 3
 
Here you will use some JavaScript  along with HTML code. Just follow the steps to see how to create this temperature application. 
  1. const iconElement = document.querySelector(".weather-icon");  
  2. const tempElement = document.querySelector(".temperature-value p");  
  3. const descElement = document.querySelector(".temperature-description p");  
  4. const locationElement = document.querySelector(".location p");  
  5. const notificationElement = document.querySelector(".notification");  
  6.   
  7.   
  8. const weather = {};  
  9.   
  10. weather.temperature = {  
  11.     unit : "celsius"  
  12. }  
  13.   
  14. const KELVIN = 273;  
  15.   
  16. const key = "82005d27a116c2880c8f0fcb866998a0";  
  17.   
  18. if('geolocation' in navigator){  
  19.     navigator.geolocation.getCurrentPosition(setPosition, showError);  
  20. }else{  
  21.     notificationElement.style.display = "block";  
  22.     notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";  
  23. }  
  24.   
  25. function setPosition(position){  
  26.     let latitude = position.coords.latitude;  
  27.     let longitude = position.coords.longitude;  
  28.       
  29.     getWeather(latitude, longitude);  
  30. }  
  31.   
  32. function showError(error){  
  33.     notificationElement.style.display = "block";  
  34.     notificationElement.innerHTML = `<p> ${error.message} </p>`;  
  35. }  
  36.   
  37. function getWeather(latitude, longitude){  
  38.     let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;  
  39.       
  40.     fetch(api)  
  41.         .then(function(response){  
  42.             let data = response.json();  
  43.             return data;  
  44.         })  
  45.         .then(function(data){  
  46.             weather.temperature.value = Math.floor(data.main.temp - KELVIN);  
  47.             weather.description = data.weather[0].description;  
  48.             weather.iconId = data.weather[0].icon;  
  49.             weather.city = data.name;  
  50.             weather.country = data.sys.country;  
  51.         })  
  52.         .then(function(){  
  53.             displayWeather();  
  54.         });  
  55. }  
  56.   
  57. function displayWeather(){  
  58.     iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;  
  59.     tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;  
  60.     descElement.innerHTML = weather.description;  
  61.     locationElement.innerHTML = `${weather.city}, ${weather.country}`;  
  62. }  
  63.   
  64.   
  65. function celsiusToFahrenheit(temperature){  
  66.     return (temperature * 9/5) + 32;  
  67. }  
  68.   
  69. tempElement.addEventListener("click"function(){  
  70.     if(weather.temperature.value === undefined) return;  
  71.       
  72.     if(weather.temperature.unit == "celsius"){  
  73.         let fahrenheit = celsiusToFahrenheit(weather.temperature.value);  
  74.         fahrenheit = Math.floor(fahrenheit);  
  75.           
  76.         tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;  
  77.         weather.temperature.unit = "fahrenheit";  
  78.     }else{  
  79.         tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;  
  80.         weather.temperature.unit = "celsius"  
  81.     }  
  82. });  
Step 4
 
The  Html 5 code below shows how to complete the code for the weather application.
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <title>Weather App JavaScript</title>    
  6.     <link rel="stylesheet" href="font/Rimouski.css">    
  7.     <link rel="stylesheet" href="style.css">    
  8. </head>    
  9. <body>    
  10.         
  11.     <div class="container">    
  12.     
  13.            <h1 style="background-color: blue;">PRABAKARAN ACT</h1><br>    
  14.         <div class="app-title">    
  15.     
  16.     
  17.             <p>Weather</p>    
  18.         </div>    
  19.         <div class="notification"> </div>    
  20.         <div class="weather-container">    
  21.             <div class="weather-icon">    
  22.                 <img src="icons/unknown.png" alt="">    
  23.             </div>    
  24.             <div class="temperature-value">    
  25.                 <p>- °<span>C</span></p>    
  26.             </div>    
  27.             <div class="temperature-description">    
  28.                 <p> - </p>    
  29.             </div>    
  30.             <div class="location">    
  31.                 <p>-</p>    
  32.             </div>    
  33.         </div>    
  34.     </div>    
  35.         
  36.     <script src="app.js"></script>    
  37. </body>    
  38. </html>    

Output


Right-click on the text window, and a dialog box appears, select->open a new browser,
 
 
 
 
 

Summary

 
Hope you found this article interesting. We have created a weather application using JavaScript. Thanks for reading.