Simple weather API Project Javascript | Weather App Javascript










Table of Contents

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.
Simple weather API Project Javascript | Weather App Javascript

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.
Simple weather API Project Javascript | Weather App Javascript

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>
CSS SECTION 
By CSS we will design our container and will bring in the center and then we will set the width for all three part of the container and will bring it after the heading and we will design both buttons.

The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
 @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;
}

Javascript section 

In the Javascript part, we will add magic logic as initially when our page will be loaded then our API fetches the system geolocation and time and will fetch data according to the geolocation and will append to the required container.

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.

 

 // 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
 

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.

Now I’m looking for your reviews.
So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You can follow me on Instagram 

Written by @Ankit kumar
 
Code by @Lunnaris
Share on:

Leave a Comment