hackerrank-vscode icon indicating copy to clipboard operation
hackerrank-vscode copied to clipboard

Feature: Custom Timer (Stopwatch + Countdown)

Open SharanyaR1 opened this issue 7 months ago • 2 comments

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

SharanyaR1 avatar Jun 15 '25 11:06 SharanyaR1