![Dashboard Screenshot]
A feature-rich Study Dashboard web application built with HTML, CSS, and vanilla JavaScript.
This project combines productivity tools, real-time data, and external APIs into a single clean interface to help students stay focused and consistent.
Built as a portfolio project to demonstrate front-end fundamentals, API integration, and state management without frameworks.
👉 Live Site: (https://zhanyar2323.github.io/Study-dashboard-/)
👉 Repository: https://github.com/Zhanyar2323/Study-Dashboard
- Fetches random motivational quotes from a public API
- Displays quote text and author
- Includes fallback handling if the API fails
- Real-time clock updated every second
- Automatically shows local time and date
- Tracks how many days you’ve studied
- Data persists using localStorage
- One-click increment button
- Work mode (25 min)
- Short break (5 min)
- Long break (15 min)
- Start / Pause / Reset controls
- Automatic mode switching
- Add, complete, and delete tasks
- Tasks persist between sessions using localStorage
- Checkbox-based completion tracking
- Toggle between light and dark themes
- Uses CSS variables for clean theme switching
- Improves accessibility and comfort
- Uses Geolocation API to detect user location
- Fetches live weather data from OpenWeatherMap
- Displays city name, temperature, and weather description
- HTML5 – Semantic structure
- CSS3 – Responsive layout, CSS variables, dark mode
- JavaScript (ES6) – App logic, DOM manipulation, timers
- Fetch API
- LocalStorage API
- Geolocation API
- Quotes API – motivational quotes
- OpenWeatherMap API – live weather data
study-dashboard/ │ ├── index.html ├── README.md └── (optional) style.css
⚠️ Some APIs require running from a local server (not file://)
- Install Live Server extension
- Right-click
index.html - Click Open with Live Server
- Working with real APIs
- Handling API errors & graceful fallbacks
- Managing persistent state using
localStorage - Building timers with
setInterval - DOM manipulation without frameworks
- Organizing a multi-feature JavaScript application
- Writing clean, readable, and maintainable code
- Editable Pomodoro durations
- Automatic daily streak tracking
- Task categories and priorities
- Productivity analytics and charts
- User profiles
- Calendar integration
Zhanyar Rebaz
Student Developer
- GitHub: https://github.com/Zhanyar2323
If you find this project useful or interesting, consider starring the repository ⭐
Feedback and suggestions are always welcome.