Project Description

An advanced web application for displaying current weather conditions and future forecasts for any city in the world. The app uses APIs to get accurate real-time weather data, with an attractive user interface that changes based on weather conditions. The app supports automatic geolocation to display the weather of the user's current location.

Key Features

• Display detailed current weather conditions (temperature, humidity, wind speed)
• Weather forecast for the next 7 days
• Search for any city in the world
• Automatic geolocation (Geolocation API)
• Dynamic user interface that changes based on weather conditions
• Interactive temperature charts
• Save favorite cities
• Support for different units of measurement (Celsius, Fahrenheit)
• Responsive design with smooth animations
• Animated weather icons

Technologies Used

• HTML5: For basic structure and semantic elements
• CSS3: For advanced design with Animations and Gradients
• JavaScript ES6+: For programming logic and API interaction
• Fetch API: To fetch data from weather servers
• Geolocation API: To determine user location
• OpenWeatherMap API: To get weather data
• Chart.js: For drawing charts

Challenges and Solutions

The main challenge was handling asynchronous requests and managing errors effectively, especially when internet connection fails or data is unavailable for a specific city. This was solved by using Async/Await with comprehensive error handling and displaying clear messages to the user. Performance was also improved through data caching to reduce the number of requests.

Lessons Learned

Through this project, I learned how to integrate with third-party APIs, the importance of proper error handling, and improving user experience by displaying data in an attractive and understandable way.

Code Examples

Here are some examples of the code used in the project:

JavaScript - Fetching Weather Data from API

// Fetch weather data using Async/Await
async function getWeatherData(city) {
    const API_KEY = 'your_api_key_here';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
    
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return {
            temperature: data.main.temp,
            humidity: data.main.humidity,
            windSpeed: data.wind.speed,
            description: data.weather[0].description,
            icon: data.weather[0].icon
        };
    } catch (error) {
        console.error('Error fetching weather:', error);
        throw error;
    }
}

JavaScript - Geolocation

// Get user's current location
function getCurrentLocation() {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject(new Error('Geolocation is not supported'));
            return;
        }
        
        navigator.geolocation.getCurrentPosition(
            (position) => {
                resolve({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                });
            },
            (error) => {
                reject(error);
            }
        );
    });
}

// Using the function
async function loadLocalWeather() {
    try {
        const location = await getCurrentLocation();
        const weather = await getWeatherByCoords(location.latitude, location.longitude);
        displayWeather(weather);
    } catch (error) {
        console.error('Error:', error);
    }
}

Links