/weather-web-app

Primary LanguageJavaScript

Weather Web App

Overview

The Weather Web App is a user-friendly web application that allows users to check the current weather for a location by making asynchronous requests to a weather API. This app displays weather data in a clear and visually appealing format, handles errors gracefully, and provides additional features such as unit selection and geolocation.

Features

  1. Homepage:

    • A simple and intuitive user interface.
    • Input field to enter a location (city or ZIP code).
    • "Get Weather" button to trigger weather data retrieval.

  2. Weather Display:

    • Current weather conditions for the specified location.
    • Details include temperature, humidity, wind speed, and weather description.

  3. Error Handling:

    • Graceful handling of errors for invalid locations or API issues.
    • User-friendly error messages with guidance on how to proceed.

  4. Unit Selection:

    • Toggle between temperature units (Celsius and Fahrenheit).
    • Weather data updates instantly when changing units.

  5. Geolocation:

    • "Use My Location" button to fetch weather data for the user's current location.
    • Geolocation permission request for accurate location-based weather.

  6. Styling:

    • Visually appealing design with a blue color scheme.
    • CSS styles applied for improved readability and user experience.

  7. Responsive Design:

    • Functional and visually appealing on both desktop and mobile devices.
    • Responsive layout for various screen sizes.

Usage

  1. Enter a location (city or ZIP code) in the input field.
  2. Click the "Get Weather" button to retrieve weather data for the entered location.
  3. Optionally, use the "Use My Location" button to fetch weather data for your current location.
  4. Toggle between Celsius and Fahrenheit using the radio buttons to view temperature in your preferred unit.
  5. The weather data will be displayed, including location, temperature, humidity, wind speed, and weather description.

Setup

To run the Weather Web App, follow these steps:

  1. Clone this repository to your local machine.

  2. Open the index.html file in a web browser to use the app.

Acknowledgments

  • This app uses data from the OpenWeather API.
  • Built with HTML, CSS, and JavaScript.

Enjoy checking the weather with our Weather Web App!