project demo
Introduction:
Welcome to this tutorial! In this project, we’re going to build a Modern Weather App using HTML, CSS, and JavaScript that fetches real-time weather data using the OpenWeatherMap API.
Here’s what we’ll cover step by step:
✅ Clean & Responsive UI: We’ll design a sleek weather card with modern visuals using CSS, gradients, and icons.
✅ Search Functionality: Users can search for any city around the world.
✅ Live Weather Data: Using the OpenWeatherMap API, we’ll fetch real-time weather updates like temperature, humidity, wind speed, and current weather condition (like Clear, Rainy, Cloudy, etc.).
✅ Dynamic Content Update: JavaScript will be used to dynamically update the weather card based on the city searched.
✅ Font Awesome Icons & Weather Images: We’ll make the UI visually appealing using icons and weather condition images.
By the end of this tutorial, you’ll have a fully functional and visually attractive weather app that you can use or customize for your portfolio or personal website. Let’s get started! 🌦️💻
HTML Code:
....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Weather App</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
<div class="container">
<div class="search-container">
<input type="text" placeholder="Seach here..." class="search-input">
<button class="search-btn">
<i class="fas fa-magnifying-glass"></i>
</button>
</div>
<div class="card">
<div class="temp-container">
<div class="img-card">
<img src="images/sun-cloud.png" alt="">
<h2 class="temp">21°C</h2>
</div>
</div>
<div class="content">
<h2 class="city-name">Dubai, UAE</h2>
<span class="weather">Clear</span>
</div>
<div class="bottom-cards">
<div class="humidity">
<img src="images/humidity.svg" alt="">
<span>56% humidity</span>
</div>
<div class="divider"></div>
<div class="wind">
<img src="images/wind.svg" alt="">
<span>6.07 KM/H</span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
...Explanation:
The HTML structure of this weather app is clean and simple, designed to support a modern and responsive layout. The entire content is wrapped inside a main <div> with the class container, which centers the app on the screen. At the top, there is a search-container section containing an input field and a search button with a magnifying glass icon, allowing users to search for weather in any city.
Below that, the card section displays the weather details, including an image representing the current weather, the temperature, city name, and weather condition.
The bottom part of the card shows extra information such as humidity and wind speed, each with its own icon and label. Semantic tags and organized class names make the code easy to understand and style with CSS.
CSS Code:
...
...
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, #1033be 0%, #5182e5 100%);
}
.wrapper {
width: 100%;
max-width: 400px;
background: #1951ec;
color: #e8e8e8;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.search-container {
padding: 20px;
background: #1951ec;
display: flex;
gap: 10px;
}
.search-input {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}
.search-input:focus {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 0 2px #0053d8;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.search-btn {
width: 46px;
height: 46px;
border: none;
border-radius: 8px;
background: #0053d8;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #004fce;
transform: translateY(-2px);
}
.card {
padding: 20px;
text-align: center;
margin-top: -20px;
}
.img-card img {
width: 100px;
height: 100px;
object-fit: cover;
filter: drop-shadow(0 5px 15px rgba(0, 180, 216, 0.3));
}
.temp {
font-size: 3rem;
font-weight: 300;
margin-bottom: 10px;
}
.content {
margin-bottom: 20px;
}
.city-name {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.weather {
font-size: 14px;
color: rgba(232, 232, 232, 0.8);
letter-spacing: 1px;
}
.bottom-cards {
display: flex;
justify-content: space-around;
background: #2157ed;
padding: 20px;
border-radius: 12px;
}
.humidity,
.wind {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.humidity img,
.wind img {
width: 30px;
height: 30px;
}
.humidity span,
.wind span {
font-size: 12px;
font-weight: 500;
}
.divider {
width: 1px;
background: rgba(255, 255, 255, 0.1);
}
....
Explanation:
It begins with a universal reset using the * selector to remove default margin and padding, and sets the Poppins font for a smooth, readable look. The body is styled to center the app using Flexbox and given a beautiful blue gradient background. The main weather card (.wrapper) is styled with rounded corners, shadows, and a rich blue color to make it visually appealing.
The .search-container styles the input box and button with soft transparent backgrounds and hover effects for interactivity. The temperature, city name, and weather info are styled with different font sizes and spacing to maintain a clear visual hierarchy.
The bottom section displays humidity and wind speed using Flexbox and icons, all styled with matching colors and spacing. The overall styling focuses on simplicity, clarity, and a professional look, making the app attractive on all devices.
JavaScript Code:
...
....
document.addEventListener("DOMContentLoaded", () => {
const search = document.querySelector(".search-input");
const searchBtn = document.querySelector(".search-btn");
let card = document.querySelector(".card");
const getWeather = async (city) => {
let key = "13d3557911484c69e8e4e29b09c4f1da";
let API_URL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}&units=metric`;
let response = await fetch(API_URL);
let data = await response.json();
console.log(data);
card.innerHTML = `
<div class="temp-container">
<div class="img-card">
<img src="https://openweathermap.org/img/wn/${
data.weather[0].icon
}@2x.png" alt="">
<h2 class="temp">${Math.round(data.main.temp)}°C</h2>
</div>
</div>
<div class="content">
<h2 class="city-name">${data.name}, ${data.sys.country}</h2>
<span class="weather">${data.weather[0].main}</span>
</div>
<div class="bottom-cards">
<div class="humidity">
<img src="images/humidity.svg" alt="">
<span>${data.main.humidity}% humidity</span>
</div>
<div class="divider"></div>
<div class="wind">
<img src="images/wind.svg" alt="">
<span>${data.wind.speed} KM/H</span>
</div>
</div>
</div>
`;
};
searchBtn.addEventListener("click", () => {
getWeather(search.value);
});
});
....
Explanation:
The JavaScript code adds functionality to the weather app by connecting it to the OpenWeatherMap API and dynamically updating the content based on user input. When the page loads, an event listener waits for the search button to be clicked. Once clicked, the app captures the value entered in the input field (city name) and calls the getWeather function.
This function uses fetch() to send a request to the API and retrieves live weather data in JSON format. After receiving the data, it updates the .card section with the latest weather icon, temperature, city name, weather condition, humidity, and wind speed. The updated values are injected into the HTML using template literals. This script allows users to get real-time weather updates instantly by just entering the city name.
Source Code:
Download “Weather-App.7z” Weather-App.7z – Downloaded 242 times – 3.44 KB
Conclusions:
In this project, we successfully created a Modern Weather App using Html, CSS, and JavaScript. We designed a clean and responsive user interface that allows users to search for any city and view real-time weather updates. With the help of the OpenWeatherMap API, we fetched and displayed dynamic weather data including temperature, weather condition, humidity, and wind speed. We also styled the app with smooth gradients, icons, and layout effects to enhance the user experience. This project is a great example of combining API integration with front-end development, and it can be a valuable addition to your portfolio.
