Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I’m stuck for a long time, so I have read a lot of topics on the forum. I put all my variables and functions in my eventListener and my code don’t pass the test. When I test on my own all is ok… don’t know what I do wrong? Thanks for your help.

Your code so far

<!-- 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>Caisse enregistreuse</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="display">
        <label for="cash">Saisir l'argent du client</label>
        <input id="cash" type="number">
        <button id="purchase-btn">Achat</button>
        <span id="change-due"></span>
    </div>
    <div id="price">Total: <span id="price-display"></span></div>
    <div id="cid-content"></div>
    <div id="cash-in-drawer"></div>
    <script src="script.js"></script>
</body>
</html>

/* file: script.js */
// Fond de caisse et montant dû
let price = 3.26;
let cid = [
  ['PENNY', 1.01],//0.01
  ['NICKEL', 2.05],//0.05
  ['DIME', 3.1],//0.10
  ['QUARTER', 4.25],//0.25
  ['ONE', 90],//1
  ['FIVE', 55],//5
  ['TEN', 20],//10
  ['TWENTY', 60],//20
  ['ONE HUNDRED', 100]//100
];

// Evénement sur le bouton d'achat
document.getElementById("purchase-btn").addEventListener("click", () => {
    //variables et constantes DOM
    let cash = document.getElementById("cash");
    let changeDue = document.getElementById("change-due");
    let cidContent = document.getElementById("cid-content");
    let priceDisplay = document.getElementById("price-display");
    let cashInDrawerDisplay = document.getElementById("cash-in-drawer");

    // Variables de calcul
    let changeDueNbr;
    let changeAndStatus = {"status": "", "change": []};

    // Reverse cid
    let cidReversed;
    let valueCid = []; 
    cidReversed = cid.reverse();

    // affichage prix
    priceDisplay.textContent =  "$ " + price;   
    changeDueNbr = (Number(cash.value) - price) * 100;

    // Total cid
    let totalCidArr = [];
    let cashInDrawer = 0;

    // Update fond de caisse total
    function totalCidUpdate() {
        totalCidArr = [];
        cidReversed.forEach((line) => {
            totalCidArr.push(line[1]);
        })
        cashInDrawer = Math.floor(totalCidArr.reduce((acc, curr) => acc + curr) * 100) / 100;
        cashInDrawerDisplay.textContent = "$ " + cashInDrawer;
    }   

    // Update cid

    function cidUpdate() {
        cidReversed.forEach((_value, index) => {
            valueCid = [10000, 2000, 1000, 500, 100, 25, 10, 5, 1];
            cidReversed[index].push(valueCid[index]);
        })
        cidContent.innerHTML = "";
        cidReversed.forEach((line) => {
            cidContent.innerHTML += `${line[0]} : ${line[1]}<br>`;
        })
    }

    totalCidUpdate();
    cidUpdate();

    // analyse de la situation
    if (Number(cash.value) === price) {
        changeDue.textContent = "No change due - customer paid with exact cash"
    }
    else if (Number(cash.value) < price) {
        alert("Customer does not have enough money to purchase the item");
    }
    else if (changeDueNbr === cashInDrawer*100) {
        changeAndStatus["status"] = "CLOSED";
        changeDue.textContent = `Status: ${changeAndStatus.status}`;
        changeDueFct();
    }
    else {
        changeAndStatus["status"] = "OPEN";
        changeDue.textContent = `Status: ${changeAndStatus.status}`;
        changeDueFct();
    }

    //fonctions calcul rendu monnaie

    function changeDueFct() {
        cidReversed.forEach((line) => {
            if (changeDueNbr >= line[2] && line[1] >= line[2] / 100) {
                let sheetNbr = Math.floor(changeDueNbr / (line[2]));
                console.log(changeDueNbr);
                console.log(sheetNbr);
                if ((sheetNbr * line[2]) < line[1] * 100) {
                    changeDueNbr = changeDueNbr - (sheetNbr * line[2]);
                    changeAndStatus["change"].push(` ${line[0]} : $${sheetNbr * line[2] / 100}`);
                    line[1] = line[1] - (sheetNbr * line[2]) /100;
                    cidUpdate();
                    totalCidUpdate();
                }
                else{
                    changeDueNbr = changeDueNbr - (line[1] * 100);
                    changeAndStatus["change"].push(` ${line[0]} : $${line[1]}`);
                    line[1] = 0;
                    cidUpdate();
                    totalCidUpdate();
                }
            }
        })
        changeDueDisplay();
    }

    function changeDueDisplay() {
        if (changeDueNbr > 0.001) {
            changeAndStatus["status"] = "INSUFFICIENT_FUNDS";
            changeDue.textContent = `Status: ${changeAndStatus.status}`;
        }
        else {
            let changeJoin = changeAndStatus.change.join(" ");
            changeDue.textContent = `Status: ${changeAndStatus.status} ${changeJoin}`;
        }
    }
})





/* file: styles.css */
html{
    background-color: grey;
}

#display{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    margin: auto;
}

#cid-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    margin: auto;
}

#price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin: auto;
}

#change-due{
    border: 1px solid black;
    width: 300px;
    height: 100px;
}   

#cash-in-drawer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin: auto;
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN QUARTER: $0.5"

"Status: OPEN QUARTER: $0.5"
 Status: OPEN QUARTER : $0.5

Looks like there is a difference in your spacing here?

1 Like
3

Thank you, I have more tests Ok after the modification of the space.
I find other problem I have to try to solve.

1 Like
4

I post my cnew code, i’m always stuck on 11, 12, 13, 18, 19.
javascript

