Hello Coder! Welcome to Codewithrandom Blog. In this Article, We Create a Weather App Using HTML, CSS, and JavaScript Codes. In this Weather App you enter the citys name or countries and its tell weather of that area and we add 1 more function that tell theres Haze or Cloud.
So let's create this amazing Weather App.
Our weather app used APIs to retrieve weather data for all cities and countries. I'm not sure how many of you are familiar with APIs, but if you aren't, don't worry—we created this project with beginners in mind and will walk you through every idea we utilized.
We will discuss how to create a Weather App using HTML, CSS, and Javascript in Complete detail.
I hope you enjoyed and understood the topic from the video, so let's get started with a basic HTML structure for a javascript weather app.
HTML Code For Weather App:-
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form">
<input type="text" id="search" placeholder="Search By Loaction" autocomplete="off">
</form>
<main id="main">
</main>
<script src="app.js"></script>
</body>
</html>
The entire HTML code for the weather app is present. To obtain users' location information, we employ HTML forms. We will display the weather data inside the main> element according to the location determined by user input.
CSS Code for Weather app:-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Poppins", sans-serif;
background-color: linear-gradiet(300deg, #757b87, #909d9d);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
input {
padding: 1rem;
border-radius: 25px;
border: none;
background-color: #fff;
font-family: inherit;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
min-width: 300px;
font-size: 1rem;
}
input:focus {
outline: none;
}
.weather {
text-align: center;
font-size: 2rem;
}
.weather h2 {
margin-bottom: 0;
display: flex;
align-items: center;
} /* .weather img{ transform: scale(2); } */
For the weather app, we have finished the CSS part. Here is the revised CSS for our output. Using some fundamental CSS styling with display flex, we will center the elements by setting the background color as a gradient color and using the align property. Using the class selector, all of this styling will be applied.
Now add javascript code for the weather app!
JavaScript Code for Weather app:-
const apiKey = "ENTER YOUR API KEY";
const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');
const url = (city)=> `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
async function getWeatherByLocation(city){
const resp = await fetch(url(city), {
origin: "cros" });
const respData = await resp.json();
addWeatherToPage(respData);
}
function addWeatherToPage(data){
const temp = Ktoc(data.main.temp);
const weather = document.createElement('div')
weather.classList.add('weather');
weather.innerHTML = `
<h2><img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /> ${temp}°C <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /></h2>
<small>${data.weather[0].main}</small>
`;
// cleanup
main.innerHTML= "";
main.appendChild(weather);
};
function Ktoc(K){
return Math.floor(K - 273.15);
}
form.addEventListener('submit',(e) =>{
e.preventDefault();
const city = search.value;
if(city){
getWeatherByLocation(city)
}
});
You Need an API Key To Run This Project So After Getting Your API Key Paste it Into Project Where I Writer Enter Your API Key
Steps to create API Key
Step 1 - API key info - Go to google search OpenWeatherMap API, click on 1st link and make your account here and sign up. After signing up, you see the home page.
Step 2 -After signing up on this open weather API website whatever you see on the home page because sometimes you get an API key on the home page and sometimes in the API section so click on API ( In their menu you can see in the image API) so click on API.
Step 3 - After clicking on the API form menu, you can see there are lots of APIs but on the API Maine page starting you get this type of box ( API information box) you can see below in the image. So click on API Doc.
Step 4 - After clicking on this API you get a new page so scroll a little bit and you see there is an API document and code that how we connect this API you see the API keyword (in the below image you can see it easily) so click on API key and you get your API key.
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like speech recognition javascript; you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
You can screenshot of our Weather App project. In this post, we learn how to create a weather app using simple HTML & CSS, and javascript.
If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by - Codewithrandom/Anki
Top comments (0)