Personal Live Dashboard

A responsive personal dashboard built using vanilla HTML, CSS, and JavaScript that displays real-time information in a clean and user-friendly interface.

This project focuses on core frontend fundamentals such as async JavaScript, API integration, state management, UI layering, and responsive design — without using any frameworks.

---

🚀 Features

• Live digital clock with 12-hour / 24-hour toggle
• Time-based greeting (Morning / Afternoon / Evening)
• City-based weather search using OpenWeather API
• Location-based weather using the Browser Geolocation API
• Temperature unit toggle (°C / °F) without additional API calls
• Quote of the Day fetched from an external API
• Random background images with preload handling
• Dark overlay for consistent text readability
• Graceful loading and error states
• Fully responsive layout for mobile and desktop

---

🛠 Tech Stack

• HTML5 – Semantic structure
• CSS3 – Responsive design, overlay layering, UI hierarchy
• JavaScript (ES6+) – Async/await, DOM manipulation, state handling
• OpenWeather API – Weather data
• ZenQuotes API (via CORS proxy) – Quote of the day
• Picsum Photos API – Random background images

---

📸 Screenshots

Desktop view with weather data

Mobile view (responsive layout)

Weather search results

---

⚙️ How It Works (High Level)

• The app updates the live time every second using Date and setInterval.
• Weather data is fetched asynchronously using fetch and async/await.
• Temperature is stored in state and converted between °C and °F without refetching data.
• Background images are preloaded using the Image object to avoid flickering.
• UI layering is achieved using a dark overlay and controlled z-index stacking.
• Responsive behavior is handled using CSS media queries.

---

🧪 Learning Goals

This project was built to practice:

• Real-world API integration
• Asynchronous JavaScript
• Clean state management
• UI/UX fundamentals
• Debugging layout and rendering issues
• Writing maintainable, readable code

---

📌 Future Improvements

• Persist user preferences (last city, temperature unit)
• Add accessibility improvements (ARIA labels)
• Add offline fallback handling
• Theme toggle (light / dark)

---

📄 License

This project is for learning and personal use.