Codepen Not Working (Preprocessors causing it?)

Site URL: https://codepen.io/chadd/pen/gZeaBd

I'm trying to get this counter to work on a page of mine.

I've gotten the style emulated, however the counter doesn't count. Im not sure if its because its using the pug preprocessor or perhaps the scss preprocessor...if thats the case how can I code using those preprocessors on squarespace?

Use HTML

<section class="counters">
  <h3 class="counter" aria-label="$65.3M">$65.3M</h3>
  <h3 class="counter" aria-label="872K">872K</h3>
  <h3 class="counter" aria-label="$491">$491</h3>
  <h3 class="counter" aria-label="9875">9875</h3>
</section>

CSS

@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,700&display=swap");
html {
  display: -webkit-box;
  display: flex;
  min-height: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  box-sizing: border-box;
}
html * {
  font-family: inherit;
}
html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 50px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(transparent)), -webkit-gradient(linear, right bottom, left top, from(lime), to(transparent)), -webkit-gradient(linear, left bottom, right top, from(blue), to(transparent));
  background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: screen;
}

.counters {
  display: -webkit-box;
  display: flex;
  background: rgba(255, 255, 255, 0.75);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.counter {
  letter-spacing: 0.125rem;
  line-height: 1;
  position: relative;
  display: -webkit-box;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
          align-items: center;
  height: 3.125rem;
  font-size: 3.125rem;
  margin: 0 1.25rem;
  font-weight: 400;
}
.counter > span {
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 100%;
  -webkit-transition: -webkit-transform 2s ease;
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  line-height: 1;
}
.counter > span span {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  height: 100%;
}
.counter:nth-child(1) > span {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.counter:nth-child(2) > span {
  -webkit-transition-delay: 0.375s;
          transition-delay: 0.375s;
}
.counter:nth-child(3) > span {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.counter:nth-child(4) > span {
  -webkit-transition-delay: 1.125s;
          transition-delay: 1.125s;
}
.counter:nth-child(5) > span {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.counter:nth-child(6) > span {
  -webkit-transition-delay: 1.875s;
          transition-delay: 1.875s;
}
.counter:nth-child(7) > span {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.counter:nth-child(8) > span {
  -webkit-transition-delay: 2.625s;
          transition-delay: 2.625s;
}
.counter:nth-child(9) > span {
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}
.counter:nth-child(10) > span {
  -webkit-transition-delay: 3.375s;
          transition-delay: 3.375s;
}
.counter:nth-child(11) > span {
  -webkit-transition-delay: 3.75s;
          transition-delay: 3.75s;
}
.counter:nth-child(12) > span {
  -webkit-transition-delay: 4.125s;
          transition-delay: 4.125s;
}
.counter:nth-child(13) > span {
  -webkit-transition-delay: 4.5s;
          transition-delay: 4.5s;
}
.counter:nth-child(14) > span {
  -webkit-transition-delay: 4.875s;
          transition-delay: 4.875s;
}
.counter:nth-child(15) > span {
  -webkit-transition-delay: 5.25s;
          transition-delay: 5.25s;
}
.counter:nth-child(16) > span {
  -webkit-transition-delay: 5.625s;
          transition-delay: 5.625s;
}
.counter:nth-child(17) > span {
  -webkit-transition-delay: 6s;
          transition-delay: 6s;
}
.counter:nth-child(18) > span {
  -webkit-transition-delay: 6.375s;
          transition-delay: 6.375s;
}
.counter:nth-child(19) > span {
  -webkit-transition-delay: 6.75s;
          transition-delay: 6.75s;
}
.counter:nth-child(20) > span {
  -webkit-transition-delay: 7.125s;
          transition-delay: 7.125s;
}

.counter:nth-child(1) {
  color: #EF8354;
}

.counter:nth-child(2) {
  color: #0EB1D2;
}

.counter:nth-child(3) {
  color: #2D3142;
}

.counter:nth-child(4) {
  color: #698F3F;
}

JavaScript

<script>
  const stats = document.querySelectorAll(".counter");

stats.forEach(stat => {
	// pattern used to seperate input number from html into an array of numbers and non numbers. EX $65.3M -> ["$65.3M", "$", "65", ".", "3", "M"]
	const patt = /(\D+)?(\d+)(\D+)?(\d+)?(\D+)?/;
	const time = 1000;
	let result = [...patt.exec(stat.textContent)];
	let fresh = true;
	let ticks;

	// Remove first full match from result array (we dont need the full match, just the individual match groups).
	result.shift();
	// Remove undefined values from result array where they didnt have a match in one of the optional regex groups
	result = result.filter(res => res != null);

	while (stat.firstChild) {
		stat.removeChild(stat.firstChild);
	}

	for (let res of result) {
		if (isNaN(res)) {
			stat.insertAdjacentHTML("beforeend", `<span>${res}</span>`);
		} else {
			for (let i = 0; i < res.length; i++) {
				stat.insertAdjacentHTML(
					"beforeend",
					`<span data-value="${res[i]}">
						<span>&ndash;</span>
						${Array(parseInt(res[i]) + 1)
							.join(0)
							.split(0)
							.map(
								(x, j) => `
							<span>${j}</span>
						`
							)
							.join("")}
					</span>`
				);
			}
		}
	}

	ticks = [...stat.querySelectorAll("span[data-value]")];

	let activate = () => {
		let top = stat.getBoundingClientRect().top;
		let offset = window.innerHeight * 3 / 4;

		setTimeout(() => {
			fresh = false;
		}, time);

		if (top < offset) {
			setTimeout(() => {
				for (let tick of ticks) {
					let dist = parseInt(tick.getAttribute("data-value")) + 1;
					tick.style.transform = `translateY(-${dist * 100}%)`;
				}
			}, fresh ? time : 0);
			window.removeEventListener("scroll", activate);
		}
	};
	window.addEventListener("scroll", activate);
	activate();
});

</script>

@tuanphan

Unfortunately its not making the numbers move still. I even copied and pasted everything you have in a different code block.

https://www.rebuildex.com/fire-damage

heres the page

I see it works...

Demo: https://robin-triangle-z47x.squarespace.com/countdown?password=abc

@tuanphan  I got it!! thank you for the code!