Code Playground

console.log("Event Fired")
function secondsUntilHoliday(month = 12, day = 25) {
	// Get the current date and time
	const now = new Date();
	// Get the current year
	const currentYear = now.getFullYear();
	// Set the date for Holiday this year
	const holidayDate = new Date(currentYear, month - 1, day, 0, 0, 0, 0);
	// If holiday has already passed this year, set it for next year
	// Calculate the difference in milliseconds between now and holidayDate
	const timeDiff = now.getTime() - holidayDate.getTime();
	// Convert the time difference to hours
	const hoursDifference = timeDiff / (1000 * 60 * 60); // milliseconds to hours
	// Check if more than 24 hours have passed
	if (hoursDifference >= 24) {
		holidayDate.setFullYear(holidayDate.getFullYear() + 1);
	}
	// Calculate the difference in seconds
	const timeDifference = Math.floor((holidayDate - now) / 1000);
	return timeDifference;
}

// properties passed in from user onto the defaults
	const c = Object.assign(defaultProperties, opt_properties);

// what are the total seconds we dealing with
	c.totalSeconds = Math.floor(c.day * 86400 + c.hour * 3600 + c.min * 60 + c.sec);
	if ((c.date && c.totalSeconds <= 0) || (c.date && c.totalSeconds == undefined)) {
		c.totalSeconds = secondsUntil(c.date);
	}
	if (c.totalSeconds <= 0) {
		// console.error("What are you some kind of wiseguy?");
		c.totalSeconds = 1;
	}
	c.day = Math.floor(c.totalSeconds / 86400);
	// set dotColor equal to color by default
	!c.dotColor ? (c.dotColor = defaultProperties.color) : false;
	// calculate the number of seconds passed for each column
	let td = {};
	let id = getUUID();
	let vxEnd = c.showMs ? 240 : 200;
	let vyEnd = c.showAllNumbers ? 300 : 30;
	let showGlow = c.glow ? `<use href="#fullClock${id}" filter="url(#glow${id})"/>` : "";
	let showGlowBlur = c.glow ? `<filter id="glow${id}" x="-200%" y="-200%" width="1000%" height="1000%">
		<feGaussianBlur in="SourceGraphic" stdDeviation="1.4">
			<animate id="std${id}" attributeName="stdDeviation" values="1.4; 4; 1.4" dur="0.3s" begin="placeholderAnimation${id}.end" repeatCount="indefinite" />
		</feGaussianBlur>
	</filter>` : "";
	let numsOffsets = `0 -270; 0 -240; 0 -210; 0 -180; 0 -150; 0 -120; 0 -90; 0 -60; 0 -30; 0 0`;
	let numsOffsets6 = `0 -150; 0 -120; 0 -90; 0 -60; 0 -30; 0 0`;
	let numsOffsets24 = `0 -150; 0 -120; 0 -90; 0 -60; 0 -30; 0 0`;
	let msDots = c.showMs ? `M 197.5 10 v0 m0 10 v0` : "";
	let milliseconds = c.showMs
		? `<g class="ms10${id}">
		<use href="#nums${id}" transform="translate(200)" />
		<animateTransform id="ms10${id}" attributeName="transform" type="translate" values="${numsOffsets}" dur="1s" begin="0s" repeatCount="${Math.floor(c.totalSeconds)}" calcMode="discrete" />
	</g>
	<g class="ms${id}">
		<use href="#nums${id}" transform="translate(220)" />
		<animateTransform id="ms${id}" attributeName="transform" type="translate" values="${numsOffsets}" dur=".1s" begin="0s" repeatCount="${Math.floor(c.totalSeconds * 10)}" calcMode="discrete" />
	</g>`
		: "";

c.sec1Passed = Math.floor(c.totalSeconds % 10);
	c.sec10Passed = Math.floor(c.totalSeconds % 60); // Corrected calculation for 10-second column
	c.min1Passed = Math.floor((c.totalSeconds / 60) % 10); // Corrected calculation for 1-minute column
	c.min10Passed = Math.floor((((c.totalSeconds / 60) % 60) % 100) / 10); // Corrected calculation for 10-minute column
	c.hr1Passed = Math.floor((c.totalSeconds / 3600) % 10); // Calculating for 1-hour column
	c.hr10Passed = Math.floor(((c.totalSeconds / 3600) % 24) / 10); // Calculating for 10-hour column
	c.day1Passed = Math.floor((c.totalSeconds / 86400) % 10); // Calculating for 1-day column
	c.day10Passed = Math.floor((((c.totalSeconds / 86400) % 100) % 100) / 10); // Calculating for 1-day column
	c.day100Passed = Math.floor((((c.totalSeconds / 86400) % 1000) % 1000) / 100); // Calculating for 1-day column

