Build a Cash Register Project - Build a Cash Register

revanajustin · March 7, 2024, 3:57pm

please help me to complete this project. the error was due to lack of instructions :

- When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: INSUFFICIENT_FUNDS".
- When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED PENNY: $0.5".

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register</title>
    <style>
        #change-due {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>Price: <span id="price">19.5</span></p>
        <p>Cash: <input type="number" id="cash" step="0.01" min="0"></p>
        <p>Cash Drawer: <span id="cid"></span></p>
        <p>Change Due: <div id="change-due"></div></p>
        <button id="purchase-btn">Purchase</button>
    </div>
    <script>
        const price = 19.5;
        const cash = 20;
        const cid = [
            ["PENNY", 0.01],
            ["NICKEL", 0],
            ["DIME", 0],
            ["QUARTER", 0],
            ["ONE", 1],
            ["FIVE", 0],
            ["TEN", 0],
            ["TWENTY", 0],
            ["ONE HUNDRED", 0]
];
        const cidElement = document.getElementById("cid");
        cidElement.innerHTML = cid.map(([name, value]) => `${name}: $${value}`).join("<br>");

        const cashInput = document.getElementById("cash");
        const changeDueElement = document.getElementById("change-due");
        const purchaseBtn = document.getElementById("purchase-btn");

        purchaseBtn.addEventListener("click", () => {
    const cash = parseFloat(cashInput.value);
    if (cash < price) {
        alert("Customer does not have enough money to purchase the item");
        return;
    }

    if (cash === price) {
        changeDueElement.textContent = "No change due - customer paid with exact cash";
        return;
    }

    let change = cash - price;

    let totalCashInDrawer = cid.reduce((acc, curr) => acc + curr[1], 0);

    if (change > totalCashInDrawer) {
        changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
        return;
    }

    let changeDue = [];

    const currencyUnit = {
        "PENNY": 0.01,
        "NICKEL": 0.05,
        "DIME": 0.1,
        "QUARTER": 0.25,
        "ONE": 1,
        "FIVE": 5,
        "TEN": 10,
        "TWENTY": 20,
        "ONE HUNDRED": 100
    };

    for (let i = cid.length - 1; i >= 0; i--) {
        const currencyUnitName = cid[i][0];
        const currencyUnitValueTotal = cid[i][1];
        const currencyUnitValue = currencyUnit[currencyUnitName];

        if (change >= currencyUnitValue && currencyUnitValueTotal > 0) {
            const currencyUnitAmount = Math.min(Math.floor(change / currencyUnitValue), currencyUnitValueTotal / currencyUnitValue);
            change -= currencyUnitAmount * currencyUnitValue;
            change = parseFloat(change.toFixed(2)); // Fix floating point precision issue
            changeDue.push(`${currencyUnitName}: $${(currencyUnitAmount * currencyUnitValue).toFixed(2)}`);
        }

        if (change === 0) {
            break;
        }
    }

    if (change > 0) {
        changeDueElement.textContent = `Status: INSUFFICIENT_FUNDS (Cannot return exact change, still owed: $${change.toFixed(2)})`;
    } else {
        changeDueElement.textContent = `Status: OPEN ${changeDue.join("<br>")}`;
    }
});

    </script>
</body>
</html>

/* file: styles.css */

/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

robheyays · March 7, 2024, 5:25pm

I`m not sure whether you have an issue with the instructions, sometimes they can be hard to follow when you think you have everything correct. Here is some code to check out , It wont be an SPA and there is no CSS unless you want to add It.

Build-a-cash-register/index.html at main · mugabodannyshafi/Build-a-cash-register (github.com)

ilenia · March 7, 2024, 6:59pm

hey @robheyays, thank you for your willingness to help, but that issue’s closed and fixed, there is no need to bring it out, unless you have proof that the issue is still happening

ilenia · March 7, 2024, 7:02pm

you have more than requested, the tests check the exact content of the element, and all the stuff inside the parenthesis is not expected

for the last one, your status is OPEN, but the cid has exact change and nothing more, the money finishes so the register has to close

robheyays · March 7, 2024, 7:48pm

No, I did not catch that part. I`ll have to edit the post.

revanajustin · March 8, 2024, 3:49pm

where is the coding position you mean and what does it mean that the register has to closed?

ilenia · March 8, 2024, 5:19pm

The resulting output has to be STATUS: CLOSED when the cid total value is equal to the change to give the customer

revanajustin · March 8, 2024, 6:04pm

if (change > 0) {
changeDueElement.textContent = “Status: INSUFFICIENT_FUNDS”;
} else if (totalCashInDrawer === 0) {
changeDueElement.textContent = “Status: CLOSED”;
} else {
changeDueElement.textContent = Status: OPEN ${changeDue.join("<br>")};
}
});

