How to Build a Weather Forecast Web App Using HTML, CSS & JavaScript (2025 Guide)
A weather forecast web app is a popular tool for users to check current weather conditions and forecasts. Using HTML, CSS, and JavaScript, you can create a responsive, SEO-friendly, and monetizable weather app in 2025. This guide will show you how.
Why Build a Weather Web App?
- High Demand: Users frequently check weather online
- Monetization: Display ads, affiliate weather tools, or premium features
- Learning Opportunity: Practice API integration, JavaScript, and responsive design
- Portfolio Project: Showcase your web development skills
Step 1: Set Up Project Structure
- Create folder:
weather-app - Add files:
index.html,style.css,script.js - Add subfolders:
images,icons
Step 2: Build HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Weather Forecast App</h1>
</header>
<main>
<input type="text" id="city-input" placeholder="Enter city name">
<button id="get-weather-btn">Get Weather</button>
<div id="weather-display"></div>
</main>
<footer>
<p>© 2025 Weather Forecast App</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Step 3: Integrate Weather API Using JavaScript
const btn = document.getElementById("get-weather-btn");
const cityInput = document.getElementById("city-input");
const display = document.getElementById("weather-display");
const apiKey = "YOUR_OPENWEATHERMAP_API_KEY";
btn.addEventListener("click", async () => {
const city = cityInput.value.trim();
if(!city) {
alert("Please enter a city name");
return;
}
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
const data = await response.json();
if(data.cod === 200) {
display.innerHTML = `
<h2>Weather in ${data.name}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Condition: ${data.weather[0].description}</p>
<p>Humidity: ${data.main.humidity}%</p>
`;
} else {
display.innerHTML = "<p>City not found. Try again.</p>";
}
});
Step 4: Style Your App with CSS
body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; }
header { background: #2196F3; color: #fff; padding: 20px; }
main { padding: 40px 20px; }
input { padding: 10px; width: 60%; }
button { padding: 10px 20px; margin-left: 10px; background: #2196F3; color: #fff; border: none; cursor: pointer; }
button:hover { background: #1976D2; }
#weather-display { margin-top: 20px; border: 1px solid #ccc; padding: 20px; width: 60%; margin-left: auto; margin-right: auto; border-radius: 10px; }
footer { background: #333; color: #fff; padding: 20px; }
@media (max-width: 768px) { input, #weather-display { width: 90%; } }
Step 5: Monetization
- Integrate AdSense in footer or sidebar
- Offer premium weather insights or forecasts
- Affiliate links for weather gadgets or apps
- Promote related content or courses
Step 6: SEO Optimization
- Descriptive meta title and description
- Alt text for icons or images
- Responsive and fast-loading pages
- Structured data for weather forecasts
Step 7: Test and Launch
- Test city input, API response, and display
- Check mobile and desktop responsiveness
- Verify AdSense and affiliate integration
- Deploy to hosting platform and promote your app
Conclusion
Building a weather forecast web app using HTML, CSS, and JavaScript in 2025 is practical, high-demand, and monetizable. Follow this guide to create a responsive, SEO-friendly, and user-friendly app that provides accurate weather information while generating revenue.
Tags
Technology