Skip to content

A responsive web app that shows real-time weather information using OpenWeatherMap API, with features like weather forecasts and unit toggle.

Notifications You must be signed in to change notification settings

Guten-Morgen1302/weather-app

Repository files navigation

Weather App ๐ŸŒค๏ธ

Overview

Weather App is a responsive and modern web application that allows users to check the current weather and forecast for any city around the world. The app fetches real-time weather data from a weather API and displays it in an easy-to-read and visually appealing format. The application also provides various additional features such as hourly forecasts, weekly weather data, and dynamic weather-based backgrounds.

Features

  • ๐ŸŒค๏ธ View Current Weather: Displays real-time weather data for any city.
  • ๐Ÿ•“ View Hourly Weather: Plan your day with an hourly forecast.
  • ๐Ÿ“… View Weekly Forecast: View a 7-day weather forecast for the selected city.
  • ๐ŸŒก๏ธ Detailed Weather Information: Get temperature, humidity, wind speed, and more.
  • ๐ŸŒ Weather Data Caching: The app supports offline mode, so you can access weather info even without internet.
  • ๐ŸŒ Localization: Choose your preferred language.
  • ๐Ÿงฎ Metric or Imperial Units: Customize the temperature and wind speed units.
  • ๐Ÿ”„ Celsius/Fahrenheit Toggle: Switch between Celsius and Fahrenheit.
  • โฐ 12/24 Hour Time Formats: Adjust the time display based on your preference.
  • ๐ŸŒˆ Dynamic Backgrounds: The background image changes based on the current weather.
  • ๐ŸŒŸ Weather Icons: Icons change based on the weather (e.g., sun, clouds, rain).

Screenshots

Here are two screenshots of the Weather App:

Screenshot 1

Weather App Screenshot 1

Screenshot 2

Weather App Screenshot 2

Tech Stack

  • Frontend:
    • HTML5, CSS3, JavaScript
    • API: OpenWeatherMap API (or any other weather API)
    • Framework: None (Vanilla JS)
  • Design:
    • Responsive design using Flexbox and CSS Grid
    • Modern UI with weather-specific icons and backgrounds

How to Run the Project Locally

Prerequisites

  • You need Node.js installed on your machine.
  • You'll need a weather API key from OpenWeatherMap or another weather service.

Steps to Set Up the Project

  1. Clone the repository:
  git clone https://github.com/Guten-Morgen1302/weather-app.git
Navigate to the project directory:

cd weather-app
Install the required dependencies (if any):

npm install
Add your API key to the project:

Open the script.js (or wherever the API key is used).
Replace the placeholder with your API key.
Open the index.html file in a web browser, or start a local server to run the project:

If youโ€™re using VS Code, you can use the Live Server extension to launch it locally.
View the app in your browser at http://localhost:3000 (or the default port).

๐Ÿค Contributing
Feel free to fork this repository and submit pull requests for improvements or additional features. If you have any issues or suggestions, feel free to open an issue in the repository.

๐Ÿ“„ License
This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™ Acknowledgments
Thanks to OpenWeatherMap for providing the weather API.
Inspiration from various weather apps for the design and functionality.

About

A responsive web app that shows real-time weather information using OpenWeatherMap API, with features like weather forecasts and unit toggle.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published