Home
CT Projects
Web Projects

Building a Weather app using HTML, CSS & JavaScript

We're building our own special weather application with HTML, CSS, and JavaScript. To fetch the weather information. Weather App from Coding Taggers.

Introduction to our Project


In this exercise, we're building our own special weather application with HTML, CSS, and JavaScript. To fetch the weather information, we'll use something refer to as an API, or an application programming interface. 

All things considered, we're really going to use only one API to get weather information dependent on the user area! This API fetch data of that area searched by the user.

Getting Started 


To fech the weather data, we can make a request to a weather source – like OpenWeatherMap to get weather information dependent on a user's search. 

For one thing, feel free to pursue a free API key on OpenWeatherMap here. Whenever you're endorsed in, click on API keys and make a key. It should look something like
 
2b2da96abaf84825eeb6a1967e8918d9

Link to get API : openweathermap.org

Make sure after getting your API ID, Change ID in javascript to fetch data. 

Since we have our API key, we can make our records: 

  • index.html - for our markup 
  • style.css - for styling 
  • app.js - for the function(s) to fetch information from our APIs.

Creating with HTML


As you most likely saw in the see in the picture above, we will be showing the current temperature, a short depiction, and the directions dependent on the user's area. To do this, we'll need to go into our html archive and ensure we've previously connected our template style.css and javascript record app.js. 

Then, at that point, in our <body> tag, we should make components with one of a kind ids and classes. We are using box models to look good and user friendly. We can make a <div> tag with the class of container, card, search, weather etc, a <input> tag for to take input from the user with an id of inp and a <button> tag for the submission of an area name with an id of btn with font awesome icon. Later on, you can add more components for markup and show significantly more point by point information from our weather API here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="weatherapp.js" defer></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="search">
<input type="text" class="input" placeholder="Search" id="inp">
<button id="btn">
<i class="fa fa-search fa-2x" aria-hidden="true"></i> 
</button>
</div>
<div class="weather">
<br>
<h2 class="city">Weather in Shimoga</h2>
<br>
<div class="temp">
<h1>30°C</h1>
</div>
<div class="i">
<img src="https://openweathermap.org/img/wn/01d.png" alt="" class="icon">
<div class="description">Cloudy</div>
</div>
<div class="humidity">Humidity: 60%</div>
<div class="wind">Wind speed: 6.2 km/h</div>
</div>
</div>
</div>
    <script src="app.js"></script>
</body>
</html>

Extraordinary, since we have our markup, how about we really bring information. Your record. when reviewed in the broswer, should in any case be clear. 

CSS Styling 


Here's my interpretation of some essential focusing and textual style changes in CSS. Go ahead and style the page however you would prefer. You can change color, font style, background-color as per your preference.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lobster', cursive;
}
body {
background-color: #1ABC9C;
}
body::before{
content:"";
height:100%;
width:100%;
position:absolute ;
bottom:-100px;
left:0px;
right:0;
z-index:-2;
background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);
clip-path:circle(30% at right 70%);
}
body::after{
content:"";
height:100%;
width:100%;
position:absolute ;
top:0px;
right:0;
left:0px;
z-index:-2;
background:linear-gradient(to top, #e91e63,#2196f3);
clip-path:circle(30% at 10% 10%);
}
.container {
width: 100vw;
height: 100vh;
margin-top:50px;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 100%;
max-width: 350px;
height: 72%;
background-color: linear-gradient(to top, #e91e63,#2196f3);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 1em;
color: white;
}
.search {
display: flex;
position: absolute;
top: calc(55% - 120px);
left: calc(55% - 112px);
display:block ;
}
input {
background-color:#91e63;
color: rgb(0, 195, 255);
padding: 1em;
border:2px solid black ;
border-radius: 10px ;
outline:none;
scroll:none;
}
::placeholder {
color: rgb(0, 195, 255);
}
button {
width: 30px;
height: 30px;
background-color: #00000000;
border: 0;
margin-left: 5px;
color:white ;
position:absolute;
top:10px;
right:-40px;
}
img {
width: 25px;
}
.weather {
position: absolute;
left: calc(50% - 120px);
}
.i {
display: flex;
text-transform : capitalize;
}

JavaScript to Fetch 


Here we are going to use javascript to fetch the information of weather in a respective city or area using an Free API of third party website. You can see the code below.

<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
let btn = document.getElementById('btn')
btn.onclick = function () {
weather.search()
}
let inp = document.getElementById("inp")
inp.onkeyup = function (e) {
if (e.key == "Enter") {
weather.search()
}
}
let weather = {
apiKey: "2b2da96abaf84825eeb6a1967e8918d9",
fetchWeather: function (city) {
fetch("https://api.openweathermap.org/data/2.5/weather?q="
    + city + "&units=metric&appid="
    + this.apiKey
)
    .then((response) => response.json())
    .then((data) => this.displayWeather(data));
},
displayWeather: function (data) {
let { name } = data;
let { icon, description } = data.weather[0]
let { temp, humidity } = data.main;
let { speed } = data.wind
document.querySelector(".city").innerHTML = "Weather in " + name
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + ".png"
document.querySelector(".description").innerHTML = description
document.querySelector(".temp").innerHTML = "<h1>" + temp + "°C" + "</h1>"
document.querySelector(".humidity").innerHTML = "Humidity: " + humidity + "%"
document.querySelector(".wind").innerHTML = "Wind speed: " + speed + " km/h"
},
search: function () {
this.fetchWeather(document.getElementById('inp').value)
}
}
weather.fetchWeather("Shimoga")
</script>


CodePen 


See the Pen Weather App by Coding Taggers by Coding Taggers (@codingtaggers) on CodePen.


Challenge 


I trust you tracked down this exercise helpful! Would you be able to consider different plans to refine this task? 

You could add symbols relying upon the climate depiction (ex: mists, sun, downpour, and so on), add extra climate information (feels like temperature, stickiness, multi day estimate, dawn, nightfall, wind speed, and the sky is the limit from there). Keep in mind, this information is now in the reaction to your solicitation to the OpenWeatherMap API! 

You can likewise make the site responsive and alter it however you would prefer with extra styling. 

Best of luck and try to impart your undertaking to the Enlight people group when you're set! :)

Post a Comment