Skip to content

Conversation

@SharanyaR1
Copy link

@SharanyaR1 SharanyaR1 commented Jun 15, 2025

This PR adds a custom timer popup component to the challenge interface. The timer supports both Stopwatch and Countdown Timer modes and is built entirely using plain HTML, CSS, and JavaScript.

# Features Implemented
> Toggleable Timer Icon:
- Floating timer icon at the top-right corner of the challenge page.
- Clicking opens a popup with stopwatch/timer options.

> Stopwatch Mode:
	- Starts immediately with no input.
	- Can be paused, resumed, stopped, or reset.
	- Always active (button never disabled).

> Countdown Timer Mode:
	- Input fields for hours (max 10) and minutes (auto convert 60+ to hours).
	- Timer is only startable with non-zero input.
	- Prevents invalid characters (+, -, e, etc.) and auto-pads inputs to 00.
	
> Smooth Transitions:
	- Timer popup and timer bar slide in/out.

> Mode Switching Behavior:
	- If a timer is running/paused, switching mode prompts to first stop or reset the current mode.
	- Button labels dynamically update (Stop Timer, Reset Stopwatch, etc.) with red warning styling when needed.

> Popup Button Behavior:
	- Clicking reset while paused shows “Reset Timer/Stopwatch”.
	- Clicking reset while running shows “Stop Timer/Stopwatch”.

> Time’s Up Alert:
	- When countdown hits zero, a vscode.postMessage() event (time_up) is fired.
	- This triggers a vscode.window.showErrorMessage() in the extension host.

> Input Focus Handling:
	- Cursor is always forced to the end of hour and minute input boxes.
	- Prevents keyboard or mouse from moving it mid-input.

#Screenshots of the implementation

image

2CADCDC6-E141-419F-83E9-2EFC79CEDADA_4_5005_c

# File Structure & Integration
> templates/timer.ejs: Popup HTML, and timer bar UI and timer logic.
> challenge.ejs: Integrated timerUI into challenge page via <%- timerUI %>.
> Challenge.ts: Rendered timer.ejs using EJS and passed as timerUI, Added case "time_up" handler to show VS Code notification.
> Hackerrank.ts: Added timerUI property to challenge interface.

# Testcases Covered
> Please check the pdf file attached below
HackerRank-VS_Code_Timer_feature_TestCases_Checked.pdf

@suyash-purwar
Copy link
Owner

Hey, @SharanyaR1
Thank you so much for contributing to this! I was planning to revive this project and deploy it to VS Code Marketplace. Your contributions have motivated me to pick this up. I will review your PR in multiple rounds and I am aiming to merge this by 22nd June.

Once again, thank you for your contributions! 🥳 🎊

@SharanyaR1
Copy link
Author

Hi @suyash-purwar!
I’m happy to contribute as a user of your wonderfully built project, it's been a super helpful tool. I’ll be glad to look into any changes or suggestions you might have during the review rounds. Looking forward to seeing it live on the VS Code Marketplace soon!

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