Simple weather API Project Javascript | Weather App Javascript
Simple weather API Project Javascript | Weather App Javascript
- 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
- 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.
<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;
}
Javascript section
// 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);

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! 👇
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.