top of page

Weather App

A web-based application designed to provide users with real-time weather information for any city around the world. Built using HTML, CSS, and JavaScript, the app leverages the OpenWeatherMap API to fetch and display weather data, including temperature, humidity, wind speed, and weather conditions like rain, clouds, or clear skies. The app is designed to be responsive and user-friendly, offering a seamless experience across various devices.

Languages

Java, CSS, HTML

Year

2024

coding projects 1.jpg

GitHub link

Code Snippets

Features & 
Functions

Technical Details:

  • Search Functionality: Users can enter the name of any city in the search box to retrieve current weather information for that location.

  • Real-Time Weather Data: The app fetches real-time data from the OpenWeatherMap API, ensuring that users receive the most up-to-date weather information.

  • Weather Details: The app displays key weather metrics, including:

    • Temperature in Celsius

    • Humidity percentage

    • Wind speed in kilometers per hour

    • Current weather conditions with appropriate icons (e.g., clear, cloudy, rainy)

  • Error Handling: If an invalid city name is entered, the app gracefully handles the error by displaying an "Invalid City Name" message and hiding the weather information.

  • Responsive Design: The app is built with a responsive design that adapts to different screen sizes, ensuring a consistent experience on mobile devices, tablets, and desktops.

Technical Details:

  • API Integration: The app integrates with the OpenWeatherMap API using a simple fetch request. The API key is securely stored in the JavaScript file, and requests are made dynamically based on user input.

  • JavaScript Logic: The app's logic is written in JavaScript, handling API calls, data parsing, and DOM manipulation to update the UI with weather details.

  • Error Handling: The app includes robust error handling to manage API errors, such as 404 responses when an invalid city name is entered. This ensures that the user experience is not disrupted by incorrect inputs.

Improvements and Future Enhancements:

  • Geolocation Feature: Adding a feature to automatically detect the user's location and display the weather for that location upon app load.

  • Extended Forecast: Implementing an extended weather forecast feature to show weather predictions for the next few days.

  • Multiple Units: Allowing users to switch between Celsius and Fahrenheit units for temperature display.

  • Dark Mode: Adding a dark mode option for better usability in low-light conditions.

bottom of page