Skip to content

Add timezone selector, alarm, stopwatch, timer, theme toggle and impr…#3

Merged
AvidCoder101 merged 2 commits intoCodingContributorsLair:mainfrom
DaniyalMusadiq1:daniyal
Mar 27, 2026
Merged

Add timezone selector, alarm, stopwatch, timer, theme toggle and impr…#3
AvidCoder101 merged 2 commits intoCodingContributorsLair:mainfrom
DaniyalMusadiq1:daniyal

Conversation

@DaniyalMusadiq1
Copy link
Copy Markdown
Contributor

Description

This PR significantly enhances the original clock app by adding multiple new features, a modern glass‑morphism UI, and full responsiveness. It also updates the README to reflect the new capabilities.

✨ New Features

  • Real‑time Clock – Smooth second updates using requestAnimationFrame.
  • Date Display – Shows weekday, month, day, and year.
  • 12/24 Hour Format Toggle – Switch between 12‑hour (with AM/PM) and 24‑hour formats.
  • Timezone Selector – Choose from:
    • Local time
    • UTC
    • New York (America/New_York)
    • London (Europe/London)
    • Tokyo (Asia/Tokyo)
    • Pakistan (Asia/Karachi)
  • Alarm – Set a one‑time alarm; triggers a browser notification and a beep sound.
  • Stopwatch – Start, pause, record lap times, and reset.
  • Timer – Set a countdown timer (minutes & seconds) with pause/reset and notification on finish.
  • Theme Switcher – Toggle between light and dark modes (default dark). Preference saved in localStorage.
  • Fully Responsive – Exactly one screen height, no scrolling – works perfectly on mobile, tablet, and desktop.
  • Settings Persistence – Format, timezone, and theme choices are remembered.

🎨 UI/UX Improvements

  • Redesigned with a clean glass‑morphism look.
  • Smooth transitions and hover effects.
  • Improved layout that adapts to any screen size.

📚 Documentation

  • Updated README.md with a detailed Features section to showcase all new additions.
  • Kept the original contribution guide intact.

✅ How to Test

  1. Open the app – the current time and date should display.
  2. Change the format and timezone – the clock updates immediately.
  3. Set an alarm and wait for it to trigger (notification + sound).
  4. Use the stopwatch (start, lap, reset).
  5. Set a timer and let it count down.
  6. Toggle the theme and refresh – your preference is saved.

📸 Screenshots
image

💬 Additional Context
This PR builds on the original app by AvidCoder101 and adds modern functionality while keeping the code beginner‑friendly. All changes are fully commented.

@AvidCoder101 AvidCoder101 merged commit 55c1970 into CodingContributorsLair:main Mar 27, 2026
@AvidCoder101
Copy link
Copy Markdown
Member

@DaniyalMusadiq1 This is amazing! Thanks so much for your contributions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants