Overview
This prompt aims to guide developers in creating a functional countdown timer for web applications. Programmers and coding enthusiasts will benefit from the structured instructions and code implementation.
Prompt Overview
Purpose: This timer allows users to track a 5-minute countdown effectively.
Audience: It is designed for web developers and users needing a simple countdown feature.
Distinctive Feature: The timer starts upon clicking an image, enhancing interactivity.
Outcome: Users receive a clear visual indication when the countdown completes.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Content & Media Creation, Development Tools & DevOps, Productivity & Workflow
- Techniques: Zero-Shot Prompting
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a 5-minute countdown timer displayed on a webpage or application.
The timer should:
– Count down from 5 minutes to zero
– Update every second
– Clearly show the remaining time in minutes and seconds (MM:SS format)
Additionally, include an image that acts as a clickable link. When the user clicks this image, the 5-minute countdown timer should:
– Start displaying
– Begin counting down immediately
Ensure that the timer:
– Stops automatically at zero
– Visually indicates that the countdown has completed (e.g., by showing “Time’s up!” or a similar message)
# Steps
1. Display an image prominently on the interface.
2. Make this image a clickable element with an associated link or action.
3. When the image is clicked, show the 5-minute countdown timer.
4. Update the timer display every second, showing the remaining time in MM:SS format.
5. When the timer reaches zero, stop the countdown and show a message indicating completion.
# Output Format
Provide the complete HTML, CSS, and JavaScript code that implements this functionality.
– The code should be well-structured and commented for clarity.
– Include placeholder URLs or image sources if necessary.
# Notes
– The image can be a placeholder or a sample image URL.
– The timer should be user-friendly and visually clear.
– The solution must work in modern web browsers.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your preferred coding environment.
- Implement the HTML, CSS, and JavaScript as instructed.
- Test the countdown timer functionality in a web browser.
- Ensure the image link works and timer displays correctly.
Tips for Best Results
- Use setInterval: Utilize the setInterval function to update the timer every second.
- Format time correctly: Ensure the remaining time is displayed in MM:SS format using string manipulation.
- Clear interval on completion: Use clearInterval to stop the timer when it reaches zero.
- Display completion message: Show a “Time’s up!” message when the countdown finishes to indicate completion.
FAQ
- How do I create a countdown timer in JavaScript?
Use setInterval to update the timer every second and display remaining time in MM:SS format. - What HTML element should I use for the timer display?
You can use a <div> or <span> element to show the countdown timer. - How can I make an image clickable in HTML?
Wrap the <img> tag in an <a> tag to make it clickable. - How do I indicate when the timer reaches zero?
Display a message like 'Time's up!' when the countdown finishes.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
