About This Dashboard
A modern, responsive weather dashboard designed for daily use. Built with HTML, CSS, and JavaScript - simple, fast, and easy to customize.
🔗 Live Demo: anopenidea.github.io/dashboard
Why I Built This
I use this every morning to start my day! Living in Houston, I needed one place to check the weather, plan my outfit, and stay motivated.
The dual temperature display (°F/°C) is especially helpful since I'm still learning to think in Fahrenheit. Having both units side-by-side makes it easier to understand the weather at a glance.
The hourly forecast has become essential for practical decisions - like scheduling grocery deliveries to avoid extreme heat or rainy hours. The visual temperature gradients make planning so much easier without even reading the numbers!
The smart clothing recommendations save me time every morning, and the daily motivational content helps me start each day with the right mindset.
Key Features
🌤️ Weather Intelligence
- Real-time weather - Current conditions with dual °F/°C display
- 7-Day Forecast - Week-ahead planning
- 24-Hour Forecast - Hourly breakdown starting from current time
- Comprehensive data - UV index, air quality (AQI), sunrise/sunset times
- Precipitation tracking - Rain probability for every day and hour
🎨 Visual Innovation
- Temperature gradients - Each forecast card has a unique red/blue background
- Intuitive color coding - Red for hot temperatures, blue for cold
- At-a-glance understanding - Know the temperature without reading numbers
- Smart positioning - Hot days show red at bottom, cold days show blue at top
- Color intensity - More red when hotter, more blue when colder
- Independent calculations - Each section uses its own temperature range for accurate gradients
👔 Smart Recommendations
- Smart clothing suggestions - Based on temperature, weather conditions, and time of day
- Contextual advice - Different recommendations for sunny, rainy, or cold conditions
- UV protection reminders - Sunscreen suggestions on high UV days
💪 Motivation & Planning
- Daily Reminder - Customizable personal task section
- Mood Lifter - Positive affirmations to start your day right
- Quote of the Day - Inspirational quotes for motivation
Technology Stack
- HTML5 - Structure and content
- CSS3 - Styling, animations, and gradients
- JavaScript - Interactivity, API calls, and dynamic content
- Open-Meteo API - Free weather data (no API key required)
- Air Quality API - US AQI data
- GitHub Pages - Free hosting and deployment
Getting Started
Want your own version? Fork it and deploy for free!
1. Fork the Repository
Visit the GitHub repository and click "Fork"
2. Customize for Your City
Edit script.js and update the coordinates:
latitude=29.7604&longitude=-95.3698
3. Deploy to GitHub Pages
Go to Settings → Pages → Select main branch and / (root) folder
Visit https://username.github.io/repo-name
4. Personalize
Update city names, customize colors, add your own reminders
Open Source
This project is completely open source and free to use! Fork it, customize it for your city, add new features, and share it with friends. No API keys needed, no hosting costs - just pure simplicity.
Check out the GitHub repository to get started, report issues, or contribute improvements!