• ;
  • 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
How to Build A Weather App in HTML CSS and JavaScript
In this blog post, I’ll guide you through building a weather app project using HTML, CSS, and JavaScript from scratch. If you prefer using Bootstrap, I’ve already covered that in a previous blog post on creating a Weather App in HTML, Bootstrap, and JavaScript. However, this weather project has some extra features that make it more useful.
In this weather app project, users can enter any city name to get the 5-day weather forecast or simply click on the “Use Current Location” button to get their current location’s weather details, including temperature, wind speed, humidity, and more. This project is also mobile-friendly, which means it looks great on all devices.
Weather App [Source Code]
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 - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather App Project JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<h1>Weather Dashboard</h1>
<div class="container">
<div class="weather-input">
<h3>Enter a City Name</h3>
<input class="city-input" type="text" placeholder="E.g., New York, London, Tokyo">
<button class="search-btn">Search</button>
<div class="separator"></div>
<button class="location-btn">Use Current Location</button>
</div>
<div class="weather-data">
<div class="current-weather">
<div class="details">
<h2>_______ ( ______ )</h2>
<h6>Temperature: __°C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</div>
</div>
<div class="days-forecast">
<h2>5-Day Forecast</h2>
<ul class="weather-cards">
<li class="card">
<h3>( ______ )</h3>
<h6>Temp: __C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</li>
<li class="card">
<h3>( ______ )</h3>
<h6>Temp: __C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</li>
<li class="card">
<h3>( ______ )</h3>
<h6>Temp: __C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</li>
<li class="card">
<h3>( ______ )</h3>
<h6>Temp: __C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</li>
<li class="card">
<h3>( ______ )</h3>
<h6>Temp: __C</h6>
<h6>Wind: __ M/S</h6>
<h6>Humidity: __%</h6>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="utf-8"> <title>Weather App Project JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="script.js" defer></script> </head> <body> <h1>Weather Dashboard</h1> <div class="container"> <div class="weather-input"> <h3>Enter a City Name</h3> <input class="city-input" type="text" placeholder="E.g., New York, London, Tokyo"> <button class="search-btn">Search</button> <div class="separator"></div> <button class="location-btn">Use Current Location</button> </div> <div class="weather-data"> <div class="current-weather"> <div class="details"> <h2>_______ ( ______ )</h2> <h6>Temperature: __°C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </div> </div> <div class="days-forecast"> <h2>5-Day Forecast</h2> <ul class="weather-cards"> <li class="card"> <h3>( ______ )</h3> <h6>Temp: __C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </li> <li class="card"> <h3>( ______ )</h3> <h6>Temp: __C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </li> <li class="card"> <h3>( ______ )</h3> <h6>Temp: __C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </li> <li class="card"> <h3>( ______ )</h3> <h6>Temp: __C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </li> <li class="card"> <h3>( ______ )</h3> <h6>Temp: __C</h6> <h6>Wind: __ M/S</h6> <h6>Humidity: __%</h6> </li> </ul> </div> </div> </div> </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 Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: #E3F2FD;
}
h1 {
background: #5372F0;
font-size: 1.75rem;
text-align: center;
padding: 18px 0;
color: #fff;
}
.container {
display: flex;
gap: 35px;
padding: 30px;
}
.weather-input {
width: 550px;
}
.weather-input input {
height: 46px;
width: 100%;
outline: none;
font-size: 1.07rem;
padding: 0 17px;
margin: 10px 0 20px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
.weather-input input:focus {
padding: 0 16px;
border: 2px solid #5372F0;
}
.weather-input .separator {
height: 1px;
width: 100%;
margin: 25px 0;
background: #BBBBBB;
display: flex;
align-items: center;
justify-content: center;
}
.weather-input .separator::before{
content: "or";
color: #6C757D;
font-size: 1.18rem;
padding: 0 15px;
margin-top: -4px;
background: #E3F2FD;
}
.weather-input button {
width: 100%;
padding: 10px 0;
cursor: pointer;
outline: none;
border: none;
border-radius: 4px;
font-size: 1rem;
color: #fff;
background: #5372F0;
transition: 0.2s ease;
}
.weather-input .search-btn:hover {
background: #2c52ed;
}
.weather-input .location-btn {
background: #6C757D;
}
.weather-input .location-btn:hover {
background: #5c636a;
}
.weather-data {
width: 100%;
}
.weather-data .current-weather {
color: #fff;
background: #5372F0;
border-radius: 5px;
padding: 20px 70px 20px 20px;
display: flex;
justify-content: space-between;
}
.current-weather h2 {
font-weight: 700;
font-size: 1.7rem;
}
.weather-data h6 {
margin-top: 12px;
font-size: 1rem;
font-weight: 500;
}
.current-weather .icon {
text-align: center;
}
.current-weather .icon img {
max-width: 120px;
margin-top: -15px;
}
.current-weather .icon h6 {
margin-top: -10px;
text-transform: capitalize;
}
.days-forecast h2 {
margin: 20px 0;
font-size: 1.5rem;
}
.days-forecast .weather-cards {
display: flex;
gap: 20px;
}
.weather-cards .card {
color: #fff;
padding: 18px 16px;
list-style: none;
width: calc(100% / 5);
background: #6C757D;
border-radius: 5px;
}
.weather-cards .card h3 {
font-size: 1.3rem;
font-weight: 600;
}
.weather-cards .card img {
max-width: 70px;
margin: 5px 0 -12px 0;
}
@media (max-width: 1400px) {
.weather-data .current-weather {
padding: 20px;
}
.weather-cards {
flex-wrap: wrap;
}
.weather-cards .card {
width: calc(100% / 4 - 15px);
}
}
@media (max-width: 1200px) {
.weather-cards .card {
width: calc(100% / 3 - 15px);
}
}
@media (max-width: 950px) {
.weather-input {
width: 450px;
}
.weather-cards .card {
width: calc(100% / 2 - 10px);
}
}
@media (max-width: 750px) {
h1 {
font-size: 1.45rem;
padding: 16px 0;
}
.container {
flex-wrap: wrap;
padding: 15px;
}
.weather-input {
width: 100%;
}
.weather-data h2 {
font-size: 1.35rem;
}
}
/* Import Google font - Open Sans */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } body { background: #E3F2FD; } h1 { background: #5372F0; font-size: 1.75rem; text-align: center; padding: 18px 0; color: #fff; } .container { display: flex; gap: 35px; padding: 30px; } .weather-input { width: 550px; } .weather-input input { height: 46px; width: 100%; outline: none; font-size: 1.07rem; padding: 0 17px; margin: 10px 0 20px 0; border-radius: 4px; border: 1px solid #ccc; } .weather-input input:focus { padding: 0 16px; border: 2px solid #5372F0; } .weather-input .separator { height: 1px; width: 100%; margin: 25px 0; background: #BBBBBB; display: flex; align-items: center; justify-content: center; } .weather-input .separator::before{ content: "or"; color: #6C757D; font-size: 1.18rem; padding: 0 15px; margin-top: -4px; background: #E3F2FD; } .weather-input button { width: 100%; padding: 10px 0; cursor: pointer; outline: none; border: none; border-radius: 4px; font-size: 1rem; color: #fff; background: #5372F0; transition: 0.2s ease; } .weather-input .search-btn:hover { background: #2c52ed; } .weather-input .location-btn { background: #6C757D; } .weather-input .location-btn:hover { background: #5c636a; } .weather-data { width: 100%; } .weather-data .current-weather { color: #fff; background: #5372F0; border-radius: 5px; padding: 20px 70px 20px 20px; display: flex; justify-content: space-between; } .current-weather h2 { font-weight: 700; font-size: 1.7rem; } .weather-data h6 { margin-top: 12px; font-size: 1rem; font-weight: 500; } .current-weather .icon { text-align: center; } .current-weather .icon img { max-width: 120px; margin-top: -15px; } .current-weather .icon h6 { margin-top: -10px; text-transform: capitalize; } .days-forecast h2 { margin: 20px 0; font-size: 1.5rem; } .days-forecast .weather-cards { display: flex; gap: 20px; } .weather-cards .card { color: #fff; padding: 18px 16px; list-style: none; width: calc(100% / 5); background: #6C757D; border-radius: 5px; } .weather-cards .card h3 { font-size: 1.3rem; font-weight: 600; } .weather-cards .card img { max-width: 70px; margin: 5px 0 -12px 0; } @media (max-width: 1400px) { .weather-data .current-weather { padding: 20px; } .weather-cards { flex-wrap: wrap; } .weather-cards .card { width: calc(100% / 4 - 15px); } } @media (max-width: 1200px) { .weather-cards .card { width: calc(100% / 3 - 15px); } } @media (max-width: 950px) { .weather-input { width: 450px; } .weather-cards .card { width: calc(100% / 2 - 10px); } } @media (max-width: 750px) { h1 { font-size: 1.45rem; padding: 16px 0; } .container { flex-wrap: wrap; padding: 15px; } .weather-input { width: 100%; } .weather-data h2 { font-size: 1.35rem; } }
Last, paste the following codes into your script.js file.Please note that your weather app is still unable to show the weather forecast for any location because you’ve not provided your OpenWeatherMap API key in the API_KEY variable. To get a free API key, sign up for an account at https: //home.openweathermap .org /api_keys. Your API key may take minutes or hours to activate. You’ll get an error like “Invalid API Key” or something similar during this time.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const cityInput = document.querySelector(".city-input");
const searchButton = document.querySelector(".search-btn");
const locationButton = document.querySelector(".location-btn");
const currentWeatherDiv = document.querySelector(".current-weather");
const weatherCardsDiv = document.querySelector(".weather-cards");
const API_KEY = "YOUR-API-KEY-HERE"; // API key for OpenWeatherMap API
const createWeatherCard = (cityName, weatherItem, index) => {
if(index === 0) { // HTML for the main weather card
return `<div class="details">
<h2>${cityName} (${weatherItem.dt_txt.split(" ")[0]})</h2>
<h6>Temperature: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
<h6>Wind: ${weatherItem.wind.speed} M/S</h6>
<h6>Humidity: ${weatherItem.main.humidity}%</h6>
</div>
<div class="icon">
<img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
<h6>${weatherItem.weather[0].description}</h6>
</div>`;
} else { // HTML for the other five day forecast card
return `<li class="card">
<h3>(${weatherItem.dt_txt.split(" ")[0]})</h3>
<img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
<h6>Temp: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
<h6>Wind: ${weatherItem.wind.speed} M/S</h6>
<h6>Humidity: ${weatherItem.main.humidity}%</h6>
</li>`;
}
}
const getWeatherDetails = (cityName, latitude, longitude) => {
const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;
fetch(WEATHER_API_URL).then(response => response.json()).then(data => {
// Filter the forecasts to get only one forecast per day
const uniqueForecastDays = [];
const fiveDaysForecast = data.list.filter(forecast => {
const forecastDate = new Date(forecast.dt_txt).getDate();
if (!uniqueForecastDays.includes(forecastDate)) {
return uniqueForecastDays.push(forecastDate);
}
});
// Clearing previous weather data
cityInput.value = "";
currentWeatherDiv.innerHTML = "";
weatherCardsDiv.innerHTML = "";
// Creating weather cards and adding them to the DOM
fiveDaysForecast.forEach((weatherItem, index) => {
const html = createWeatherCard(cityName, weatherItem, index);
if (index === 0) {
currentWeatherDiv.insertAdjacentHTML("beforeend", html);
} else {
weatherCardsDiv.insertAdjacentHTML("beforeend", html);
}
});
}).catch(() => {
alert("An error occurred while fetching the weather forecast!");
});
}
const getCityCoordinates = () => {
const cityName = cityInput.value.trim();
if (cityName === "") return;
const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`;
// Get entered city coordinates (latitude, longitude, and name) from the API response
fetch(API_URL).then(response => response.json()).then(data => {
if (!data.length) return alert(`No coordinates found for ${cityName}`);
const { lat, lon, name } = data[0];
getWeatherDetails(name, lat, lon);
}).catch(() => {
alert("An error occurred while fetching the coordinates!");
});
}
const getUserCoordinates = () => {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords; // Get coordinates of user location
// Get city name from coordinates using reverse geocoding API
const API_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${API_KEY}`;
fetch(API_URL).then(response => response.json()).then(data => {
const { name } = data[0];
getWeatherDetails(name, latitude, longitude);
}).catch(() => {
alert("An error occurred while fetching the city name!");
});
},
error => { // Show alert if user denied the location permission
if (error.code === error.PERMISSION_DENIED) {
alert("Geolocation request denied. Please reset location permission to grant access again.");
} else {
alert("Geolocation request error. Please reset location permission.");
}
});
}
locationButton.addEventListener("click", getUserCoordinates);
searchButton.addEventListener("click", getCityCoordinates);
cityInput.addEventListener("keyup", e => e.key === "Enter" && getCityCoordinates());
const cityInput = document.querySelector(".city-input"); const searchButton = document.querySelector(".search-btn"); const locationButton = document.querySelector(".location-btn"); const currentWeatherDiv = document.querySelector(".current-weather"); const weatherCardsDiv = document.querySelector(".weather-cards"); const API_KEY = "YOUR-API-KEY-HERE"; // API key for OpenWeatherMap API const createWeatherCard = (cityName, weatherItem, index) => { if(index === 0) { // HTML for the main weather card return `<div class="details"> <h2>${cityName} (${weatherItem.dt_txt.split(" ")[0]})</h2> <h6>Temperature: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6> <h6>Wind: ${weatherItem.wind.speed} M/S</h6> <h6>Humidity: ${weatherItem.main.humidity}%</h6> </div> <div class="icon"> <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon"> <h6>${weatherItem.weather[0].description}</h6> </div>`; } else { // HTML for the other five day forecast card return `<li class="card"> <h3>(${weatherItem.dt_txt.split(" ")[0]})</h3> <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon"> <h6>Temp: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6> <h6>Wind: ${weatherItem.wind.speed} M/S</h6> <h6>Humidity: ${weatherItem.main.humidity}%</h6> </li>`; } } const getWeatherDetails = (cityName, latitude, longitude) => { const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`; fetch(WEATHER_API_URL).then(response => response.json()).then(data => { // Filter the forecasts to get only one forecast per day const uniqueForecastDays = []; const fiveDaysForecast = data.list.filter(forecast => { const forecastDate = new Date(forecast.dt_txt).getDate(); if (!uniqueForecastDays.includes(forecastDate)) { return uniqueForecastDays.push(forecastDate); } }); // Clearing previous weather data cityInput.value = ""; currentWeatherDiv.innerHTML = ""; weatherCardsDiv.innerHTML = ""; // Creating weather cards and adding them to the DOM fiveDaysForecast.forEach((weatherItem, index) => { const html = createWeatherCard(cityName, weatherItem, index); if (index === 0) { currentWeatherDiv.insertAdjacentHTML("beforeend", html); } else { weatherCardsDiv.insertAdjacentHTML("beforeend", html); } }); }).catch(() => { alert("An error occurred while fetching the weather forecast!"); }); } const getCityCoordinates = () => { const cityName = cityInput.value.trim(); if (cityName === "") return; const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`; // Get entered city coordinates (latitude, longitude, and name) from the API response fetch(API_URL).then(response => response.json()).then(data => { if (!data.length) return alert(`No coordinates found for ${cityName}`); const { lat, lon, name } = data[0]; getWeatherDetails(name, lat, lon); }).catch(() => { alert("An error occurred while fetching the coordinates!"); }); } const getUserCoordinates = () => { navigator.geolocation.getCurrentPosition( position => { const { latitude, longitude } = position.coords; // Get coordinates of user location // Get city name from coordinates using reverse geocoding API const API_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${API_KEY}`; fetch(API_URL).then(response => response.json()).then(data => { const { name } = data[0]; getWeatherDetails(name, latitude, longitude); }).catch(() => { alert("An error occurred while fetching the city name!"); }); }, error => { // Show alert if user denied the location permission if (error.code === error.PERMISSION_DENIED) { alert("Geolocation request denied. Please reset location permission to grant access again."); } else { alert("Geolocation request error. Please reset location permission."); } }); } locationButton.addEventListener("click", getUserCoordinates); searchButton.addEventListener("click", getCityCoordinates); cityInput.addEventListener("keyup", e => e.key === "Enter" && getCityCoordinates());
If you encounter any difficulties while creating your weather app or your code is not working as expected, you can download the source code files for this weather app project for free by clicking the Download button. Keep in mind that after downloading the file, you’ll have to paste an “OpenWeatherMap API Key into the API_KEY variable in the script.js file.
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;}