project weather

Technical Analysis

Weather Data Display
Description
The weather app dynamically fetches real-time weather data from the OpenWeatherMap API and displays key weather information like temperature, weather condition (sunny, rainy, etc.), humidity, wind speed, and an icon representing the current weather. The app also shows a 4-day weather forecast to help users plan ahead.

Implementation
The app makes a GET request to the OpenWeatherMap API using JavaScript's fetch method to retrieve data about the user's location or a specified city. The weather data is then parsed and extracted (temperature, condition, etc.) and displayed in the UI using DOM manipulation. A forecast for the next 4 days is displayed with corresponding icons for each day based on the forecast data returned by the API.

Design Approach
To ensure a clean and user-friendly experience, weather data is displayed in clearly labeled sections: current weather at the top, followed by the 4-day forecast. The weather icons are used to visually represent conditions (sun, clouds, rain, etc.), making it easier for users to interpret the information quickly. The app uses a responsive design to ensure that the weather information is readable on both desktop and mobile devices.
- Code Snippets
  
  API Call to Get Weather Data
  
  This function CheckCity takes the city input and fetches weather data. It then checks if the response is valid (response.ok), extracts the necessary information from the response (data.main.temp, data.wind.speed, etc.), and updates the UI accordingly.
  
  Temperature Conversion to Celsius
  
  The function ChangetoCelsius takes the temperature subtracts 273.15 to convert it to Celsius, and returns the rounded value.
  
  Updating the UI with Weather Data
  
  This part of the code updates various elements on the page with the fetched weather data (city name, humidity, wind speed, temperature, and weather type).
Challenges

Managing User Inputs for City Searches

Challange:

When users search for a city, they might enter incorrect spellings or a city that doesn't exist. This can result in an error or no data being returned from the API.

Solution:

I handled this by implementing error checking. If the API returns no data or an error, a friendly message ("Invalid City Name") is shown to guide the user. This ensures the user understands why the weather data isn't displaying.

Dynamic Theme Change Based on Weather
Description
The app changes its theme dynamically based on the current weather conditions. For example, when the weather is sunny, the background becomes brighter, while rainy conditions trigger a darker theme with more muted colors, creating a visual representation of the weather.

Implementation
When the weather data is fetched from the OpenWeatherMap API, the condition (e.g., sunny, rainy, cloudy) is checked. Based on the condition, the app dynamically adds a corresponding CSS class to the body tag using JavaScript, which adjusts the background color, text color, and other elements for the desired theme. Transitions are implemented to smoothly shift between themes.

Design Approach
The design adapts to the weather, enhancing the user's experience by providing a visually intuitive representation of the current weather. The app’s color scheme changes to match the weather (e.g., warm yellow tones for sunny days, cooler blue tones for rainy days), making it not only functional but also engaging.

Click for details

×

Redesigned Weather App: Dynamic Themes Based on Weather
The updated design incorporates dynamic themes that change based on real-time weather conditions. For example, when the weather is clear, the app background becomes bright and sunny, while rainy weather activates darker, stormy tones. This visually engaging approach enhances the user experience, allowing users to instantly understand the weather condition through the theme. The redesign not only improves the aesthetics but also makes the app more intuitive and immersive, offering a visually dynamic and enjoyable weather tracking experience.

Old Weather App Design: Static Interface
The previous version of the weather app used a static design, which applied the same visual theme regardless of the weather conditions. This lack of dynamic theming made it harder for users to immediately associate weather data with a visual context. For instance, the same layout and color scheme were used for sunny, cloudy, or rainy conditions, leading to a less engaging experience. This design lacked the immersive, visual appeal that a dynamic theme could provide, reducing the app's overall intuitiveness.
- Code Snippets
  
  CSS: Defining Themes
  
  This code defines the themes that can be used by updaing the variables depending on the weather
  
  Switching Themes Based on Weather
  
  The following JavaScript handles the dynamic theme switching. It checks the weather condition and applies the appropriate theme classes
  
  Calling Theme Change Based on Weather Data
  
  This JavaScript function updates the UI with the correct weather information and switches the theme accordingly.
Challanges

Ensuring the Correct Theme is Displayed

Challange:

Sometimes the wrong theme would be applied, or the theme wouldn't update properly when switching locations or reloading the page.

Solution:

Implemented a switch statement that assigns a specific numeric ID to each weather condition (weatherType). This ID is then used to apply the correct theme dynamically. By ensuring each weather condition is mapped to the right theme class, the issue was resolved.

Handling Theme Updates When Switching Between Dark and Light Modes

Challange:

When toggling between light and dark mode, old theme classes were sometimes still applied, causing visual inconsistencies.

Solution:

Before applying a new theme, remove all previous theme classes. Used document.body.classList.remove(...) to clear existing theme classes before adding the new one. This ensures a smooth and accurate transition between themes.

What I Learnt

Integrating Real-World Data with APIs:

This project was my first experience working with an API to fetch and display real-world data. I learned how to make asynchronous API requests using fetch(), handle JSON responses, and dynamically update the UI based on real-time weather data. Additionally, I gained experience in error handling, ensuring the app functions smoothly even when the API request fails or unexpected data is received. The project also deepened my understanding of asynchronous programming and how to manage state changes dynamically.

Retrospective

Future Improvements:

Looking back at this project, I encountered several challenges, from ensuring the correct weather theme was displayed to handling API response inconsistencies. Debugging these issues taught me the importance of structured problem-solving and testing edge cases. I also realized the importance of responsive design, as displaying forecast data on different screen sizes required careful layout adjustments.

API Call to Get Weather Data

Temperature Conversion to Celsius

Updating the UI with Weather Data

CSS: Defining Themes

Switching Themes Based on Weather

Calling Theme Change Based on Weather Data

Get and Display the Date

Get and Display the Current Time

Fetching the 4-Day Forecast Data

Structure for Displaying Forecast