Trying to copy Codepen Code locally

Question

Trying to get this working locally from codepen https://codepen.io/oxla/pen/awmMYY Everything but the functionality I can get working.

I'm calling the JS File and the Latest Jquery.

  <head>
    <link type="text/css" rel="stylesheet" href="styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/script.js"></script>
    </head>

What am I missing?

THE JS

const checkboxValues = JSON.parse(localStorage.getItem("checkboxValues")) || {},
    buttons = Array.from(document.querySelectorAll(".checklist-item__expand")),
    labels = Array.from(document.querySelectorAll(".checklist-item__title")),
    checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]')),
    checkboxesLength = checkboxes.length,
    progress = document.querySelector(".progress__bar"),
    counter = document.querySelector(".progress__count"),
    reset = document.querySelector(".progress__reset");
function loadIds() {
    for (let a = 0; a < checkboxesLength; a += 1) {
        const b = a => a.replace(/[ ,.!?;:'-]/g, "");
        (checkboxes[a].id = `${b(
            checkboxes[a].nextSibling.nextSibling.innerText
        ).toLowerCase()}`), checkboxes[a].nextSibling.setAttribute(
            "for",
            `${b(checkboxes[a].nextSibling.nextSibling.innerText).toLowerCase()}`
        );
    }
}
function updateStorage(a) {
    (checkboxValues[a.id] = a.checked), localStorage.setItem(
        "checkboxValues",
        JSON.stringify(checkboxValues)
    );
}
function countChecked() {
    if ("checkbox" === this.type) {
        const a = this.parentNode.parentNode.parentNode,
            b =
                a.querySelectorAll("input:checked").length /
                a.querySelectorAll(".checklist-item").length;
        a.querySelector(
            ".checklist__percentage-border"
        ).style.transform = `scaleX(${b})`;
    } else
        Array.from(document.querySelectorAll(".checklist")).forEach(a => {
            const b =
                a.querySelectorAll("input:checked").length /
                a.querySelectorAll(".checklist-item").length;
            a.querySelector(
                ".checklist__percentage-border"
            ).style.transform = `scaleX(${b})`;
        });
    let a = 0;
    Array.from(document.querySelectorAll("input:checked")).forEach(() => {
        a += 1;
    }), (counter.innerText = `${a}/${checkboxesLength}`), (progress.style.transform = `scaleX(${a /
        checkboxesLength})`), (checkboxValues.globalCounter = a), updateStorage(this);
}
function loadValues() {
    const a = checkboxValues.globalCounter || 0;
    (counter.innerText = `${a}/${checkboxesLength}`), Object.keys(
        checkboxValues
    ).forEach(a => {
        "globalCounter" !== a &&
            (document.getElementById(a).checked = checkboxValues[a]);
    }), countChecked();
}
function toggleExpand() {
    const a = this.parentNode;
    a.querySelector(".line").classList.toggle("closed"), a.classList.toggle(
        "open"
    );
}
function resetCheckboxes() {
    this.classList.add("progress__reset--pressed"), checkboxes.forEach(
        a => (a.checked = !1)
    ), Object.keys(checkboxValues).forEach(
        a => delete checkboxValues[a]
    ), countChecked();
}
window.onload = function() {
    loadIds(), loadValues(), checkboxes.forEach(a =>
        a.addEventListener("click", countChecked)
    ), buttons.forEach(a =>
        a.addEventListener("click", toggleExpand)
    ), labels.forEach(a =>
        a.addEventListener("click", toggleExpand)
    ), reset.addEventListener("click", resetCheckboxes), reset.addEventListener(
        "animationend",
        function() {
            this.classList.remove("progress__reset--pressed");
        },
        !1
    ), "serviceWorker" in navigator &&
        navigator.serviceWorker.register("/sw.js", { scope: "/" })
};

Answer 1

There isn't actually jQuery used at all, what you might be confused with is the use of the $ in template literals .

When you include the script in the head, the JavaScript will execute. The error you are getting is

Uncaught TypeError: Cannot set property 'innerText' of null

because innerText is trying to be set on a null object (line 52)

(counter.innerText = `${a}/${checkboxesLength}`), Object.keys(

counter is null, because before the document is actually loaded, counter is attempted to be set (line 7)

counter = document.querySelector(".progress__count")

To fix this, place the script below the body tags.

Also, the quickest way to get a CodePen locally is to Export to a Zip file. (bottom right of the page)

As you will note, the script is included at the bottom of the exported index.html

Trying to copy Codepen Code locally

Question

1 answers

solution1
0 2017-06-27 18:35:33

Trying to copy Codepen Code locally

Question

1 answers

solution1 0 2017-06-27 18:35:33

solution1
0 2017-06-27 18:35:33