A comprehensive, all-in-one productivity web application designed to help you manage your day efficiently. This dashboard combines weather tracking, task management, daily planning, motivational quotes, and a Pomodoro timer all in one beautiful, responsive interface.
Real-Time Weather Widget - Get current weather information including temperature, precipitation, humidity, and wind speed for your location with live updates.
To-Do List Management - Create, organize, and manage daily tasks with the ability to mark items as important using the bookmark feature for easy prioritization.
Daily Planner - Plan out your entire day with a dedicated planner section to structure your schedule and keep track of important events.
Motivational Quotes - Stay inspired throughout your day with daily rotating motivational quotes and author attribution to fuel your productivity.
Pomodoro Timer - Implement the Pomodoro Technique with a built-in timer featuring work sessions, pause functionality, and reset controls for focused work intervals.
Responsive Design - Fully responsive layout that adapts seamlessly to desktop, tablet, and mobile devices for productivity on the go.
Modern UI/UX - Clean, intuitive interface with custom typography (Aeonik font family) and visually appealing cards with background imagery and multiple Themes.
Real Weather Data - Integrated weather API that provides accurate weather information based on user location.
- HTML5 - Semantic markup for structure and accessibility
- CSS3 - Advanced styling including flexbox, grid, custom fonts, and animations
- JavaScript (Vanilla) - Pure JavaScript without frameworks for lightweight performance
- Weather API - Real-time weather data integration
- Local Storage - Persistent data storage for tasks and preferences
- Responsive Design - Mobile-first approach for cross-device compatibility
productivity-dashboard/
├── index.html # Main HTML structure
├── style.css # Complete styling and layout
├── script.js # JavaScript functionality and interactivity
├── AeonikTRIAL-Bold.otf
├── AeonikTRIAL-Light.otf
├── AeonikTRIAL-Regular.otf # Custom font files
├── apple-touch-icon.png # App icon
└── icons8-quote-50.png # Icon assets
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Internet connection for weather data and image resources
- Clone this repository:
git clone https://github.com/shayaan-git/productivity-dashboard.git- Navigate to the project directory:
cd productivity-dashboard- Open
index.htmlin your web browser or use a local server:
# Using Python 3
python -m http.server 8000
# Using Node.js
npx http-server- Visit
http://localhost:8000in your browser
Weather Widget - The dashboard automatically detects your location and displays current weather conditions with real-time updates.
Add Tasks - Click "Add Task" in the To-Do List section, enter your task, and press Enter. Use the bookmark icon to mark tasks as important.
Pomodoro Timer - Set your desired work session duration and click "Start" to begin your focused work interval. Use "Pause" to temporarily stop and "Reset" to restart.
View Quotes - Check the "Your Daily Fuel" section for motivational quotes that change daily to keep you inspired.
Daily Planning - Use the Daily Planner section to map out your day's schedule and priorities.
- Desktop: Full-featured layout with all widgets visible
- Tablet: Optimized card layout with touch-friendly controls
- Mobile: Stacked single-column layout for easy scrolling
- Custom Aeonik font family for modern typography
- Beautiful background imagery from Pexels for visual appeal
- Color-coded sections for easy visual navigation
- Smooth transitions and hover effects
- Weather-responsive background changes
- Dark mode toggle for night productivity sessions
- Task categories and filtering options
- Customizable Pomodoro interval durations
- Cloud synchronization for multi-device access
- Integration with calendar applications
- Sound notifications for timer completion
- Export tasks and progress reports
Contributions are welcome! To contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature/improvement) - Make your changes
- Commit your changes (
git commit -m 'Add improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
This project is open source and available under the MIT License. See the LICENSE file for more details.
If you have any questions, suggestions, or encounter any issues, please open an issue on GitHub or reach out directly.
Shayaan - GitHub Profile
Made with ❤️ | HardWork 🤯
⭐ If you find this project helpful, please consider giving it a star!