Weather App Using HTML , CSS & JavaScript With Source Code

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:
Get Discount on Top Educational Courses
HTML:
Weather App
Weather App
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 = `
Current Weather
Location: ${location}
Temperature: ${tempC}°C
Condition: ${condition}
`;
}
function displayForecastWeather(data) {
const forecast = data.forecast.forecastday;
let forecastHTML = 'Forecast Weather
';
forecast.forEach(day => {
const date = day.date;
const maxTempC = day.day.maxtemp_c;
const minTempC = day
Output:

Find More Projects
resume screener in python using python introduction The hiring process often begins with reviewing numerous resumes to filter out the most suitable …
expense tracer in python using GUI introduction Tracking daily expenses is a vital part of personal financial management. Whether you’re a student …
my personal diary in python using GUI introduction Keeping a personal diary in python is one of the oldest and most effective …
interview question app in python using GUI introduction In today’s rapidly evolving tech landscape, landing a job often requires more than just …
sudoko solver in python using GUI introduction Sudoku, a classic combinatorial number-placement puzzle, offers an engaging challenge that blends logic, pattern recognition, …
handwritten digit recognizer in python introduction In an era where artificial intelligence and deep learning are transforming industries, real-time visual recognition has …