Javascript Algorithms and Data Structure(Beta) Cash Register Project

Hello everyone,
According to the user’s stories that are being fullfilled and tested my self, the project is not passed. Even-though I tried the (failed tests) and got the required output. Still not passed.
Please advise.
Thks

Could you share your code? Without seeing it it might be very hard or impossible to say why tests are failing.

1 Like

sanity,
Thanks your reply, here we go:

else {
    let moneyUnits = {
      "ONE HUNDRED": 100,
      TWENTY: 20,
      TEN: 10,
      FIVE: 5,
      ONE: 1,
      QUARTER: 0.25,
      DIME: 0.1,
      NICKEL: 0.05,
      PENNY: 0.01,
    };
    cid = cid.reverse();

    for (let elem of cid) {
      let tempVariable = [elem[0], 0];

      elem[1] = parseFloat(elem[1].toFixed(2));

      while (dueChange >= moneyUnits[elem[0]] && elem[1] > 0) {

        dueChange -= moneyUnits[elem[0]];
        dueChange = parseFloat(dueChange.toFixed(2))

        elem[1] -= moneyUnits[elem[0]];
        elem[1] = elem[1].toFixed(2)

        tempVariable[1] += parseFloat(moneyUnits[elem[0]].toFixed(2));
      }
      if (tempVariable[1] > 0 && dueChange < cidTotal) {
        Status.change.push(tempVariable);
        Status.Status = "OPEN"
        let final = Status.change
          .map((item) => `${item[0]}: $${item[1]}<br>`)
          .join("");
        changeDue.innerHTML = `Status: ${Status.Status} ${final}`;
        payment.value = "";
        //priceInput.value = "";
      }
      if (dueChange > 0) {
        Status.Status = "INSUFFICIENT_FUNDS";
        changeDue.innerHTML = `Status: ${Status.Status}`;
      }
    }
    
      return Status
    
  }
};

purchaseBtn.addEventListener("click", (e) => {
  e.preventDefault();

  transaction(price, cash, cid);
});

cidContents.innerHTML = cid
  .map((item) => `${item[0]}: $${item[1]}<br>`)
  .join("");

