Simple Weather Info Webdesign
On April 14, 2020 by Sonahang RaiIn this blog we will create a simple webdesign to display the current weather information. We will be using the openweather’s free api for this tutorial. Openweather is a weather forcasting company. They have lots of weather services. They also have thier oen app and also been providing the weather data to other apps like of google and other third party apps.
I will provide you all the links helpful for this tutorial. Now lets get started with our tutorial. The tutorial will be going as regural as we used to do. First we create our HTML. After that we code our javascripts and finally we give them CSS.
- Creating HTML
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="card">
<h2><i class="fa fa-map-marker"></i> <span id="location"></span></h2>
<h6 id="weather"></h6>
<h4><span id="temp"></span><sup>o</sup>C</h4>
<img id="icon" src="">
<button onClick="window.location.reload();" class="refresh"><i class="fa fa-refresh"></i></button>
</div>
</div>
</body>
</html>
2. Now Javascript
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
link = "https://api.openweathermap.org/data/2.5/weather?q=Kathmandu&appid=bf8d15a80c89aa4f4c82ad6cbb3f5ac5";
var request = new XMLHttpRequest();
request.open('GET',link,true);
request.onload = function(){
var obj = JSON.parse(this.response);
console.log(obj);
document.getElementById('weather').innerHTML = obj.weather[0].description;
document.getElementById('location').innerHTML = obj.name;
document.getElementById('temp').innerHTML = obj.main.temp - 273.15;
document.getElementById('icon').src = "http://openweathermap.org/img/w/" + obj.weather[0].icon + ".png";
if (request.status >= 200 && request.status < 400) {
var temp = obj.main.temp;
}
else{
console.log("The city doesn't exist! Kindly check");
}
}
request.send();
</script>
3. Adding css
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-seriff;
color: #fff;
background: #343434;
}
.container {
width: 26%;
}
.card {
border-radius: 50px;
background: #343434;
box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959;
padding: 3%;
text-align: center;
}
.card h4 {
font-size: 4rem;
font-weight: 400;
margin: 1rem 0;
}
img#icon {
width: 20%;
}
h6#weather{
text-transform: capitalize;
}
button.refresh {
display: block;
width: 100px;
margin: 10px auto;
border: 0;
background: transparent;
color: #9c9c9d;
font-size: 30px;
height: 100px;
border-radius: 50%;
box-shadow: 10px 4px 18px #252525, 5px 5px 18px #4a4a4a;
transition: 0.3s;
}
button.refresh:hover{
box-shadow: inset 10px 4px 18px #252525, inset 5px 5px 18px #4a4a4a;
}
You can find the full code in my github here. Good luck and create your own weather webdesign. You need to get signed up and have your own free api key from here.
Create you HTML as you wanna make how it renders in the browser. Mine looks like as above in picture. In this tutorial we will be dealing with the api. So we will be geting some datas from the server which in this case if from the openweathermap server. We will deal with the JSON data arriving from the js request.
var request = new XMLHttpRequest();
request.open(‘GET’,link,true);
We will request the data as above using the XMLHttpRequest function. We will GET request along with sending the api link.
link=”https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={your api key}”
The link will look like this for the api where we need the api key and the name of the place
to find weather data.
Get the video tutorial from here:
Leave a Reply