Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Weather App" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Weather App" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Weather App [Source Code]
To get the following HTML, CSS & JS code for the Weather App project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="container">
<div class="search-box">
<i class="fa-solid fa-location-dot"></i>
<input type="text" placeholder="Enter your location">
<button class="fa-solid fa-magnifying-glass"></button>
</div>
<div class="not-found">
<img src="images/location_not_found.png">
<p>Oops..! Location not found😐</p>
</div>
<div class="weather-box">
<img src="">
<p class="temperature"></p>
<p class="description"></p>
</div>
<div class="weather-details">
<div class="humidity">
<i class="fa-solid fa-water"></i>
<div class="text">
<span></span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span></span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: greenyellow;
}
.container {
position: relative;
width: 400px;
height: 105px;
background: #fff;
padding: 28px 32px;
overflow: hidden;
border-radius: 18px;
font-family: "Roboto", sans-serif;
transition: 0.6s ease-out;
}
.search-box {
width: 100%;
height: min-content;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-box input {
color: green;
width: 80%;
font-size: 18px;
font-weight: 500;
text-transform: capitalize;
padding-left: 40px;
border: 0;
outline: none;
border-bottom: 2px solid green;
}
.search-box input::placeholder {
font-size: 18px;
font-weight: 500;
color: green;
opacity: 0.5;
text-transform: capitalize;
}
.search-box button {
cursor: pointer;
width: 50px;
height: 50px;
color: green;
background: #dff6ff;
border: none;
border-radius: 50%;
font-size: 22px;
transition: 0.4s ease;
}
.search-box button:hover {
color: #fff;
background: green;
}
.search-box i {
position: absolute;
color: green;
font-size: 24px;
padding-bottom: 5px;
}
.weather-box {
text-align: center;
}
.weather-box img {
width: 60%;
margin-top: 30px;
}
.weather-box .temperature {
position: relative;
color: green;
font-size: 4rem;
font-weight: 800;
margin-top: 30px;
margin-left: -16px;
}
.weather-box .temperature span {
position: absolute;
margin-left: 4px;
font-size: 1.5rem;
}
.weather-box .description {
color: green;
font-size: 22px;
font-weight: 500;
text-transform: capitalize;
}
.weather-details {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.weather-details .humidity,
.weather-details .wind {
display: flex;
align-items: center;
width: 50%;
height: 100px;
}
.weather-details .humidity {
padding-left: 20px;
justify-content: flex-start;
}
.weather-details .wind {
padding-right: 20px;
justify-content: flex-end;
}
.weather-details i {
color: green;
font-size: 26px;
margin-right: 10px;
margin-top: 6px;
}
.weather-details .text {
padding-left: 10px;
}
.weather-details span {
color: green;
font-size: 22px;
font-weight: 500;
}
.weather-details p {
color: green;
font-size: 14px;
font-weight: 500;
}
.not-found {
width: 100%;
text-align: center;
margin-top: 50px;
scale: 0;
opacity: 0;
display: none;
}
.not-found img {
width: 60%;
}
.not-found p {
color: green;
font-size: 22px;
font-weight: 500;
margin-top: 12px;
}
.weather-box,
.weather-details {
scale: 0;
opacity: 0;
}
.fadeIn {
animation: 0.5s fadeIn forwards;
animation-delay: 0.5s;
}
@keyframes fadeIn {
to {
scale: 1;
opacity: 1;
}
}
JavaScript
const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');
search.addEventListener('click', () => {
// use your api key from open weather api
const APIKey = 'USE_YOUR_API_KEY';
const city = document.querySelector('.search-box input').value;
if (city === '')
return;
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`)
.then(response => response.json())
.then(data => {
console.log(data)
if (data.cod === '404') {
container.style.height = '400px';
weatherBox.style.display = 'none';
weatherDetails.style.display = 'none';
error404.style.display = 'block';
error404.classList.add('fadeIn');
return;
}
error404.style.display = 'none';
error404.classList.remove('fadeIn');
const image = document.querySelector('.weather-box img');
const temperature = document.querySelector('.weather-box .temperature');
const description = document.querySelector('.weather-box .description');
const humidity = document.querySelector('.weather-details .humidity span');
const wind = document.querySelector('.weather-details .wind span');
switch (data.weather[0].main) {
case 'Clear':
image.src = 'images/clear.png';
break;
case 'Rain':
image.src = 'images/rain.png';
break;
case 'Snow':
image.src = 'images/snow.png';
break;
case 'Clouds':
image.src = 'images/cloud.png';
break;
case 'Haze':
image.src = 'images/mist.png';
break;
case 'Mist':
image.src = 'images/mist.png';
break;
default:
image.src = '';
}
temperature.innerHTML = `${parseInt(data.main.temp)}<span>°C</span>`;
description.innerHTML = `${data.weather[0].description}`;
humidity.innerHTML = `${data.main.humidity}%`;
wind.innerHTML = `${parseInt(data.wind.speed)}Km/h`;
weatherBox.style.display = '';
weatherDetails.style.display = '';
weatherBox.classList.add('fadeIn');
weatherDetails.classList.add('fadeIn');
container.style.height = '590px';
});
});
Generating Download Link...