still wrong:((

ilenia · March 8, 2024, 6:31pm

can you give all your javascript again? I don’t know where you changed things

revanajustin · March 9, 2024, 1:43pm

Cash Register #change-due { margin-top: 10px; font-weight: bold; }

Price: 19.5

Cash:

Cash Drawer:

Change Due:

Purchase

const price = 19.5; const cash = 20; const cid = [ ["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0] ]; const cidElement = document.getElementById("cid"); cidElement.innerHTML = cid.map(([name, value]) => `${name}: $${value}`).join("
");

    const cashInput = document.getElementById("cash");
    const changeDueElement = document.getElementById("change-due");
    const purchaseBtn = document.getElementById("purchase-btn");

    purchaseBtn.addEventListener("click", () => {
const cash = parseFloat(cashInput.value);
if (cash < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
}

if (cash === price) {
    changeDueElement.textContent = "No change due - customer paid with exact cash";
    return;
}

let change = cash - price;

let totalCashInDrawer = cid.reduce((acc, curr) => acc + curr[1], 0);

if (change > totalCashInDrawer) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
    return;
}

let changeDue = [];

const currencyUnit = {
    "PENNY": 0.01,
    "NICKEL": 0.05,
    "DIME": 0.1,
    "QUARTER": 0.25,
    "ONE": 1,
    "FIVE": 5,
    "TEN": 10,
    "TWENTY": 20,
    "ONE HUNDRED": 100
};

for (let i = cid.length - 1; i >= 0; i--) {
    const currencyUnitName = cid[i][0];
    const currencyUnitValueTotal = cid[i][1];
    const currencyUnitValue = currencyUnit[currencyUnitName];

    if (change >= currencyUnitValue && currencyUnitValueTotal > 0) {
        const currencyUnitAmount = Math.min(Math.floor(change / currencyUnitValue), currencyUnitValueTotal / currencyUnitValue);
        change -= currencyUnitAmount * currencyUnitValue;
        change = parseFloat(change.toFixed(2)); // Fix floating point precision issue
        changeDue.push(`${currencyUnitName}: $${(currencyUnitAmount * currencyUnitValue).toFixed(2)}`);
    }

    if (change === 0) {
        break;
    }
}

 if (change > 0) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
} else if (totalCashInDrawer === 0) {
    changeDueElement.textContent = "Status: CLOSED";
} else {
    changeDueElement.textContent = `Status: OPEN ${changeDue.join("<br>")}`;
}

});

</script>

ilenia · March 9, 2024, 1:46pm

please format your code appropriately

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

revanajustin · March 9, 2024, 2:08pm

<p>Hello World</p>

This is a test paragraph.

//codes goes here
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register</title>
    <style>
        #change-due {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>Price: <span id="price">19.5</span></p>
        <p>Cash: <input type="number" id="cash" step="0.01" min="0"></p>
        <p>Cash Drawer: <span id="cid"></span></p>
        <p>Change Due: <div id="change-due"></div></p>
        <button id="purchase-btn">Purchase</button>
    </div>
    <script>
        const price = 19.5;
        const cash = 20;
        const cid = [
            ["PENNY", 0.01],
            ["NICKEL", 0],
            ["DIME", 0],
            ["QUARTER", 0],
            ["ONE", 1],
            ["FIVE", 0],
            ["TEN", 0],
            ["TWENTY", 0],
            ["ONE HUNDRED", 0]
];
        const cidElement = document.getElementById("cid");
        cidElement.innerHTML = cid.map(([name, value]) => `${name}: $${value}`).join("<br>");

        const cashInput = document.getElementById("cash");
        const changeDueElement = document.getElementById("change-due");
        const purchaseBtn = document.getElementById("purchase-btn");

        purchaseBtn.addEventListener("click", () => {
    const cash = parseFloat(cashInput.value);
    if (cash < price) {
        alert("Customer does not have enough money to purchase the item");
        return;
    }

    if (cash === price) {
        changeDueElement.textContent = "No change due - customer paid with exact cash";
        return;
    }

    let change = cash - price;

    let totalCashInDrawer = cid.reduce((acc, curr) => acc + curr[1], 0);

    if (change > totalCashInDrawer) {
        changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
        return;
    }

    let changeDue = [];

    const currencyUnit = {
        "PENNY": 0.01,
        "NICKEL": 0.05,
        "DIME": 0.1,
        "QUARTER": 0.25,
        "ONE": 1,
        "FIVE": 5,
        "TEN": 10,
        "TWENTY": 20,
        "ONE HUNDRED": 100
    };

    for (let i = cid.length - 1; i >= 0; i--) {
        const currencyUnitName = cid[i][0];
        const currencyUnitValueTotal = cid[i][1];
        const currencyUnitValue = currencyUnit[currencyUnitName];

        if (change >= currencyUnitValue && currencyUnitValueTotal > 0) {
            const currencyUnitAmount = Math.min(Math.floor(change / currencyUnitValue), currencyUnitValueTotal / currencyUnitValue);
            change -= currencyUnitAmount * currencyUnitValue;
            change = parseFloat(change.toFixed(2)); // Fix floating point precision issue
            changeDue.push(`${currencyUnitName}: $${(currencyUnitAmount * currencyUnitValue).toFixed(2)}`);
        }

        if (change === 0) {
            break;
        }
    }

    if (change > 0) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
      } else {
        changeDueElement.textContent = "Status: CLOSED PENNY: $0.5";
        changeDueElement.textContent = `Status: OPEN ${changeDue.join("<br>")}`;
        }
});

    </script>
</body>
</html>

ilenia · March 9, 2024, 5:48pm

revanajustin:

if (change > 0) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
      } else {
        changeDueElement.textContent = "Status: CLOSED PENNY: $0.5";
        changeDueElement.textContent = `Status: OPEN ${changeDue.join("<br>")}`;
        }

what do you want to due here? you are writing textContent then overwriting it immediately after