That doesn’t seem to be complete code, it starts from else {. HTML and CSS also is needed to fully reproduce the situation.

Thank you for you quick reply. Am I allowed to post full code ?

Sure, no other way around it.

Here we go:

const payment = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const priceInput = document.getElementById("price");
const cidContents = document.getElementById("cash-drawer-para");

let price = 1.87;

let cid = [
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
];
// let cid = [
//   ["PENNY", 0.5],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 0],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0],
// ];

const transaction = (price, cash, cid) => {
  cash = Number(payment.value);
  price - Number(priceInput.value)
  let dueChange = Number(cash - priceInput.value);

  let Status = {};
  Status.Status = "OPEN";
  Status.change = [];

  let cidTotal = parseFloat(
    cid
      .map((item) => item)
      .reduce((acc, curr) => acc + curr[1], 0)
      .toFixed(2)
  );

  // cash is less than price
  if (cash < price ) {
    alert("Customer does not have enough money to purchase the item");
    payment.value = "";
    changeDue.textContent = "";
    return;
  } else if (cash === price) {
    //Status.Status = "CLOSED";
    payment.value = ``;
    //priceInput.value = ``;
    changeDue.innerHTML = `No change due - customer paid with exact cash`;
    return;
  } else if (dueChange > cidTotal) {
    Status.Status = "INSUFFICIENT_FUNDS";
    payment.value = ``;
    //priceInput.value = ``;
    changeDue.innerHTML = `Status: ${Status.Status}`;
    return;
  } else if (cidTotal === dueChange) {
    Status.Status = "CLOSED";
    changeDue.innerHTML = `Status: ${Status.Status}<br>${cid.filter((item) => item[1] > 0)}`;
    return;

  } else {
    let moneyUnits = {
      "ONE HUNDRED": 100,
      TWENTY: 20,
      TEN: 10,
      FIVE: 5,
      ONE: 1,
      QUARTER: 0.25,
      DIME: 0.1,
      NICKEL: 0.05,
      PENNY: 0.01,
    };
    cid = cid.reverse();

    for (let elem of cid) {
      let tempVariable = [elem[0], 0];

      elem[1] = parseFloat(elem[1].toFixed(2));

      while (dueChange >= moneyUnits[elem[0]] && elem[1] > 0) {

        dueChange -= moneyUnits[elem[0]];
        dueChange = parseFloat(dueChange.toFixed(2))

        elem[1] -= moneyUnits[elem[0]];
        elem[1] = elem[1].toFixed(2)

        tempVariable[1] += parseFloat(moneyUnits[elem[0]].toFixed(2));
      }
      if (tempVariable[1] > 0 && dueChange < cidTotal) {
        Status.change.push(tempVariable);
        Status.Status = "OPEN"
        let final = Status.change
          .map((item) => `${item[0]}: $${item[1]}<br>`)
          .join("");
        changeDue.innerHTML = `Status: ${Status.Status} ${final}`;
        payment.value = "";
        //priceInput.value = "";
      }
      if (dueChange > 0) {
        Status.Status = "INSUFFICIENT_FUNDS";
        changeDue.innerHTML = `Status: ${Status.Status}`;
      }
    }
    
      return Status
    
  }
};

purchaseBtn.addEventListener("click", (e) => {
  e.preventDefault();

  transaction(price, cash, cid);
});

cidContents.innerHTML = cid
  .map((item) => `${item[0]}: $${item[1]}<br>`)
  .join("");

Could you share also HTML and CSS?

Please note that I tested the code and got all the required output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link
      rel="icon"
      type="image/png"
      href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
    />
    <link rel="stylesheet" href="./styles.css" />
    <title>Cash-Register</title>
  </head>
  <body>
    <main>
        <h1 id="header">Cash Register App.</h1>
        <div class="change-due" id="change-due"></div>
            <p id="change-due-p"></p>
        </div>
      <div class="container">
        <div class="input-div">
          <label for="cash" id="input-label"><strong>Enter Cash:</strong></label>
          <input type="number" id="cash" required />
          <button type="button" id="purchase-btn">Purchase</button>
        </div>
        <div class="price">
          <label for="price" id="price-lbl"></label>
          <input type="number" id="price" value="1.87" required />
          
        </div>
        <div class="cash-drawer">
          <h3 id="cash-drawer-header">Changes in drawer:</h3>
        </div>
          <div id="cash-drawer-para"></div>
    

        
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,300&display=swap");

:root {
    --background-all: #23395d;
    --background-op: #ADD8E6;
    --validator: #00d2ff
  }
* {
  font-family: 'Poppins', sans-seri;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
    background-color: var(--background-all);
}
#header {
    color: white;
    width: 100%;
    text-align: center;
    margin: 2.5rem auto 1.5rem;
}
.container {
    width: 80%;
    height: auto;
    margin: 5rem auto;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    border: 2px solid var(--background-op);
    border-radius: 13px;
    background-color: var(--background-op);
}

#change-due {
    width: 100%;
    height: auto;
    text-align: center;
    color: white;
}
.input-div {
    width: 100%;
    margin: 1rem auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#input-label, #cash, #purchase-btn {
    width: 30%;
    height: 3rem;
    margin: 0.5rem auto;
    padding: 8px;
    border: 2px solid var(--background-op);
    border-radius: 7px;
    background-color: var(--validator);
}
#input-label {
    font-size:larger;
    height: 1em;
    text-align: center;
    background-color: var(--background-op);
}
#purchase-btn {
    cursor: pointer;
}
.price {
    text-align: center;
    height: 3rem;
    margin: 2rem auto;
    padding: 5px;
    border: 2px solid var(--background-op);
    border-radius: 5px;
    
}

.cash-drawer {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
#cash-drawer-header {
    text-align: center;
}
#cash-drawer-para {
    width: 20%;
    margin: auto;
    padding: 2px;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 5px 3px gray;
    
}
@media screen and (max-width: 600px){
    .input-div {
        width: 100%;
        margin: 0.5rem auto;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #input-label, #cash, #purchase-btn {
        width: 100%;
        height: 2rem;
        margin: 0.50rem auto;
        border: 2px solid var(--background-op);
        border-radius: 7px;
    }
    #input-label {
        font: size 20px;;
        text-align: center;
    }
    #cash-drawer-para {
        width: 70%;
        margin: 0.5rem auto;
        padding: 2px;
        border: 1px solid black;
        border-radius: 5px;
        
    }
    
}

The main issue seem to be that code uses the price from the #price element. Tests rely on using the price variable, which can be changed depending on test, however code always calculate the answer using the value from #price element.

For last case I’m getting answer that’s different in couple details from what is expected:

Status: CLOSED
PENNY,0.5

Status: CLOSED
PENNY,05
what’s wrong with this output?

As in the instructions, last case expects result: Status: CLOSED PENNY: $0.5

1 Like

sanity,
Thank you vervy much for your help/time. Believe it or not I solved the problem with some unconvenience way(at least to me).
The problem was the $ signe that should have been replaced before the number.

1 Like