Code from pencode.io not working on GitHub Pages abd VS Code

So i have a code from codepen.io, here’s the link – https://codepen.io/akshzyx/pen/JjOqbRG

The countdown works perfectly well on codepen.io but when i try to run code on GitHub Pages or VS Code the countdown number doesn’t work or show up. Have attached the images at last.

Here’s the code

HTML

    <main>
    <div class="intro">
        <h1 class="intro__headline">The Unix Epochalypse</h1>
        <p class="intro__subheadline">Happening In</p>
        <div class="cd">
            <div class="cd__unit-group">
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Year(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Month(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Day(s)</div>
                </div>
            </div>
            <div class="cd__unit-group">
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Hour(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Minute(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Second(s)</div>
                </div>
            </div>
            <div class="cd__progress">
                <span class="cd__unit-label">Seconds Since Unix Epoch</span><br>
                <strong data-progress>-</strong>
            </div>
        </div>
        <button id="info-btn" class="btn" type="button">
            <span class="btn__text">?</span>
        </button>
    </div>
    <div id="info" class="content">
        <div class="content__wrap">
            <h2>What’s the Unix Epochalypse?</h2>
            <p>The Unix Epochalypse (or the <a href="https://en.wikipedia.org/wiki/Year_2038_problem" target="_blank" ref="noopener noreferrer">Year 2038 problem</a>) is the day clocks on a number of systems will flip from <strong><time datetime="2038-01-19 03:14:08">January 19, 2038 3:14:08 AM UTC</time></strong> to <strong><time datetime="1901-12-13 20:45:52">December 13, 1901 8:45:52 PM UTC</time></strong>. This is because of the use of a 32-bit signed integer for the current seconds since midnight UTC on <time datetime="1970-01-01 00:00:00">January 1, 1970</time>, the Unix epoch. Values only from -2,147,483,648 to 2,147,483,647 are stored. When finally reaching the limit, it’ll be the seconds before the epoch starting at the lowest supported integer.</p>
            <p>If you have yet to make the complete shift to 64-bit, expect some strange things to happen later. The age of 32-bit is over. The time of 64-bit has come!</p>
        </div>
    </div>
</main>
<footer>
    Made by <a href="https://github.com/akshzyx" target="_blank">@akshzyx</a>
</footer>

CSS

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg1: hsl(var(--hue),10%,90%);
    --bg2: hsl(var(--hue),10%,100%);
    --fg1: hsl(var(--hue),10%,10%);
    --fg2: hsl(var(--hue),10%,30%);
    --primary1: hsl(var(--hue),90%,45%);
    --primary2: hsl(var(--hue),90%,55%);
    --primary3: hsl(var(--hue),90%,65%);
    --primary4: hsl(var(--hue),90%,75%);
    --primary5: hsl(var(--hue),90%,85%);
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body, button {
    font: 1em/1.5 Hind, sans-serif;
}
body {
    background: var(--bg1);
    color: var(--fg1);
}
a {
    color: var(--primary2);
}
a:not(:hover) {
    text-decoration: none;
}
a:active {
    color: var(--primary1);
}
a:visited {
    color: var(--primary3);
}
h1 {
    font-size: 2em;
    margin: 0 0 1.5rem;
    text-align: center;
}
h2 {
    font-size: 1.5em;
    line-height: 1;
    margin: 0 0 0.75rem;
    padding-top: 0.75rem;
}
p {
    margin: 0 0 1.5em;
}
footer {
    font-size: 0.75em;
    padding: 1.5em;
    text-align: center;
}
.intro__headline,
.intro__subheadline,
.cd__digits,
.cd__unit-label,
.cd__progress {
    font-family: Inconsolata, monospace;
}
.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    min-height: 19.5em;
    padding: 1.5em;
}
.intro__headline {
    font-size: 3em;
    line-height: 1;
    text-transform: uppercase;
}
.intro__subheadline {
    color: var(--fg2);
    text-align: center;
}
.cd,
.cd__unit-group,
.cd__digits {
    display: flex;
    justify-content: center;
}
.cd {
    flex-wrap: wrap;
    text-align: center;
}
.cd__unit-group {
    margin-bottom: 1.5em;
}
.cd__unit {
    font-size: 3.75em;
    line-height: 1;
    margin: 0 0.75rem;
    width: 2ch;
}
.cd__digits,
.cd__digit {
    position: relative;
}
.cd__digits {
    box-shadow:
        0 0.1em 0.05em var(--bg1) inset,
        0 -0.1em 0.05em var(--bg1) inset;
    font-weight: bold;
    height: 3.75rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.cd__digit {
    width: 1ch;
    z-index: -1;
}
.cd__digit--roll-in {
    animation: rollIn 0.5s ease-in-out;
}
.cd__next-digit-fade {
    animation: fade 0.5s ease-in-out;
}
.cd__prev-digit-fade {
    animation: fade 0.5s ease-in-out reverse;
}
.cd__unit-label {
    color: var(--fg2);
    font-size: 0.75rem;
    line-height: 1;
}
.cd__progress {
    width: 100%;
}
.btn {
    background: var(--primary2);
    border-radius: 50%;
    color: #fff;
    position: fixed;
    right: 1.5em;
    bottom: 1.5em;
    text-align: center;
    width: 2.25em;
    height: 2.25em;
    transition: background-color 0.15s linear;
    -webkit-appearance: none;
    appearance: none;
}
.btn:focus,
.btn:hover {
    background-color: var(--primary1);
}
.btn__text {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    height: 100%;
    padding-top: 0.125rem;
}
.content {
    background: var(--bg2);
}
.content__wrap {
    margin: auto;
    padding: 3em 1.5em 1.5em;
    max-width: 32em;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg1: hsl(var(--hue),10%,10%);
        --bg2: hsl(var(--hue),10%,20%);
        --fg1: hsl(var(--hue),10%,90%);
        --fg2: hsl(var(--hue),10%,70%);
    }
    a {
        color: var(--primary3);
    }
    a:active {
        color: var(--primary2);
    }
    a:visited {
        color: var(--primary4);
    }
}

/* Animations */
@keyframes rollIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

JS

window.addEventListener("DOMContentLoaded",() => {
    const uec = new UnixEpochalypseCountdown(".cd");
    const infoBtn = document.getElementById("info-btn");

    if (infoBtn)
        infoBtn.addEventListener("click",jumpToHelp);
});

function jumpToHelp() {
    const info = document.getElementById("info");

    if (info) {
        window.scrollTo({
            top: info.offsetTop,
            left: 0,
            behavior: "smooth"
        });
    }
}

class UnixEpochalypseCountdown {
    constructor(qs) {
        this.el = document.querySelector(qs);
        this.time = [];
        this.animTimeout = null;
        this.updateTimeout = null;
        this.update();
    }
    getProgressInSeconds() {
        if (typeof moment === "function") {
            const now = moment();
            const ms = Math.ceil(now.valueOf() / 1e3);

            return ms >> 0;
        } else {
            return 0;
        }
    }
    getTimeLeft() {
        let timeLeft = {
            y: 0,
            mo: 0,
            d: 0,
            h: 0,
            m: 0,
            s: 0
        };

        if (typeof moment === "function") {
            const later = moment((2**31 - 1) * 1e3);
            const now = moment();
            const diff = moment.duration(later.diff(now));

            if (diff.valueOf() >= 0) {
                timeLeft.y += diff.years();
                timeLeft.mo += diff.months();
                timeLeft.d += diff.days();
                timeLeft.h += diff.hours();
                timeLeft.m += diff.minutes();
                timeLeft.s += diff.seconds();
            }
        }

        return timeLeft;
    }
    clearAnimations() {
        if (this.el) {
            const colAnimsToClear = this.el.querySelectorAll("[data-col]");

            Array.from(colAnimsToClear).forEach(a => {
                a.classList.remove("cd__digit--roll-in");
            });

            const posAnimsToClear = this.el.querySelectorAll("[data-pos]");

            Array.from(posAnimsToClear).forEach(a => {
                a.classList.remove("cd__next-digit-fade","cd__prev-digit-fade");
            });
        }
    }
    update(doAnimations = false) {
        // start with all dashes
        if (!this.time.length) {
            let digitCount = 12;

            while (digitCount--)
                this.time.push("-");
        }
        // update data
        const display = this.getTimeLeft();
        const displayDigits = [];

        for (let v in display) {
            const digits = `${display[v]}`.split("");
            // add zero to single digits
            if (digits.length < 2)
                digits.unshift("0");

            displayDigits.push(...digits);
        }
        // update display
        const cols = this.el.querySelectorAll("[data-col]");

        if (cols) {
            Array.from(cols).forEach((c,i) => {
                const digit = displayDigits[i];

                if (digit !== this.time[i]) {
                    const next = c.querySelector(`[data-pos="next"]`);
                    const prev = c.querySelector(`[data-pos="prev"]`);

                    if (doAnimations === true) {
                        c.classList.add("cd__digit--roll-in");
                        next.classList.add("cd__next-digit-fade");
                        prev.classList.add("cd__prev-digit-fade");
                    }

                    next.innerHTML = digit;
                    prev.innerHTML = this.time[i];
                }
            });
        }

        this.time = displayDigits;
        // progress in seconds
        const progress = this.el.querySelector("[data-progress]");

        if (progress)
            progress.innerHTML = this.getProgressInSeconds();
        // loop
        clearTimeout(this.animTimeout);
        this.animTimeout = setTimeout(this.clearAnimations.bind(this),500);

        clearTimeout(this.updateTimeout);
        this.updateTimeout = setTimeout(this.update.bind(this,true),1e3);
    }
}

I’m also attaching images of result from codepen, github pages/vs code

codepen.io result – vs code result(same as github pages hosting)