// make svg
	let svg = `<svg id="clockItToMe${id}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${vxEnd} ${vyEnd}">
	<defs>
		<linearGradient id="grad" grradientTransform="rotate(90)">
			<stop offset="0%" stop-color="lime" />
			<stop offset="100%" stop-color="red" />
		</linearGradient>
		<pattern id="pattern"
             width="10" height="10"
             patternUnits="userSpaceOnUse"
             patternTransform="rotate(30 50 50) scale(0.5)">
			<rect height="10" width="10" fill="red"/>
      <line stroke="lime" stroke-width="7px" y2="10"/>
    </pattern>
		${showGlowBlur}
		<g id="nums${id}" fill="${c.color}" font-weight="${
		c.fontWeight
	}" font-size="25" font-family="${c.font}">
			<text transform="translate(3 24)">0</text>
			<text transform="translate(3 54)">1</text>
			<text transform="translate(3 84)">2</text>
			<text transform="translate(3 114)">3</text>
			<text transform="translate(3 144)">4</text>
			<text transform="translate(3 174)">5</text>
			<text transform="translate(3 204)">6</text>
			<text transform="translate(3 234)">7</text>
			<text transform="translate(3 264)">8</text>
			<text transform="translate(3 294)">9</text>
		</g>
	</defs>
	${showGlow}
	<g id="fullClock${id}">
		<g class="day100${id}">
			<use href="#nums${id}" />
			${animateDay100}
		</g>
		<g class="day10${id}">
			<use href="#nums${id}" transform="translate(20)" />
			${animateDay10}
		</g>
		<g class="day${id}">
			<use href="#nums${id}" transform="translate(40)" />
			${animateDay1}
		</g>
		<g class="hr10${id}">
			<use href="#nums${id}" transform="translate(65)" />
			${animateHr10}
		</g>
		<g class="hr${id}">
			<use href="#nums${id}" transform="translate(85)" />
			${animateHr1}
		</g>
		<g class="min10${id}">
			<use href="#nums${id}" transform="translate(110)" />
			${animateMin10}
		</g>
		<g class="min${id}">
			<use href="#nums${id}" transform="translate(130)" />
			${animateMin1}
		</g>
		<g class="sec10${id}">
			<use href="#nums${id}" transform="translate(155)" />
			${animateSec10}
		</g>
		<g class="sec${id}">
			<use href="#nums${id}" transform="translate(175)" />
			<animateTransform id="sec${id}" attributeName="transform" type="translate" values="${numsOffsets}" dur="10s" begin="-${(10 - c.sec1Passed) % 10}s" repeatCount="${Math.ceil(c.totalSeconds / 10)}" calcMode="discrete" />
		</g>
		${milliseconds}
		<path d="M62.5 10 v0 m0 10 v0 M 107.5 10 v0 m0 10 v0 M 152.5 10 v0 m0 10 v0${msDots}" stroke="${c.dotColor}" stroke-width="3" stroke-linecap="square" />
	</g>
	<g class="endTriggers">
		<animate id="placeholderAnimation${id}" attributeName="opacity" values="0; 0" dur="${c.totalSeconds}s" begin="0s" />
	</g>
	<g id="holiday${id}" opacity="0" style="transition: 1s">
		<rect height="100%" width="100%" fill="rgba(0,0,0,0.7)" />
		<text x="50%" y="50%" font-size="20" text-anchor="middle" dominant-baseline="middle" font-weight="600" font-family="Roboto, sans-serif" fill="#fff" stroke="#fff" stroke-width="2">${c.holidayText}</text>
		<text x="50%" y="50%" font-size="20" text-anchor="middle" dominant-baseline="middle" font-weight="600" font-family="Roboto, sans-serif" fill="#000" stroke="#000" stroke-width="1.5">${c.holidayText}</text>
		<text x="50%" y="50%" font-size="20" text-anchor="middle" dominant-baseline="middle" font-weight="600" font-family="Roboto, sans-serif" fill="url(#pattern)">${c.holidayText}</text>
		<animate attributeName="opacity" from="0" to="1" begin="placeholderAnimation1${id}.end" dur="1s" fill="freeze" />
	</g>
</svg>`;
	const wrapper = document.createElement("div");
	wrapper.innerHTML = svg;
	const doc = wrapper.firstChild;
	elt.appendChild(doc);
	// give us back the id
	return id;
}

let clock = document.querySelector("#clock");

let seconds2Christmas = secondsUntilHoliday(12, 25);
let clockId = initCountdown(clock, {
	color: "#55bf13",
	dotColor: "#b01b2e",
	showMs: false,
	// date: "12-25-2023"
	sec: seconds2Christmas
});

const randInt = (min, max) => {
	return Math.floor(Math.random() * (max - min + 1)) + min;
};

addListener(clockId);

document.querySelector("#foregroundSnow").addEventListener("click", (el) => {
	snowfetti(el.target, {
		spread: window.innerWidth,
		beginStart: true,
		flakes: 40,
		speed: 20000,
		fadeout: false,
		drop: window.innerHeight,
		spin: true
	});
});

letItSnow();

// refresh it if we leave the page
window.addEventListener("visibilitychange", () => {
  if (!document.hidden) {
		document.getElementById('clock').replaceChildren();
    let seconds2Christmas = secondsUntilHoliday(12, 25);
		let clockId = initCountdown(clock, {
			color: "#55bf13",
			dotColor: "#b01b2e",
			showMs: false,
			// date: "12-25-2023"
			sec: seconds2Christmas
		});
		addListener(clockId);
  }
});

// refresh it if we resize
window.addEventListener("resize", () => {
	document.getElementById('clock').replaceChildren();
	document.getElementById('backgroundSnow').replaceChildren();
	document.getElementById('foregroundSnow').replaceChildren();
	letItSnow();
	let seconds2Christmas = secondsUntilHoliday(12, 25);
	let clockId = initCountdown(clock, {
		color: "#55bf13",
		dotColor: "#b01b2e",
		showMs: false,
		// date: "12-25-2023"
		sec: seconds2Christmas
	});
	addListener(clockId);
});

Frontend Forever App