Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amulyamachhan/weather-app

This Weather Website App allows users to search for the weather of a particular city. It fetches real-time weather data such as temperature, wind speed, humidity, and visibility factors using the OpenWeatherMap API. The app is built using HTML, CSS, and JavaScript.
https://github.com/amulyamachhan/weather-app

asynchronous css html javascript openweather-api responsive-web-design web-design

Last synced: 6 days ago
JSON representation

This Weather Website App allows users to search for the weather of a particular city. It fetches real-time weather data such as temperature, wind speed, humidity, and visibility factors using the OpenWeatherMap API. The app is built using HTML, CSS, and JavaScript.

Awesome Lists containing this project

README

        

# Weather Website App

This Weather Website App allows users to search for the weather of a particular city. It fetches real-time weather data such as temperature, wind speed, humidity, and visibility factors using the OpenWeatherMap API. The app is built using HTML, CSS, and JavaScript.

You can view this website [here](https://amulyamachhan.github.io/Weather-App/).

## Screenshot
![weatherapp](https://github.com/AmulyaMachhan/Weather-App/assets/111338400/076e54ab-8d10-4a19-8cf4-c5cc6828e622)

## Features

- **Search Functionality:** Users can input the name of a city and search for its weather information.
- **Real-time Weather Data:** The app fetches real-time weather data from the OpenWeatherMap API, ensuring accuracy and reliability.
- **Temperature Display:** Displays the current temperature of the searched city in Celsius.
- **Wind Speed:** Provides information about the wind speed in meters per second.
- **Humidity:** Displays the humidity percentage of the searched city.
- **Visibility:** Shows the visibility factor in meters.

## Technologies Used

- **HTML:** Used for the structure and layout of the web page.
- **CSS:** Used for styling the user interface and enhancing the visual appeal.
- **JavaScript:** Used to fetch data from the OpenWeatherMap API and dynamically update the UI based on user input.
- **OpenWeatherMap API:** Utilized to retrieve real-time weather data for the searched city.

## Installation

To run the Weather Website App locally, follow these steps:

1. Clone this repository to your local machine:
``
git clone https://github.com/your-username/weather-website-app.git
``
2. Navigate to the project directory:
``
cd weather-website-app
``
3. Open the `index.html` file in your preferred web browser.

## Usage
1. Enter the name of a city in the search bar.
2. Press the "Search" button or hit Enter.
3. The app will fetch the weather data for the entered city and display it on the page.

## Contributing

Contributions are welcome! If you'd like to contribute to this project, please fork the repository, make your changes, and submit a pull request.

## Credits

This Weather Website App was created by Amulya Machhan.