https://github.com/sizzlebop/weather-widget
A sleek, animated weather widget with real-time conditions. Features beautiful weather animations, Notion compatibility, and easy embedding for any website. Powered by OpenWeather API.
https://github.com/sizzlebop/weather-widget
notion weather weather-widget widget widgets
Last synced: 2 months ago
JSON representation
A sleek, animated weather widget with real-time conditions. Features beautiful weather animations, Notion compatibility, and easy embedding for any website. Powered by OpenWeather API.
- Host: GitHub
- URL: https://github.com/sizzlebop/weather-widget
- Owner: sizzlebop
- Created: 2025-01-20T07:51:33.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-20T11:02:38.000Z (4 months ago)
- Last Synced: 2025-01-20T11:26:31.661Z (4 months ago)
- Topics: notion, weather, weather-widget, widget, widgets
- Language: JavaScript
- Homepage: https://pinkpixel.dev
- Size: 42 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌦️ Weather Widget
A beautiful, customizable weather widget that you can embed anywhere. Perfect for websites, blogs, and Notion pages.
## ✨ Features
- 🎨 Multiple themes and customization options
- 📱 Responsive design with different size options
- 🌡️ Temperature in Celsius or Fahrenheit
- 💅 Custom fonts and colors
- 🔌 Easy embedding functionality
- 🎬 Smooth weather animations
- 📍 Location support via ZIP code or coordinates
## 🚀 Getting Started
### Prerequisites
- An OpenWeather API key (free tier available)
- A modern web browser
### 📝 Getting Your OpenWeather API Key
1. Visit [OpenWeather](https://openweathermap.org/api)
2. Click "Sign Up" and create a free account
3. After verification, go to your account dashboard
4. Navigate to "API Keys" section
5. Copy your API key
> ⚠️ Note: New API keys may take a few hours to activate
## 🛠️ Usage
1. Enter your OpenWeather API key in the settings panel
2. Choose your location method:
- ZIP/Postal Code + Country
- Coordinates (latitude & longitude)
3. Click "Get Weather" to fetch current conditions
4. Customize the widget appearance:
- Choose from preset themes
- Set custom colors
- Select font family
- Adjust widget size
- Choose temperature unit
## 🔗 Embedding
### Website Embedding
1. Click the "Embed Code" button
2. Copy the generated HTML code
3. Paste it into your website's HTML
### Notion Embedding
1. Click the "Embed Link" button
2. Copy the generated URL
3. In Notion:
- Type `/embed`
- Paste the URL
- Press Enter
## 🎨 Available Themes
- Light
- Dark
- Sunset
- Ocean
- Forest
- Aurora
- Cosmic
- Cherry
- Custom
## 📐 Size Options
- Small (250x320px)
- Medium (300x350px)
- Large (350x400px)
## 🎭 Text Effects
### Shadow Options
- None
- Light (2px offset, 4px blur)
- Medium (3px offset, 6px blur)
- Heavy (4px offset, 8px blur)
- Customizable shadow color
### Stroke Options
- None
- Thin (1px)
- Medium (2px)
- Customizable stroke color
## 🔤 Supported Fonts
- Roboto
- Lato
- Montserrat
- Open Sans
- Poppins
- Raleway
- Ubuntu
- Source Sans Pro
- Nunito
- Quicksand
- Dancing Script
- Lobster
- Livvic
- Inter
## 🌐 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 🔒 Privacy
The widget only collects weather data for the specified location. No personal data is stored or transmitted beyond what's necessary for weather functionality.
## 📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## ⚡ Performance
The widget is lightweight and optimized for performance:
- Minimal dependencies
- Efficient animations
- Lazy loading of weather data
- Caching of API responses
## 🐛 Troubleshooting
**Widget shows "Enter Location"**
- Verify your API key is correct
- Check your location input
- Ensure your API key is activated
**Animations not showing**
- Check if JavaScript is enabled
- Verify browser compatibility
- Clear browser cache
## 📧 Support
For support, please open an issue in the GitHub repository or contact the maintainers.
---
Made with ❤️ by pink pixel