Weather apps are essential tools that help us plan our days better. I recently developed a Weather Forecast App using HTML, CSS, JavaScript, and an external weather API. This app allows users to check real-time weather updates for any city. Here’s how I built it and how you can try it out.
Key Features of the Weather Forecast App
- Real-Time Weather Updates: Users can search for any city and receive accurate, up-to-date weather information.
- Dynamic Backgrounds: The app adjusts its background based on the current weather conditions.
- API Integration: Utilizes a reliable weather API for fetching data.
- Responsive Design: Works seamlessly across desktop and mobile devices.
Check out the full source code and contribute to the project on GitHub.
Getting Started with the Weather Forecast App
Prerequisites
To run this app locally, you need:
- A basic understanding of HTML, CSS, and JavaScript.
- A free weather API key from OpenWeatherMap.
Clone the Repository
To start, clone the repository:
$ git clone https://github.com/mrMehulbhargav/Weather-Forecast-App.gitCode Walkthrough
HTML Structure
The app’s HTML file defines the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Forecast App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<h1>Weather Forecast</h1>
<input type="text" id="city" placeholder="Enter city name">
<button id="search">Search</button>
<div id="weather-result"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styling
Here’s a snippet of the app’s responsive design:
body {
font-family: Arial, sans-serif;
background: #87ceeb;
text-align: center;
}
.app-container {
margin: 50px auto;
padding: 20px;
max-width: 400px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}JavaScript Functionality
The core functionality is implemented in JavaScript. Here’s how the API call is made:
document.getElementById('search').addEventListener('click', () => {
const city = document.getElementById('city').value;
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const result = `
<h2>${data.name}, ${data.sys.country}</h2>
<p>Temperature: ${data.main.temp} °C</p>
<p>Weather: ${data.weather[0].description}</p>
`;
document.getElementById('weather-result').innerHTML = result;
})
.catch(error => console.error('Error fetching data:', error));
});Why Should You Check Out This Repository?
- Educational Value: Whether you’re a beginner or an experienced developer, this project demonstrates how to integrate APIs into web apps.
- Customizable: You can easily modify the app’s design or extend its features.
- Open Source: Contribute to the project by suggesting improvements or adding new features.
Explore the complete codebase on my GitHub: Weather Forecast App.
Conclusion
Building a weather app is a fantastic way to enhance your JavaScript skills while creating a practical tool. Feel free to clone the repository, try the app, and share your feedback.
If you found this blog helpful, visit my GitHub profile to explore more projects, and stay tuned for updates. Don’t forget to star the repository if you like it!
