WordPress Family Clock
0 seconds
🪙
$0.00
/* Jump animation */
@keyframes jump {
0% { transform: translateY(0); }
30% { transform: translateY(-20px); }
60% { transform: translateY(0); }
100% { transform: translateY(0); }
}
.jump {
animation: jump 0.5s ease;
}
let seconds = 0;
let dollarAmount = 0;
let timerRunning = false;
const startButton = document.getElementById(“startButton”);
const timerDisplay = document.getElementById(“timerDisplay”);
const coin = document.getElementById(“coin”);
const dollarDisplay = document.getElementById(“dollarAmount”);
startButton.addEventListener(“click”, () => {
if (timerRunning) return;
timerRunning = true;
startButton.disabled = true;
setInterval(() => {
seconds++;
timerDisplay.textContent = seconds + ” seconds”;
if (seconds % 23 === 0) {
triggerCoin();
}
}, 1000);
});
function triggerCoin() {
// Show coin at first 23 seconds
if (coin.style.display === “none”) {
coin.style.display = “block”;
}
// Trigger jump animation
coin.classList.remove(“jump”);
void coin.offsetWidth; // Reset animation
coin.classList.add(“jump”);
// Increase dollar amount
dollarAmount += 0.23;
dollarDisplay.textContent = “$” + dollarAmount.toFixed(2);
}
astermedia.org 