Skip to content

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.

Notifications You must be signed in to change notification settings

sizzlebop/weather-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌦️ Weather Widget

A beautiful, customizable weather widget that you can embed anywhere. Perfect for websites, blogs, and Notion pages.

Weather Widget Preview

✨ 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
  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

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published