Weather App Project Using HTML, CSS, and JavaScript
Building a Weather App is an excellent way to improve your web development skills while learning how to work with real-world data. This project combines HTML for the page structure, CSS for modern styling, and JavaScript for adding interactivity. It also demonstrates how to connect a website to a third-party API to display live weather information.
The application allows users to search for any city and instantly view current weather conditions, including temperature, humidity, wind speed, and a brief weather description. It also includes useful features such as weather icons, geolocation support, temperature unit conversion, and responsive design, making it suitable for both desktop and mobile devices.
Developing a Weather App introduces important programming concepts such as asynchronous JavaScript, the Fetch API, JSON data handling, DOM manipulation, and error handling. These are practical skills used in many modern web applications and are valuable for beginners who want to build real-world projects.
Whether you are a student learning web development or an aspiring front-end developer building a portfolio, this project provides hands-on experience with technologies commonly used in the industry. By completing it, you will gain a better understanding of how websites interact with external services and how to create responsive, user-friendly interfaces.
If you are following this tutorial, be sure to experiment with additional features such as a five-day weather forecast, dark mode, sunrise and sunset times, air quality information, and weather alerts. These enhancements will help you expand your knowledge and create even more impressive web applications.
This Weather App project is designed for educational purposes and serves as a practical example of how HTML, CSS, JavaScript, and APIs can work together to create a functional and visually appealing web application. It is an excellent project to include in your coding portfolio or publish on your technology blog for readers who want to learn modern web development.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App | KodaTech</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="weather-card">
<h1>🌤 Weather App</h1>
<p class="subtitle">Live Weather Forecast</p>
<div class="search-box">
<input
type="text"
id="cityInput"
placeholder="Enter City Name">
<button id="searchBtn">Search</button>
</div>
<button id="locationBtn" class="location-btn">
📍 Use My Location
</button>
<div id="loading" class="loading">
Loading Weather...
</div>
<div class="weather-info">
<img
id="weatherIcon"
src="images/weather.png"
alt="Weather">
<h2 id="cityName"></h2>
<h3 id="temperature"></h3>
<button id="toggleUnit">
°C / °F
</button>
<p id="description"></p>
<p id="dateTime"></p>
<div class="details">
<div class="detail-box">
<h4>Humidity</h4>
<p id="humidity"></p>
</div>
<div class="detail-box">
<h4>Wind</h4>
<p id="wind"></p>
</div>
</div>
</div>
</div>
<div class="weather-info">
<img id="weatherIcon" src="images/weather.png" alt="Weather Icon">
<h2 id="cityName">Lagos</h2>
<h3 id="temperature">28°C</h3>
<p id="description">Cloudy</p>
<div class="details">
<div class="detail-box">
<h4>Humidity</h4>
<p id="humidity">65%</p>
</div>
<div class="detail-box">
<h4>Wind</h4>
<p id="wind">10 km/h</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:linear-gradient(135deg,#2193b0,#6dd5ed);
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.container{
width:100%;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}
.weather-card{
background:#fff;
width:420px;
padding:35px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.2);
text-align:center;
}
.weather-card h1{
color:#333;
margin-bottom:10px;
}
.subtitle{
color:#666;
margin-bottom:25px;
}
.search-box{
display:flex;
justify-content:space-between;
margin-bottom:30px;
}
.search-box input{
width:75%;
padding:14px;
border:none;
outline:none;
border-radius:10px;
background:#f1f1f1;
font-size:16px;
}
.search-box button{
width:22%;
border:none;
background:#2193b0;
color:#fff;
font-size:16px;
border-radius:10px;
cursor:pointer;
transition:.3s;
}
.search-box button:hover{
background:#1c7d95;
}
.weather-info img{
width:120px;
margin-bottom:20px;
}
.weather-info h2{
font-size:35px;
color:#333;
}
.weather-info h3{
font-size:55px;
margin:10px 0;
color:#2193b0;
}
.weather-info p{
font-size:20px;
color:#555;
margin-bottom:25px;
}
.details{
display:flex;
justify-content:space-between;
margin-top:20px;
}
.detail-box{
background:#f7f7f7;
padding:20px;
width:48%;
border-radius:15px;
}
.detail-box h4{
color:#333;
margin-bottom:10px;
}
.detail-box p{
font-size:22px;
color:#2193b0;
font-weight:600;
}
@media(max-width:500px){
.weather-card{
width:100%;
padding:25px;
}
.search-box{
flex-direction:column;
}
.search-box input{
width:100%;
margin-bottom:15px;
}
.search-box button{
width:100%;
padding:14px;
}
.details{
flex-direction:column;
}
.detail-box{
width:100%;
margin-bottom:15px;
}
.weather-info h3{
font-size:45px;
}
}
.loading{
display:none;
margin:20px 0;
font-weight:bold;
color:#2193b0;
}
.location-btn{
width:100%;
padding:12px;
margin-bottom:20px;
background:#28a745;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
font-size:16px;
}
.location-btn:hover{
background:#218838;
}
#toggleUnit{
margin:15px 0;
padding:10px 20px;
border:none;
border-radius:8px;
background:#333;
color:white;
cursor:pointer;
}
.weather-card{
transition:0.5s;
}
