webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Resend OTP Cooldown Timer — Free HTML CSS JS Verification Snippet

Resend OTP Cooldown Timer · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsKeyboard NavigationAuthenticationTimers & ClocksForms & Validation

Copy & paste

Source Code

<div class="rot-card">
  <div class="rot-icon">✉</div>
  <h3>Check your inbox</h3>
  <p class="rot-sub">We sent a 6-digit code to <strong>[email protected]</strong></p>
  <div class="rot-otp" id="rotOtp">
    <input maxlength="1" inputmode="numeric" />
    <input maxlength="1" inputmode="numeric" />
    <input maxlength="1" inputmode="numeric" />
    <input maxlength="1" inputmode="numeric" />
    <input maxlength="1" inputmode="numeric" />
    <input maxlength="1" inputmode="numeric" />
  </div>
  <button class="rot-verify" id="rotVerify">Verify code</button>
  <div class="rot-resend-row">
    <span id="rotIdle" hidden>Didn't get a code?</span>
    <button class="rot-resend-link" id="rotResendBtn" hidden>Resend code</button>
    <span class="rot-countdown" id="rotCountdown">Resend available in <strong id="rotSeconds">30</strong>s</span>
  </div>
  <p class="rot-status" id="rotStatus" hidden></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Visible countdown, not just a disabled button
Shows exact remaining seconds instead of a silent disabled state.
Single reusable countdown function
startCountdown() drives both the initial send and every subsequent resend with no duplicated logic.
Interval cleared before restart
clearInterval() runs first every time, preventing stacked timers from double-speeding the countdown.
Auto-clearing OTP boxes on resend
All six inputs reset and refocus to the first box when a new code is requested.
Auto-focus advance and backspace nav
The OTP input itself supports the same auto-advance and backspace-to-previous behavior users expect.
Temporary confirmation message
A "new code sent" message appears and auto-dismisses after 2.5 seconds.
Independent verify feedback
Success and error states share one status element styled inline per outcome.
Zero dependencies
Pure HTML, CSS, and vanilla JavaScript — no countdown or OTP library.

About this UI Snippet

Resend OTP Cooldown Timer — setInterval-Driven Rate Limiting UI

Screenshot of the Resend OTP Cooldown Timer snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe OTP input renders with a 30-second "Resend available in 30s" countdown already running.
  2. 2
    Watch the countdownThe number ticks down once per second until it reaches zero.
  3. 3
    Click Resend codeOnce the countdown ends, a clickable "Resend code" link appears in its place.
  4. 4
    Trigger a resendClicking it clears the OTP boxes, refocuses the first one, shows a confirmation message, and restarts the 30-second countdown.
  5. 5
    Change the durationIn the JS, edit the DURATION constant to match your SMS or email provider's actual rate limit.
  6. 6
    Wire up real APIsReplace the resend handler's placeholder logic with a fetch() call to your backend's resend endpoint, and connect verify() to your verification API.

Real-world uses

Common Use Cases

SMS and email two-factor flows
Prevent accidental resend spam with a visible countdown of exact remaining seconds, rather than only a disabled button.
Account signup verification
Rate-limit resend requests during signup, with one reusable startCountdown() function driving both the first send and every resend.
Password reset flows
Apply the same cooldown to reset codes, clearing any existing interval before restarting so timers never stack.
Payment confirmation PINs
Stop repeated PIN requests, with all six input boxes clearing and refocusing the first one when a new code is sent.
API cost protection and state teaching
Protect SMS provider spending, and learn clean setInterval state management from a short and readable example anyone can adapt.

Got questions?

Frequently Asked Questions

A disabled button with no explanation leaves users guessing why they can't click it or how long to wait. Showing "Resend available in 24s" and ticking it down gives a clear, specific reason and expectation, which reduces frustration and repeated clicking attempts.

Without clearing any existing interval first, calling startCountdown() a second time (for example from a resend click) would create a second setInterval running alongside the first, causing remaining to decrement twice per second and the countdown to finish in half the expected time.

Edit the DURATION constant near the top of the JS. It's used both to reset remaining at the start of every countdown and doesn't need to be changed anywhere else — the display and interval logic both read from the same variable.

Inside the resend button's click handler, replace or supplement the input-clearing logic with a fetch() POST to your resend endpoint. Only call startCountdown() again once that request succeeds, and show an error status instead if it fails, so the timer doesn't restart on a failed send.

As written, the countdown is purely in-memory and resets to the full duration on page reload. For a persistent cooldown across reloads, store the countdown's end timestamp in localStorage or sessionStorage and compute remaining as the difference from Date.now() when the page loads.