Resend OTP Cooldown Timer — Free HTML CSS JS Verification Snippet

Every OTP verification screen needs a way to request a new code, but an unrestricted "resend" button invites accidental spam-clicking and makes it trivial to hammer an SMS or email provider's API. This snippet pairs a standard 6-digit OTP input with a visible cooldown timer that keeps the resend action disabled and counting down for 30 seconds before swapping it for a clickable link.

One countdown function, called twice

startCountdown() resets remaining to DURATION, shows the countdown text, hides the resend link, and starts a setInterval that decrements remaining and updates secondsEl.textContent once per second. The same function runs both on initial page load and again every time the user clicks resend — there's no duplicated timer logic between the "first send" and "resend" cases.

Swapping UI state instead of just disabling a button

Rather than a resend button that's merely disabled with grayed-out styling, the countdown text itself replaces the button entirely (countdownEl.hidden = false / resendBtn.hidden = true) — showing exactly how many seconds remain is more informative than a disabled control with no explanation, and it removes any temptation to keep clicking a dead button.

Clearing the previous interval before starting a new one

clearInterval(timerId) runs at the top of startCountdown() before the new setInterval is created. Without this, clicking resend while an old interval was somehow still running (or calling the function twice in quick succession) would stack multiple intervals decrementing remaining simultaneously, causing the countdown to run too fast.

Resend clears and refocuses the OTP boxes

Clicking resend doesn't just restart the timer — it also clears every input's value and filled class and moves focus back to the first box, matching the mental model that a new code invalidates whatever was previously typed, and puts the cursor exactly where the user needs to start typing the new code.

Independent verify feedback

The verify button's handler is entirely separate from the countdown — it just checks whether all six boxes are filled and shows a success or error status message, styled with inline color/background changes so the same statusEl element can represent both outcomes without two separate DOM nodes.

Customizing it

Change DURATION to match your provider's actual rate limit, replace the resend click handler's placeholder with a real API call, or add a maximum resend attempt counter that permanently disables the action after N tries.