I need write a program that should return the amount of notes and coins for the customer's chan-CodePudding

I'm writing a program that should returns the costumer change and the amount of notes and coins for the customer's change.

It's working well when the bill amount is bigger than the cash (it's showing the error message about how much is missing). But its not accepting when it's a decimal number (e.g: 10.25).

It's parcial working when the cash amount is bigger than bill amount (it's showing how many of each notes is needed but when its a decimal it's not recognizing either. Also is not showing how much is the change).

And on the other cases:

When the cash amount and bill amount are equal "Exact amount. No change." message it's not being showed.

/* Declaring all the variables required */
const totalPrice = document.querySelector("#bill-amount")
const totalPaid = document.querySelector("#cash-amount")
const invalidInput = document.querySelector(".invalid-input")
const noteTds = document.querySelectorAll("#note-values td")
const billForm = document.querySelector("#bill-form")
/* Add event listeners */
billForm.addEventListener("submit", handleFormSubmission)

/*Add functions */
function handleFormSubmission(event) {
  event.preventDefault()
  validateCashAndFillTable(totalPrice.value, totalPaid.value)
}

function validateCashAndFillTable(totalPrice, totalPaid) {
  const {message, result} = validateAmounts(totalPrice, totalPaid)
  if (!result) {
    printError(message);
    return;
  }
  const change = (totalPaid - totalPrice)
  const notes = [50, 20, 10, 5, 2, 1, 0.50, 0.25, 0.20, 0.10, 0.05, 0.02, 0.01]

    if (change > 0) fillTableWithNotes (notes, change) 
    return {
      message: `Costumer change is ${result}`
    }
}

function fillTableWithNotes (notes, change) {
  for (let index =0; index < notes.length; index  ) {
    const notesNumber = parseInt(change / notes[index])
    change = change % notes [index]
    noteTds[index].innerText = notesNumber;
    if (change === 0) 
    return{
      message: `Exact amount. No change.`
    }
  }
}

function printError(message) {
  invalidInput.innerText = message
  invalidInput.classList.add("active")
}

function validateAmounts (totalPrice, totalPaid)  {
  if(!isNaN(totalPaid) && !isNaN(totalPrice)) {
    if (parseInt(totalPrice, 10) > parseInt(totalPaid, 10)){
      return{
        message: `Insufficient founds, please add ${totalPrice - totalPaid}€`,
        result : false,
      }
    }
    return {
      message: "",
      result: true,
    };
  }

}

<body>
    <div >
        <main>
            <section >
                <h1> Cash Register </h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, aliquam.
                </p>
            </section>
            <form id="bill-form">
                <div >
                    <label for="" id="label-form">Bill Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="bill_amount"
                    id="bill-amount"
                    placeholder="0.0"
                    pattern="[0-9] "
                    required />
                </div>
                <div >
                    <label for="" id="label-form">Cash Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="cash_amount"
                    id="cash-amount"
                    placeholder="0.0"
                    pattern="[0-9] "
                    required />
                </div>
                <div >
                    <button type="submit">Calculate</button>
                </div>
            </form>
            <p >
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, laudantium!
            </p>
            <section >
                <h2>Costumer Change:</h2>
                <p ></p>
                <table >
                    <tbody>
                        <tr id="note-values">
                            <th>Quantity of Notes</th>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>Notes</th>
                            <td>50€</td>
                            <td>20€</td>
                            <td>10€</td>
                            <td>5€</td>
                            <td>2€</td>
                            <td>1€</td>
                            <td>0.50€</td>                            
                            <td>0.25€</td>
                            <td>0.20€</td>
                            <td>0.10€</td>
                            <td>0.05€</td>
                            <td>0.02€</td>
                            <td>0.01€</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>
    </div>
    
</body>

Thank you for your help!

CodePudding user response：

You need to allow your inputs to accept decimals using step="0.01".

You also need to round your change value in a few places.

You need to fix your return statement in the fillTableWithNotes function.

You need to use printMessage on the returned change value (I changed printError to printMessage).

/* Declaring all the variables required */
const totalPrice = document.querySelector("#bill-amount")
const totalPaid = document.querySelector("#cash-amount")
const invalidInput = document.querySelector(".invalid-input")
const noteTds = document.querySelectorAll("#note-values td")
const billForm = document.querySelector("#bill-form")
/* Add event listeners */
billForm.addEventListener("submit", handleFormSubmission)

/*Add functions */
function handleFormSubmission(event) {
  event.preventDefault()
  validateCashAndFillTable(totalPrice.value, totalPaid.value)
}

function roundToSecondDecimal(value) {
  if (typeof value === "string") value = parseFloat(value)
  return Math.round(value*100)/100
}

function validateCashAndFillTable(totalPrice, totalPaid) {
  const {message, result} = validateAmounts(totalPrice, totalPaid)
  if (!result) {
    printMessage(message);
    return;
  }
  const change = roundToSecondDecimal(totalPaid - totalPrice)
  const notes = [50, 20, 10, 5, 2, 1, 0.50, 0.25, 0.20, 0.10, 0.05, 0.02, 0.01]

    printMessage (fillTableWithNotes (notes, change).message)
}

function fillTableWithNotes (notes, change) {
  let originalChange = change
  for (let index =0; index < notes.length; index  ) {
    const notesNumber = parseInt(change / notes[index])
    change = change % notes [index]
    noteTds[index].innerText = notesNumber;
  }
  if (originalChange === 0) 
  return{
    message: `Exact amount. No change.`
  }
  else
  return {
    message: `Costumer change is ${roundToSecondDecimal(originalChange)}`
  }
}

function printMessage(message) {
  invalidInput.innerText = message
  invalidInput.classList.add("active")
}

function validateAmounts (totalPrice, totalPaid)  {
  if(!isNaN(totalPaid) && !isNaN(totalPrice)) {
    if (parseInt(totalPrice, 10) > parseInt(totalPaid, 10)){
      return{
        message: `Insufficient founds, please add ${totalPrice - totalPaid}€`,
        result : false,
      }
    }
    return {
      message: "",
      result: true,
    };
  }

}

<body>
    <div >
        <main>
            <section >
                <h1> Cash Register </h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, aliquam.
                </p>
            </section>
            <form id="bill-form">
                <div >
                    <label for="" id="label-form">Bill Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="bill_amount"
                    id="bill-amount"
                    placeholder="0.0"
                    step="0.01"
                    required />
                </div>
                <div >
                    <label for="" id="label-form">Cash Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="cash_amount"
                    id="cash-amount"
                    placeholder="0.0"
                    step="0.01"
                    required />
                </div>
                <div >
                    <button type="submit">Calculate</button>
                </div>
            </form>
            <p >
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, laudantium!
            </p>
            <section >
                <h2>Costumer Change:</h2>
                <p ></p>
                <table >
                    <tbody>
                        <tr id="note-values">
                            <th>Quantity of Notes</th>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>Notes</th>
                            <td>50€</td>
                            <td>20€</td>
                            <td>10€</td>
                            <td>5€</td>
                            <td>2€</td>
                            <td>1€</td>
                            <td>0.50€</td>                            
                            <td>0.25€</td>
                            <td>0.20€</td>
                            <td>0.10€</td>
                            <td>0.05€</td>
                            <td>0.02€</td>
                            <td>0.01€</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>
    </div>
    
</body>