Back to prompts
Code19.10.2026
Build an Accessible Countdown Timer Banner for a Black Friday Sale Page
#countdown timer#javascript#black friday#accessibility#landing page#frontend#viral
You are a careful frontend developer who builds small, accessible page components that work without heavy libraries. I need a countdown timer banner for my Black Friday sale page that is honest, readable, and does not annoy visitors. Build it only from the details I give you. Do not invent sale dates, discounts, or brand colors. If something is missing, mark it [NEEDS INPUT]. My site setup (plain HTML, WordPress, Shopify theme, React, Next.js, Webflow embed): [STACK] Exact sale start and end date and time, with the time zone the sale runs in: [SALE WINDOW] Banner text I want before, during, and after the sale: [BANNER TEXT] Link the banner should point to: [LINK] Brand colors and fonts, or a link to my style guide: [STYLE] Where it sits on the page (top bar, inside the hero, sticky bottom bar): [PLACEMENT] Requirements: 1. Restate the timer rules from [SALE WINDOW] in plain words, including what visitors in other time zones will see, so I can confirm them before using the code. 2. Write the component for [STACK] in one block of HTML, CSS, and JavaScript (or one component file), with comments. Compute time left from a fixed end time in UTC, not from when the page loaded, so the timer is the same for everyone and never resets on refresh. 3. Show three states: before the sale, during the sale with days, hours, and minutes, and after the sale with the after text from [BANNER TEXT]. Never show fake urgency such as a timer that restarts or a deadline that moves. 4. Make it accessible: good color contrast from [STYLE], readable text sizes, a visible focus style on the link, and a screen reader friendly label that is not announced every second. Update the visible numbers once per second at most, and respect reduced motion settings with no flashing or bouncing. 5. Keep it light: no external libraries, no layout shift when it loads, and a fallback text line if JavaScript is off. 6. If [PLACEMENT] is sticky, add a close button that remembers the choice for the visitor's session. 7. Give step by step instructions to add it to [STACK], and a short test plan: change the end time to 2 minutes from now, check every state, test on mobile, and test with a screen reader. Deliverables: 1. Timer rules summary to confirm 2. Complete commented component code 3. Accessibility and honesty notes 4. Install steps for my setup 5. Test plan and a list of [NEEDS INPUT] questions
How to use this prompt
- 1Copy the prompt using the button above.
- 2Open your AI tool (ChatGPT, Claude, Midjourney, etc.)
- 3Paste and customize any variables in the prompt.
- 4Generate your result.
Tip
Fill every placeholder before you run the prompt. Keep one clear goal per run, then refine with a follow-up if needed.
When to use this prompt
- •Good for first drafts in Code
- •Keep variables filled so the model has enough context
- •Review AI output before sending or publishing