Simple weather API Project Javascript | Weather App Javascript

Learners, In this article we are going to design a very important and impressive project which is Simple weather API Project in Javascript with detailed functionality.

You must have an idea that in the past days it was very tough to know what is real-time temperature is going when the tech was not enough to develop and people exact match the things with the help of the position of the sun and predict currently this is much is temp we are experiencing now.

Now things are not like that we also know that we have phones in our hands all the and on the phone at the top front of the screen we observe the temp regarding current location. 

Similarly, we are going to clone a whether app by ourselves 😉.

Hey learners..!

Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a Simple weather API Project Using HTML CSS JAVASCRIPT.

I hope you must have got an idea about the project.

Let’s have a look at our project.

As you are looking in the project preview how the thing is organized in the single container.

Following is the feature of our project:-

• Like in the top container we have the current location name with whether status in the symbol form.
• Then we have a few more info on the second container below of first. As min and max temp or longitude and latitude, humidity, precipitation, etc.
• And in the end, we have a switchable temp in the toggle option as we can change int Fahrenheit to celsius or vice versa.

HTML SECTION 

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.

• First, we have a container that will enclose all other parts of the whether project.
• Within the container, we have divided our project into three-part as the first part will display the location name under the h1 tag and then the symbolic form of whether and the real temp in. C or F. it depends on us what we have chosen.
• Then in the second div with the class description container, we will have all the details about min and max temp or longitude and latitude of the location, etc.
• At the end of container part we will have a switchable temp button that will allow us to know the temp between celsius and Fahrenheit.

Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.

 <div class="container">  
  <div class="title">  
   <h1 id="city"></h1>  
   <div id="graphic" class="weather-icon"></div>  
   <div id="description" class='important-info text'></div>  
   <div id="farenheit" class="temp-info"></div>  
   <div id="celsius" class="temp-info"></div>  
  </div>  
 </div>  
 <div class="description-container">  
  <div class="block-1">  
   <div class="text">  
    <span>Max</span>  
    <span id="max" class="important-info"> </span>  
   </div>  
   <div class="text">  
    <span>Min</span>  
   <span id="min" class='important-info'> </span>  
   </div>  
  </div>  
  <div class="block-2">  
   <div id="longitude" class=" text important-info">Lon: </div>  
   <div id="latitude" class="text important-info">Lat: </div>  
  </div>  
  <div class="block-3">  
   <div id="humidity" class="text important-info">Humidity: </div>  
   <div id="pressure" class="text important-info">Pressure: </div>  
   <div id="windSpeed" class="text important-info">Winds: </div>  
  </div>  
 </div>  
 <div class="container-button">  
    <div class="switch-button">  
     <span class="active"></span>  
     <button class="text switch-button-case left active-case">Celsius</button>  
     <button class="text switch-button-case right">Farenheit</button>  
    </div>  
 </div>  

 @import url('https://fonts.googleapis.com/css?family=Space+Mono');  
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:200,400,600,700,800');  
 body {  
  height: 100%;  
  background: #C95E67;  
  /* fallback for old browsers */  
 }  
 h1 {  
  font-family: 'Open Sans', Helvetica, sans-serif;  
  font-size: 29px;  
  color: #C95E67;  
 }  
 .text{  
  font-family: 'Space Mono', Helvetica, sans-serif;  
  font-size: 14px;  
  color: #333;  
 }  
 .container {  
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr;  
  width: 100%;  
  margin: 40px 0px 10px 0;  
 }  
 .container-button {  
  display: grid;  
  grid-template-columns: 1fr;  
  margin-top: 10px;  
 }  
 .weather-icon,  
 .title{  
  grid-column: 1/4;  
  margin: 0 auto;  
  text-align: center;  
  background: #efefef;  
  border-radius: 4px;  
  padding: 15px 100px;  
 }  
 .important-info{   
  grid-column: 1;  
 }  
 .description-container{  
  background: #efefef;  
  border-radius: 4px;  
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr;  
  width: 450px;  
  margin: 0 auto;  
  padding:20px 0px;  
 }  
 .block-1 {  
  grid-column: 1;  
  padding: 10px;  
 }  
 .block-2{  
  grid-column: 2;  
  padding: 10px;  
 }  
 .block-3{  
  grid-column: 3;  
  padding: 10px;  
 }  
 .weatherInfo {  
  height: 100%;  
 }  
 .temp-info {  
  font-family: 'Open Sans', Helvetica, sans-serif;  
  font-size: 65px;  
  color: #C95E67;  
  font-weight: 600;  
 }  
 .switch-button {  
  grid-column: 1 1 1;  
  border-radius: 4px;  
  margin: 0 auto;  
  width: 400px;  
  height: 40px;  
  text-align: center;  
  position: relative;  
  will-change: transform;  
  z-index: 197 !important;  
  cursor: pointer;  
  -webkit-transition: .3s ease all;  
  transition: .3s ease all;  
  border: 1px solid #efefef;  
  display: inline-block;  
 }  
 .switch-button-case {  
  display: inline-block;  
  background: none;  
  width: 49%;  
  height: 100%;  
  color: #efefef;  
  position: relative;  
  border: none;  
  -webkit-transition: .3s ease all;  
  transition: .3s ease all;  
  text-transform: uppercase;  
  letter-spacing: 5px;  
  padding-bottom: 1px;  
 }  
 .switch-button-case:hover {  
  color: #151515;  
  cursor: pointer;  
 }  
 .switch-button-case:focus {  
  outline: none;  
 }  
 .active {  
  position: absolute;  
  color: #151515;  
  background-color: #efefef;  
  left: 0;  
  top: 0;  
  width: 50%;  
  height: 100%;  
  z-index: -1;  
  -webkit-transition: .3s ease-out all;  
  transition: .3s ease-out all;  
 }  
 .switch-button .active-case {  
  color: #151515;  
 }  
 .signature {  
  position: fixed;  
  font-family: sans-serif;  
  font-weight: 100;  
  bottom: 10px;  
  left: 0;  
  letter-spacing: 4px;  
  font-size: 10px;  
  width: 100vw;  
  text-align: center;  
  color: #efefef;  
  text-transform: uppercase;  
  text-decoration: none;  
 }  

 // Get user's geolocation  
 var lat,  
  lon,  
  tWeather,  
  icon,  
  celsius,  
  farenheit,  
  iconNumber,  
  minCelsius,  
  maxCelsius,  
  minF,  
  maxF;  
 $.getJSON('https://ipapi.co/json/', function(data){  
  console.log(data);  
  // reaching the location API  
 console.log(data);  
   // Finding the latitude and longitude, to be able to find the location  
   $.each(data, function(k, v) {});  
   lat = data.latitude;  
   lon = data.longitude;  
   $("#latitude").append(lat);  
   $("#longitude").append(lon);  
   $.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=059dcee9c15c93a942eb1f38b72876be", function(weatherData) {  
    $.each(weatherData, function(j, b) {});  
    console.log(weatherData);  
    // fetch image and display weather and icon down below   
    tWeather = weatherData.main.temp;  
    iconNumber = weatherData.weather[0].icon;  
    icon = ("http://openweathermap.org/img/w/" + iconNumber + ".png");  
    $("#graphic").append('<img src="' + icon + '"/>');  
    $('#description').append(weatherData.weather[0].description);  
    $('#city').append(weatherData.name);  
    $("#windSpeed").append(weatherData.wind.speed + "km/h");  
    $("#pressure").append(weatherData.main.pressure + "º");  
    $("#humidity").append(weatherData.main.humidity + "%");  
    minF = Math.floor(weatherData.main.temp_min * 9/5 - 459.67);  
    maxF = Math.floor(weatherData.main.temp_max * 9/5 - 459.67);  
    // translate Kelvin to Celsius  
    celsius = Math.floor(weatherData.main.temp - 273.15);  
    minCelsius = Math.floor(weatherData.main.temp_min - 273.15);  
    maxCelsius = Math.floor(weatherData.main.temp_max - 273.15);  
    // translate Kelvin to Farenhait T(K) × 9/5 - 459.67  
    farenheit = Math.floor(weatherData.main.temp * 9 / 5 - 459.67);  
    // display celsius by default   
    $('#celsius').append(celsius + 'ºC');  
    $("#min").append( minCelsius + 'ºC');  
    $("#max").append( maxCelsius + 'ºC');  
   });  
  // background code here   
 });  
 var switchButton = document.querySelector('.switch-button');  
 var switchBtnRight = document.querySelector('.switch-button-case.right');  
 var switchBtnLeft = document.querySelector('.switch-button-case.left');  
 var activeSwitch = document.querySelector('.active');  
 function switchLeft() {  
  switchBtnRight.classList.remove('active-case');  
  switchBtnLeft.classList.add('active-case');  
  activeSwitch.style.left = '0%';  
  $('#farenheit').empty();  
  $('#min').empty();  
  $('#max').empty();  
  $('#celsius').append(celsius + 'ºC');  
  $("#min").append(minCelsius + 'ºC');  
  $("#max").append(maxCelsius + 'ºC');  
 }  
 function switchRight() {  
  switchBtnRight.classList.add('active-case');  
  switchBtnLeft.classList.remove('active-case');  
  activeSwitch.style.left = '50%';  
  $('#celsius').empty();  
  $('#min').empty();  
  $('#max').empty();  
  $('#farenheit').append(farenheit + 'ºF');  
  $('#min').append(minF + "ºF");  
  $('#max').append(maxF + "ºF");  
 }  
 switchBtnLeft.addEventListener('click', function() {  
  $('#celsius').empty();  
  switchLeft();  
 }, false);  
 switchBtnRight.addEventListener('click', function() {  
  $('#farenheit').empty();  
  switchRight();  
 }, false);  

A live preview of our project is attached below refer to this codepen
 

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

See the Pen Weather App by Vanessa (@Lunnaris) on CodePen.

By this blog… We have learned how we can design a Simple weather API Project HTML CSS JAVASCRIPT.