Last active
January 31, 2026 23:50
-
-
Save jeremysmithco/ecebb1dd3e211b069557f7f818a24bc5 to your computer and use it in GitHub Desktop.
Blue Ridge Ruby CFP Stimulus Countdown Timer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div data-controller="simple-countdown" data-simple-countdown-deadline-value="2026-02-03T00:00:00Z" class="leading-relaxed text-center text-[#2672B5] mb-12"> | |
| <div class="flex justify-center items-start gap-1 sm:gap-2 font-mono font-bold"> | |
| <div class="flex flex-col items-center"> | |
| <span class="text-[#2672B5] text-sm sm:text-base mb-2 uppercase tracking-wider">Days</span> | |
| <div class="flex gap-1"> | |
| <span data-simple-countdown-target="days" class="bg-[#1a1a1a] text-white text-3xl sm:text-5xl rounded px-2 sm:px-3 py-2 sm:py-4 tracking-wider">00</span> | |
| </div> | |
| </div> | |
| <span class="text-[#1a1a1a] text-3xl sm:text-5xl mt-8 sm:mt-10">:</span> | |
| <div class="flex flex-col items-center"> | |
| <span class="text-[#2672B5] text-sm sm:text-base mb-2 uppercase tracking-wider">Hours</span> | |
| <div class="flex gap-1"> | |
| <span data-simple-countdown-target="hours" class="bg-[#1a1a1a] text-white text-3xl sm:text-5xl rounded px-2 sm:px-3 py-2 sm:py-4 tracking-wider">00</span> | |
| </div> | |
| </div> | |
| <span class="text-[#1a1a1a] text-3xl sm:text-5xl mt-8 sm:mt-10">:</span> | |
| <div class="flex flex-col items-center"> | |
| <span class="text-[#2672B5] text-sm sm:text-base mb-2 uppercase tracking-wider">Minutes</span> | |
| <div class="flex gap-1"> | |
| <span data-simple-countdown-target="minutes" class="bg-[#1a1a1a] text-white text-3xl sm:text-5xl rounded px-2 sm:px-3 py-2 sm:py-4 tracking-wider">00</span> | |
| </div> | |
| </div> | |
| <span class="text-[#1a1a1a] text-3xl sm:text-5xl mt-8 sm:mt-10">:</span> | |
| <div class="flex flex-col items-center"> | |
| <span class="text-[#2672B5] text-sm sm:text-base mb-2 uppercase tracking-wider">Seconds</span> | |
| <div class="flex gap-1"> | |
| <span data-simple-countdown-target="seconds" class="bg-[#1a1a1a] text-white text-3xl sm:text-5xl rounded px-2 sm:px-3 py-2 sm:py-4 tracking-wider">00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Controller } from "@hotwired/stimulus"; | |
| export default class extends Controller { | |
| static values = { deadline: String }; | |
| static targets = ["days", "hours", "minutes", "seconds"]; | |
| connect() { | |
| this.deadline = new Date(this.deadlineValue); | |
| this.tick(); | |
| this.interval = setInterval(() => this.tick(), 1000); | |
| } | |
| disconnect() { | |
| if (this.interval) { | |
| clearInterval(this.interval); | |
| } | |
| } | |
| tick() { | |
| const now = new Date(); | |
| const diff = this.deadline - now; | |
| if (diff <= 0) { | |
| this.element.remove(); | |
| clearInterval(this.interval); | |
| return; | |
| } | |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| this.daysTarget.textContent = String(days).padStart(2, "0"); | |
| this.hoursTarget.textContent = String(hours).padStart(2, "0"); | |
| this.minutesTarget.textContent = String(minutes).padStart(2, "0"); | |
| this.secondsTarget.textContent = String(seconds).padStart(2, "0"); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment