Weather App Using HTML , CSS & JavaScript
Introduction:
The Weather App project is a web application that leverages HTML, CSS, and JavaScript to fetch weather data from a weather API and display current weather conditions and forecasts for a specific location. It provides users with real-time weather information, allowing them to stay informed about the weather conditions in their desired location.
The Weather App utilizes an API (in this example, the WeatherAPI) to retrieve weather data based on the user’s input location. The application dynamically fetches the current weather information and the forecast for the upcoming days. It then presents this data in a user-friendly format, making it easy for users to understand and interpret.
Key Features:
Location Input: Users can enter the desired location for which they want to fetch weather information. The app validates the input and prompts users to provide a valid location if necessary.
Current Weather Display: The application fetches and displays the current weather conditions for the specified location. It provides essential information such as temperature, weather condition, and location details.
Forecast Weather Display: The Weather App also fetches and presents the forecasted weather data for the upcoming days. It showcases the predicted temperature and weather condition for each day, allowing users to plan ahead.
API Integration: The app integrates with a weather API (e.g., WeatherAPI) to retrieve weather data. It sends requests to the API, receives the responses containing weather information, and parses the data for display.
Responsive Design: The Weather App is designed to be responsive, ensuring that it works well on different devices and screen sizes. Users can access the app and view weather information on their desktops, laptops, tablets, or mobile devices.
Benefits:
Real-time Weather Information: Users can obtain up-to-date weather data for any desired location, enabling them to make informed decisions based on current and forecasted weather conditions.
User-friendly Interface: The application offers a clean and intuitive interface for entering locations and viewing weather information. It presents data in a clear and organized manner, enhancing the user experience.
Planning and Preparedness: The Weather App allows users to plan their activities and make informed decisions based on weather forecasts. They can adapt their schedules, clothing, or travel plans accordingly, enhancing safety and convenience.
API Integration: By integrating with a weather API, the app can leverage the data and capabilities provided by the API, ensuring accurate and reliable weather information.
The Weather App project offers a practical and useful tool for users who want to stay informed about weather conditions. It demonstrates the power of HTML, CSS, and JavaScript in building web applications that interact with APIs and provide real-time data to enhance user experiences.
Source Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="weather-container">
<h2>Weather App</h2>
<div id="location-container">
<input type="text" id="location-input" placeholder="Enter location">
<button id="submit-btn">Get Weather</button>
</div>
<div id="weather-info">
<div id="current-weather"></div>
<div id="forecast-weather"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
#weather-container {
text-align: center;
}
#location-container {
margin-top: 20px;
}
#location-input {
padding: 5px;
}
#submit-btn {
padding: 5px 10px;
margin-left: 10px;
}
#weather-info {
margin-top: 20px;
}
#current-weather {
font-weight: bold;
}
#forecast-weather {
margin-top: 10px;
}
JavaScript (script.js):
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const submitButton = document.getElementById('submit-btn');
const locationInput = document.getElementById('location-input');
const currentWeatherDiv = document.getElementById('current-weather');
const forecastWeatherDiv = document.getElementById('forecast-weather');
submitButton.addEventListener('click', () => {
const location = locationInput.value;
if (location.trim() === '') {
alert('Please enter a location');
return;
}
fetchWeather(location);
});
async function fetchWeather(location) {
try {
// Fetch current weather data
const currentWeatherURL = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${location}&aqi=no`;
const currentWeatherResponse = await fetch(currentWeatherURL);
const currentWeatherData = await currentWeatherResponse.json();
// Fetch forecast weather data
const forecastWeatherURL = `https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${location}&days=3`;
const forecastWeatherResponse = await fetch(forecastWeatherURL);
const forecastWeatherData = await forecastWeatherResponse.json();
// Display current weather
displayCurrentWeather(currentWeatherData);
// Display forecast weather
displayForecastWeather(forecastWeatherData);
} catch (error) {
console.log('Error:', error);
alert('An error occurred while fetching weather data');
}
}
function displayCurrentWeather(data) {
const location = data.location.name;
const tempC = data.current.temp_c;
const condition = data.current.condition.text;
currentWeatherDiv.innerHTML = `
<h3>Current Weather</h3>
<p>Location: ${location}</p>
<p>Temperature: ${tempC}°C</p>
<p>Condition: ${condition}</p>
`;
}
function displayForecastWeather(data) {
const forecast = data.forecast.forecastday;
let forecastHTML = '<h3>Forecast Weather</h3>';
forecast.forEach(day => {
const date = day.date;
const maxTempC = day.day.maxtemp_c;
const minTempC = day
Output:
Find More Projects
Jungle Dash Game Using Python with source code with pygame module Introduction: Dive into the excitement of jungle adventures with our new …
Building a Tetris Game with Python with source code Introduction: Welcome to the world of Tetris, where falling blocks meet strategic maneuvers …
Super Mario Game Using Python with source code Introduction: Remember playing Super Mario as a kid? It’s that classic game where you …
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
More HTML CSS JS Projects
Get Huge Discounts
