This Weather App fetches and displays weather information based on the city name entered by the user. It uses the OpenWeatherMap API to get the weather data. try weather app Weather app
- Basic knowledge of HTML, CSS, and JavaScript
- An API key from OpenWeatherMap
- Clone the repository:
git clone https://github.com/HashimThePassionate/weather-app.git
- Navigate to the project directory:
cd weather-app
- Open
index.html
in your favorite web browser.
- Enter the name of the city in the search box.
- Click the search button to fetch and display the weather information.
The script selects various elements from the HTML document to interact with:
const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
container
: The main container for the weather app.search
: The search button inside the search box.weatherBox
: The box where the weather image, temperature, and description will be displayed.weatherDetails
: The section where additional weather details like humidity and wind speed will be shown.
An event listener is added to the search button to trigger the weather data fetch when clicked:
search.addEventListener('click', async () => {
When the search button is clicked, the script fetches weather data for the specified city:
const APIKey = 'your_api_key_here';
const city = document.querySelector('.search-box input').value;
if (city === '') return;
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const json = await response.json();
APIKey
: Your OpenWeatherMap API key.city
: The city name entered by the user.- The
fetch
function is used to get weather data from the OpenWeatherMap API.
If the weather data is successfully fetched, the UI is updated accordingly:
const image = document.querySelector('.weather-box img');
const temperature = document.querySelector('.weather-box .temperature');
const description = document.querySelector('.weather-box .description');
const humidity = document.querySelector('.weather-details .humidity span');
const wind = document.querySelector('.weather-details .wind span');
const weatherImages = {
Clear: 'images/clear.png',
Rain: 'images/rain.png',
Clouds: 'images/cloud.png',
Snow: 'images/snow.png',
Mist: 'images/mist.png',
Haze: 'images/mist.png'
};
if (json.weather && json.weather[0]) {
const weatherMain = json.weather[0].main;
image.src = weatherImages[weatherMain] || 'images/cloud.png'; // Fallback image if condition not matched
temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;
description.innerHTML = `${json.weather[0].description}`;
humidity.innerHTML = `${json.main.humidity}%`;
wind.innerHTML = `${parseInt(json.wind.speed)}km/h`;
} else {
// Handle cases where weather information is not available
temperature.innerHTML = '';
description.innerHTML = 'No weather information available';
humidity.innerHTML = '';
wind.innerHTML = '';
image.src = 'images/404.png';
}
weatherImages
: An object mapping weather conditions to corresponding image paths.- The UI elements (image, temperature, description, humidity, and wind) are updated based on the fetched weather data.
The script includes error handling to manage cases where the fetch operation fails:
} catch (error) {
console.error('There has been a problem with your fetch operation:', error);
// Handle errors gracefully here, maybe show an error message to the user
}
- Any errors during the fetch operation are caught and logged to the console.
- Additional error handling can be implemented to display user-friendly messages.
Replace your_api_key_here
with your actual OpenWeatherMap API key in the code. This README provides a comprehensive guide to understanding and using the weather app.