https://github.com/dindinyt37/simple-weather-app

A sleek weather dashboard with real-time weather animations, developer testing controls, and Open-Meteo API integration. Features dynamic weather effects including animated clouds, rain, and sun with responsive design
https://github.com/dindinyt37/simple-weather-app

animations api css css-animations html interactive-ui javascript meteorology open-meteo-api real-time responsive-design weather weather-app weather-dashboard web-animations

Last synced: about 2 months ago
JSON representation

A sleek weather dashboard with real-time weather animations, developer testing controls, and Open-Meteo API integration. Features dynamic weather effects including animated clouds, rain, and sun with responsive design

• Host: GitHub
• URL: https://github.com/dindinyt37/simple-weather-app
• Owner: DindinYT37
• License: mit
• Created: 2025-02-17T15:54:37.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-18T19:04:30.000Z (over 1 year ago)
• Last Synced: 2025-06-05T11:07:25.525Z (about 1 year ago)
• Topics: animations, api, css, css-animations, html, interactive-ui, javascript, meteorology, open-meteo-api, real-time, responsive-design, weather, weather-app, weather-dashboard, web-animations
• Language: JavaScript
• Homepage:
• Size: 3.52 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SimpleWeatherApp 🌤️

![GitHub](https://img.shields.io/github/license/DindinYT37/simple-weather-app)

![GitHub last commit](https://img.shields.io/github/last-commit/DindinYT37/simple-weather-app)

![GitHub stars](https://img.shields.io/github/stars/DindinYT37/simple-weather-app)

A beautiful, interactive weather dashboard with real-time weather animations and developer controls.

![Weather App Demo](demo.gif)

## ✨ Features

- 🌍 Real-time weather data from Open-Meteo API

- 🎨 Dynamic weather animations

- 🌡️ Temperature, humidity, and wind speed tracking

- 🛠️ Developer controls for testing weather conditions

- 📱 Responsive design

- 🌈 Beautiful gradients for different weather states

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🚀 Installation

1. Download the three files (`index.html`, `main.css`, and `app.js`)

2. Place them in the same folder

3. Open `index.html` in your web browser

That's it! No additional setup required.

## 🔧 Usage

1. Enter a city name in the search box

2. Press Enter or click the Search button

3. View real-time weather information and animations

### Developer Controls

Access the developer panel by clicking the ⚙️ icon:

- Weather Type: Clear, Cloudy, Rainy

- Cloud Coverage: Scattered, Broken, Overcast

- Rain Intensity: Light, Moderate, Heavy

- Wind Speed: 0-40 km/h

- Humidity: 0-100%

## 🌐 API Reference

This project uses the following APIs:

- [Open-Meteo Weather API](https://open-meteo.com/en/docs)

- [Open-Meteo Geocoding API](https://open-meteo.com/en/docs/geocoding-api)

## 🎨 Weather States

The app includes various weather states with corresponding animations:

- Clear: Animated sun with glow effect

- Cloudy: Dynamic cloud movements

- Rainy: Realistic rain animation with intensity levels

- Wind Effects: Direction and speed-based animations

## 📧 Contact

Portfolio - [din.works](https://din.works)

Project Link: [simple-weather-app](https://github.com/DindinYT37/simple-weather-app)