dkcavaliere

It took me quite a while to figure this out. I wanted to share here in case anyone else couldn't get the code to work. Also, if anyone can help me freeze the countdown at 0 0 0 0 when the date & time are reached, I would greatly appreciate it! Be aware that I adjusted the naming, spacing, emojis and made the countdown timer continue to show even after the date & time are reached. To remove this, you just need to adjust the following: instead of countdown.style.display = "block"; use countdown.style.display = "none"; This works in 2 parts: 1. You add a Markdown code block inside your page with the following code: (taken from CubeSquared) <div class="container"> <h1 id="headline">Countdown to our Wedding</h1> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> <div class="message"> <div id="content"> <span class="emoji">🎊</span> <span class="emoji">💕</span> <span class="emoji">🥂</span> </div> </div> </div> <script> (function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let birthday = "Sep 10, 2025 14:00:00", countDown = new Date(birthday).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { let headline = document.getElementById("headline"), countdown = document.getElementById("countdown"), content = document.getElementById("content"); headline.innerText = "It's our wedding day!"; countdown.style.display = "block"; content.style.display = "block"; clearInterval(x); } //seconds }, 0) }()); </script> 2. You add the styling code to the Custom CSS area under website tools (also from CubeSquared): /* countdown styling*/ #block-235dba99820ac497257a { * { box-sizing: border-box; margin: 0; padding: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { height: 100%; margin: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { align-items: center; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .container { color: #333; margin: 0 auto; text-align: center; } h1 { font-weight: normal; letter-spacing: .125rem; text-transform: uppercase; margin-bottom: 3rem; } li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase; } li span { display: block; font-size: 4.5rem; margin-bottom: 2.5rem; } .message { font-size: 4rem; margin-top: 1.5rem; } #content { display: none; padding: 1rem; } .emoji { padding: 0 .25rem; } @media all and (max-width: 768px) { h1 { font-size: 1.5rem; } li { font-size: 1.125rem; padding: .75rem; } li span { font-size: 3.375rem; } } }