// Fond de caisse et montant dû
let price = 19.5;
let cid = [
    ['PENNY', 1.01],//0.01
    ['NICKEL', 2.05],//0.05
    ['DIME', 3.1],//0.10
    ['QUARTER', 4.25],//0.25
    ['ONE', 90],//1
    ['FIVE', 55],//5
    ['TEN', 20],//10
    ['TWENTY', 60],//20
    ['ONE HUNDRED', 100]//100
  ];

// Evénement sur le bouton d'achat
document.getElementById("purchase-btn").addEventListener("click", () => {

    let cid2 = [...cid];
    console.log(cid2);

    //variables et constantes DOM
    let cash = document.getElementById("cash");
    let changeDue = document.getElementById("change-due");
    let cidContent = document.getElementById("cid-content");
    let priceDisplay = document.getElementById("price-display");
    let cashInDrawerDisplay = document.getElementById("cash-in-drawer");
    let cidDispo;
    // Variables de calcul
    let changeDueNbr;
    let changeAndStatus = {"status": "", "change": []};

    // Reverse cid
    let cidReversed;
    let valueCid = []; 
    cidReversed = cid2.reverse();

    // affichage prix
    priceDisplay.textContent =  "$ " + price;   
    changeDueNbr = (Number(cash.value) - price) * 100;

    // Total cid
    let totalCidArr = [];
    let cashInDrawer = 0;

    // Update fond de caisse total
    function totalCidUpdate() {
        totalCidArr = [];
        cidReversed.forEach((line) => {
            totalCidArr.push(line[1]);
        })
        cashInDrawer = Math.floor(totalCidArr.reduce((acc, curr) => acc + curr) * 100) / 100;
        cashInDrawerDisplay.textContent = "$ " + cashInDrawer;
    }   
    totalCidUpdate();
    // Update cid
    valueCid = [10000, 2000, 1000, 500, 100, 25, 10, 5, 1];
        cidReversed.forEach((_value, index) => {
            cidReversed[index].push(valueCid[index]);
        })

    function cidUpdate() {
        cidContent.innerHTML = "";
        cidReversed.forEach((line) => {
            cidContent.innerHTML += `${line[0]} : ${line[1]}<br>`;
        })
    }
    cidUpdate()
    // analyse de la situation

    if (Number(cash.value) === price) {
        changeDue.textContent = "No change due - customer paid with exact cash"
    }
    else if (Number(cash.value) < price) {
        alert("Customer does not have enough money to purchase the item");
    }
    else if (changeDueNbr === cashInDrawer*100) {
        changeAndStatus["status"] = "CLOSED";
        changeDue.textContent = `Status: ${changeAndStatus.status}`;
        changeDueFct();
    }
    else {
        changeAndStatus["status"] = "OPEN";
        changeDue.textContent = `Status: ${changeAndStatus.status}`;
        changeDueFct();
    }

    //fonctions calcul rendu monnaie
    
    function changeDueFct() {
        cidDispo = cashInDrawer*100;
        cidReversed.forEach((line) => {
            console.log(cashInDrawer*100);
            if (changeDueNbr >= line[2] && line[1] >= line[2] / 100 && cidDispo >= changeDueNbr) {
                let sheetNbr = Math.floor(changeDueNbr / (line[2]));
                if ((sheetNbr * line[2]) < line[1] * 100) {
                    changeDueNbr = changeDueNbr - (sheetNbr * line[2]);
                    changeAndStatus["change"].push(` ${line[0]} : $${sheetNbr * line[2] / 100}`);
                    line[1] = line[1] - (sheetNbr * line[2]) /100;
                    cidUpdate();
                    totalCidUpdate();
                    cidDispo = (cashInDrawer - line[1])*100
                }
                else{
                    changeDueNbr = changeDueNbr - (line[1] * 100);
                    changeAndStatus["change"].push(` ${line[0]} : $${line[1]}`);
                    line[1] = 0;
                    cidUpdate();
                    totalCidUpdate();
                    cidDispo = (cashInDrawer - line[1])*100

                }
            }
            else {
                cidDispo = cidDispo - line[1]*100
            }
        })
        changeDueDisplay();
    }

    // affichage du rendu monnaie
    function changeDueDisplay() {
        if (changeDueNbr > 0.001) {
            changeAndStatus["status"] = "INSUFFICIENT_FUNDS";
            changeDue.textContent = `Status: ${changeAndStatus.status}`;
            cash.value = "";
        }
        else {
            let changeJoin = changeAndStatus.change.join(" ");
            changeDue.textContent = `Status: ${changeAndStatus.status} ${changeJoin}`;
            cash.value = "";
        }
    }
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Caisse enregistreuse</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="display">
        <label for="cash">Saisir l'argent du client</label>
        <input id="cash" type="number">
        <button id="purchase-btn">Achat</button>
        <span id="change-due"></span>
    </div>
    <div id="price">Total: <span id="price-display"></span></div>
    <div id="cid-content"></div>
    <div id="cash-in-drawer"></div>
    <script src="script.js"></script>
</body>
</html>

css

html{
    background-color: grey;
}

#display{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    margin: auto;
}

#cid-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    margin: auto;
}

#price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin: auto;
}

#change-due{
    border: 1px solid black;
    width: 300px;
    height: 100px;
}   

#cash-in-drawer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin: auto;
}
5

It’s okay my code passed the test, it was a space problem as you said. Thank you very much. There is a probleme with this evaluation because I try to valid my code by three time and the third was ok without modification of my code.

1 Like
6

was it tests 13, 17 or 19? those run each time with different values, so if sometimes your code passes and sometimes it doesn’t, it still has some isues