• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Build A Weather App in HTML CSS & JavaScript
In this weather app, you can get the weather details of a particular city by entering the city name or you can also get your current location weather details by clicking on the “Get Device Location” button. If you entered an invalid city name then there is shown an error message
You’ll get many weather details in this app like temperature in celsius, weather conditions, location, feels like, and humidity. If you’re feeling difficulty to understand what I’m saying then you can watch a demo video or full video tutorial of this project (Weather App in JavaScript).
Build A Weather App in JavaScript [Source Codes]
To create this project (Weather App in JavaScript). First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Weather App from the given download button.
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Weather App in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Linking BoxIcon for Icon -->
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<header><i class='bx bx-left-arrow-alt'></i>Weather App</header>
<section class="input-part">
<p class="info-txt"></p>
<div class="content">
<input type="text" spellcheck="false" placeholder="Enter city name" required>
<div class="separator"></div>
<button>Get Device Location</button>
</div>
</section>
<section class="weather-part">
<img src="" alt="Weather Icon">
<div class="temp">
<span class="numb">_</span>
<span class="deg">°</span>C
</div>
<div class="weather">_ _</div>
<div class="location">
<i class='bx bx-map'></i>
<span>_, _</span>
</div>
<div class="bottom-details">
<div class="column feels">
<i class='bx bxs-thermometer'></i>
<div class="details">
<div class="temp">
<span class="numb-2">_</span>
<span class="deg">°</span>C
</div>
<p>Feels like</p>
</div>
</div>
<div class="column humidity">
<i class='bx bxs-droplet-half'></i>
<div class="details">
<span>_</span>
<p>Humidity</p>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Weather App in JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Linking BoxIcon for Icon --> <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> </head> <body> <div class="wrapper"> <header><i class='bx bx-left-arrow-alt'></i>Weather App</header> <section class="input-part"> <p class="info-txt"></p> <div class="content"> <input type="text" spellcheck="false" placeholder="Enter city name" required> <div class="separator"></div> <button>Get Device Location</button> </div> </section> <section class="weather-part"> <img src="" alt="Weather Icon"> <div class="temp"> <span class="numb">_</span> <span class="deg">°</span>C </div> <div class="weather">_ _</div> <div class="location"> <i class='bx bx-map'></i> <span>_, _</span> </div> <div class="bottom-details"> <div class="column feels"> <i class='bx bxs-thermometer'></i> <div class="details"> <div class="temp"> <span class="numb-2">_</span> <span class="deg">°</span>C </div> <p>Feels like</p> </div> </div> <div class="column humidity"> <i class='bx bxs-droplet-half'></i> <div class="details"> <span>_</span> <p>Humidity</p> </div> </div> </div> </section> </div> <script src="script.js"></script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #43AFFC;
}
::selection{
color: #fff;
background: #43AFFC;
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 7px;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
display: flex;
font-size: 21px;
font-weight: 500;
color: #43AFFC;
padding: 16px 15px;
align-items: center;
border-bottom: 1px solid #ccc;
}
header i{
font-size: 0em;
cursor: pointer;
margin-right: 8px;
}
.wrapper.active header i{
margin-left: 5px;
font-size: 30px;
}
.wrapper .input-part{
margin: 20px 25px 30px;
}
.wrapper.active .input-part{
display: none;
}
.input-part .info-txt{
display: none;
font-size: 17px;
text-align: center;
padding: 12px 10px;
border-radius: 7px;
margin-bottom: 15px;
}
.input-part .info-txt.error{
color: #721c24;
display: block;
background: #f8d7da;
border: 1px solid #f5c6cb;
}
.input-part .info-txt.pending{
color: #0c5460;
display: block;
background: #d1ecf1;
border: 1px solid #bee5eb;
}
.input-part :where(input, button){
width: 100%;
height: 55px;
border: none;
outline: none;
font-size: 18px;
border-radius: 7px;
}
.input-part input{
text-align: center;
padding: 0 15px;
border: 1px solid #ccc;
}
.input-part input:is(:focus, :valid){
border: 2px solid #43AFFC;
}
.input-part input::placeholder{
color: #bfbfbf;
}
.input-part .separator{
height: 1px;
width: 100%;
margin: 25px 0;
background: #ccc;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.separator::before{
content: "or";
color: #b3b3b3;
font-size: 19px;
padding: 0 15px;
background: #fff;
}
.input-part button{
color: #fff;
cursor: pointer;
background: #43AFFC;
transition: 0.3s ease;
}
.input-part button:hover{
background: #1d9ffc;
}
.wrapper .weather-part{
display: none;
margin: 30px 0 0;
align-items: center;
justify-content: center;
flex-direction: column;
}
.wrapper.active .weather-part{
display: flex;
}
.weather-part img{
max-width: 125px;
}
.weather-part .temp{
display: flex;
font-weight: 500;
font-size: 72px;
}
.weather-part .temp .numb{
font-weight: 600;
}
.weather-part .temp .deg{
font-size: 40px;
display: block;
margin: 10px 5px 0 0;
}
.weather-part .weather{
font-size: 21px;
text-align: center;
margin: -5px 20px 15px;
}
.weather-part .location{
display: flex;
font-size: 19px;
padding: 0 20px;
text-align: center;
margin-bottom: 30px;
align-items: flex-start;
}
.location i{
font-size: 22px;
margin: 4px 5px 0 0;
}
.weather-part .bottom-details{
display: flex;
width: 100%;
justify-content: space-between;
border-top: 1px solid #ccc;
}
.bottom-details .column{
display: flex;
width: 100%;
padding: 15px 0;
align-items: center;
justify-content: center;
}
.column i{
color: #5DBBFF;
font-size: 40px;
}
.column.humidity{
border-left: 1px solid #ccc;
}
.column .details{
margin-left: 3px;
}
.details .temp, .humidity span{
font-size: 18px;
font-weight: 500;
margin-top: -3px;
}
.details .temp .deg{
margin: 0;
font-size: 17px;
padding: 0 2px 0 1px;
}
.column .details p{
font-size: 14px;
margin-top: -6px;
}
.humidity i{
font-size: 37px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #43AFFC; } ::selection{ color: #fff; background: #43AFFC; } .wrapper{ width: 400px; background: #fff; border-radius: 7px; box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); } .wrapper header{ display: flex; font-size: 21px; font-weight: 500; color: #43AFFC; padding: 16px 15px; align-items: center; border-bottom: 1px solid #ccc; } header i{ font-size: 0em; cursor: pointer; margin-right: 8px; } .wrapper.active header i{ margin-left: 5px; font-size: 30px; } .wrapper .input-part{ margin: 20px 25px 30px; } .wrapper.active .input-part{ display: none; } .input-part .info-txt{ display: none; font-size: 17px; text-align: center; padding: 12px 10px; border-radius: 7px; margin-bottom: 15px; } .input-part .info-txt.error{ color: #721c24; display: block; background: #f8d7da; border: 1px solid #f5c6cb; } .input-part .info-txt.pending{ color: #0c5460; display: block; background: #d1ecf1; border: 1px solid #bee5eb; } .input-part :where(input, button){ width: 100%; height: 55px; border: none; outline: none; font-size: 18px; border-radius: 7px; } .input-part input{ text-align: center; padding: 0 15px; border: 1px solid #ccc; } .input-part input:is(:focus, :valid){ border: 2px solid #43AFFC; } .input-part input::placeholder{ color: #bfbfbf; } .input-part .separator{ height: 1px; width: 100%; margin: 25px 0; background: #ccc; position: relative; display: flex; align-items: center; justify-content: center; } .separator::before{ content: "or"; color: #b3b3b3; font-size: 19px; padding: 0 15px; background: #fff; } .input-part button{ color: #fff; cursor: pointer; background: #43AFFC; transition: 0.3s ease; } .input-part button:hover{ background: #1d9ffc; } .wrapper .weather-part{ display: none; margin: 30px 0 0; align-items: center; justify-content: center; flex-direction: column; } .wrapper.active .weather-part{ display: flex; } .weather-part img{ max-width: 125px; } .weather-part .temp{ display: flex; font-weight: 500; font-size: 72px; } .weather-part .temp .numb{ font-weight: 600; } .weather-part .temp .deg{ font-size: 40px; display: block; margin: 10px 5px 0 0; } .weather-part .weather{ font-size: 21px; text-align: center; margin: -5px 20px 15px; } .weather-part .location{ display: flex; font-size: 19px; padding: 0 20px; text-align: center; margin-bottom: 30px; align-items: flex-start; } .location i{ font-size: 22px; margin: 4px 5px 0 0; } .weather-part .bottom-details{ display: flex; width: 100%; justify-content: space-between; border-top: 1px solid #ccc; } .bottom-details .column{ display: flex; width: 100%; padding: 15px 0; align-items: center; justify-content: center; } .column i{ color: #5DBBFF; font-size: 40px; } .column.humidity{ border-left: 1px solid #ccc; } .column .details{ margin-left: 3px; } .details .temp, .humidity span{ font-size: 18px; font-weight: 500; margin-top: -3px; } .details .temp .deg{ margin: 0; font-size: 17px; padding: 0 2px 0 1px; } .column .details p{ font-size: 14px; margin-top: -6px; } .humidity i{ font-size: 37px; }
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. You’ve to create a file with .js extension and remember you have to pass your API key in the API URL otherwise this weather app won’t work and it returns “something went wrong” error. You can get this key from the official OpenWeatherMap site for free.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const wrapper = document.querySelector(".wrapper"),
inputPart = document.querySelector(".input-part"),
infoTxt = inputPart.querySelector(".info-txt"),
inputField = inputPart.querySelector("input"),
locationBtn = inputPart.querySelector("button"),
weatherPart = wrapper.querySelector(".weather-part"),
wIcon = weatherPart.querySelector("img"),
arrowBack = wrapper.querySelector("header i");
let api;
inputField.addEventListener("keyup", e =>{
if(e.key == "Enter" && inputField.value != ""){
requestApi(inputField.value);
}
});
locationBtn.addEventListener("click", () =>{
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}else{
alert("Your browser not support geolocation api");
}
});
function requestApi(city){
api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=your_api_key`;
fetchData();
}
function onSuccess(position){
const {latitude, longitude} = position.coords;
api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=your_api_key`;
fetchData();
}
function onError(error){
infoTxt.innerText = error.message;
infoTxt.classList.add("error");
}
function fetchData(){
infoTxt.innerText = "Getting weather details...";
infoTxt.classList.add("pending");
fetch(api).then(res => res.json()).then(result => weatherDetails(result)).catch(() =>{
infoTxt.innerText = "Something went wrong";
infoTxt.classList.replace("pending", "error");
});
}
function weatherDetails(info){
if(info.cod == "404"){
infoTxt.classList.replace("pending", "error");
infoTxt.innerText = `${inputField.value} isn't a valid city name`;
}else{
const city = info.name;
const country = info.sys.country;
const {description, id} = info.weather[0];
const {temp, feels_like, humidity} = info.main;
if(id == 800){
wIcon.src = "icons/clear.svg";
}else if(id >= 200 && id <= 232){
wIcon.src = "icons/storm.svg";
}else if(id >= 600 && id <= 622){
wIcon.src = "icons/snow.svg";
}else if(id >= 701 && id <= 781){
wIcon.src = "icons/haze.svg";
}else if(id >= 801 && id <= 804){
wIcon.src = "icons/cloud.svg";
}else if((id >= 500 && id <= 531) || (id >= 300 && id <= 321)){
wIcon.src = "icons/rain.svg";
}
weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp);
weatherPart.querySelector(".weather").innerText = description;
weatherPart.querySelector(".location span").innerText = `${city}, ${country}`;
weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(feels_like);
weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;
infoTxt.classList.remove("pending", "error");
infoTxt.innerText = "";
inputField.value = "";
wrapper.classList.add("active");
}
}
arrowBack.addEventListener("click", ()=>{
wrapper.classList.remove("active");
});
const wrapper = document.querySelector(".wrapper"), inputPart = document.querySelector(".input-part"), infoTxt = inputPart.querySelector(".info-txt"), inputField = inputPart.querySelector("input"), locationBtn = inputPart.querySelector("button"), weatherPart = wrapper.querySelector(".weather-part"), wIcon = weatherPart.querySelector("img"), arrowBack = wrapper.querySelector("header i"); let api; inputField.addEventListener("keyup", e =>{ if(e.key == "Enter" && inputField.value != ""){ requestApi(inputField.value); } }); locationBtn.addEventListener("click", () =>{ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess, onError); }else{ alert("Your browser not support geolocation api"); } }); function requestApi(city){ api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=your_api_key`; fetchData(); } function onSuccess(position){ const {latitude, longitude} = position.coords; api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=your_api_key`; fetchData(); } function onError(error){ infoTxt.innerText = error.message; infoTxt.classList.add("error"); } function fetchData(){ infoTxt.innerText = "Getting weather details..."; infoTxt.classList.add("pending"); fetch(api).then(res => res.json()).then(result => weatherDetails(result)).catch(() =>{ infoTxt.innerText = "Something went wrong"; infoTxt.classList.replace("pending", "error"); }); } function weatherDetails(info){ if(info.cod == "404"){ infoTxt.classList.replace("pending", "error"); infoTxt.innerText = `${inputField.value} isn't a valid city name`; }else{ const city = info.name; const country = info.sys.country; const {description, id} = info.weather[0]; const {temp, feels_like, humidity} = info.main; if(id == 800){ wIcon.src = "icons/clear.svg"; }else if(id >= 200 && id <= 232){ wIcon.src = "icons/storm.svg"; }else if(id >= 600 && id <= 622){ wIcon.src = "icons/snow.svg"; }else if(id >= 701 && id <= 781){ wIcon.src = "icons/haze.svg"; }else if(id >= 801 && id <= 804){ wIcon.src = "icons/cloud.svg"; }else if((id >= 500 && id <= 531) || (id >= 300 && id <= 321)){ wIcon.src = "icons/rain.svg"; } weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp); weatherPart.querySelector(".weather").innerText = description; weatherPart.querySelector(".location span").innerText = `${city}, ${country}`; weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(feels_like); weatherPart.querySelector(".humidity span").innerText = `${humidity}%`; infoTxt.classList.remove("pending", "error"); infoTxt.innerText = ""; inputField.value = ""; wrapper.classList.add("active"); } } arrowBack.addEventListener("click", ()=>{ wrapper.classList.remove("active"); });
That’s all, now you’ve successfully built a Weather App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
After extracting the file, open the JavaScript file and pass your API key in the API URL. You can get this key from the official OpenWeatherMap site for free. You can also use any other site API for this project. If you do so then you have to modify the JavaScript codes accordingly.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}