Table of Contents
Weather app javascript | Weather app using HTML CSS Javascript
Welcome🎉 to Code With Random blog. In this blog, we will discuss how to create a Javascript Weather App. For this project, we will use HTML, CSS, and Javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for weather app javascript.
HTML code for a javascript 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 App</title>
<link rel="stylesheet" href="indxe.css">
</head>
<body>
<form id="form"><input type="text" id="search" placeholder="Search By Loaction" autocomplete="off">
</form>
<main id="main">
</main>
<script src="index.js"></script>
</body>
</html>
There is all HTML code for the weather app. We are using HTML forms to collect locations data from the users. According to the location received from user input, we will display the weather information inside the <main> element.
Here’s the output of our project before styling it with CSS.
CSS for a Javascript 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);
} */
Now we have completed our CSS section, Here is our updated output CSS.
Now add javascript for the weather app!
Javascript for a weather app
const apiKey = "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)
}
});
Javascript project ideas with source code by Code With Random
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. Thank you 🙏💕
Check it more
javascript project ideas with source code by Code With Random
HTML – CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar – responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
In this post, we learn how to create a weather app javascript 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.
not working
It doesn't work .
Why ?
it is not working
brother give details on our mail id or contact on ig – codewithrandom
it is not working
not working
not working dear
Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
even after generating my own api key it still does not work?
Hey the problem is coming from the origin. It is cors and not cros.
Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
man where is the article
not working