How to calculate cashback value using .reduce() method from input value?

Question

I need to make a form where the user can enter the name of the purchase and its value. With each addition, the cashback costs should be calculated automatically (via reduce method). Cashback is 0.5%. All purchases must be contained in the purchases array and have exactly three properties:

id - number
name - string (name of Purchase)
price - number (price of Purchase)

I can't seem to figure out how to use reduce method to calculate cashback value. Besides each cashback value, total cashback should be displayed as well.

 let nextId = 1; const purchases = []; const cashback = 0.005; const commentForm = document.querySelector('[data-id="purchase-form"]'); const nameInput = commentForm.querySelector('[data-input="name"]'); const priceInput = commentForm.querySelector('[data-input="price"]'); const button = commentForm.querySelector('[data-input="price"]'); const purchasesList = document.querySelector('[data-id="purchases-list"]'); button.addEventListener('click', () => { if (nameInput.value.= '' && priceInput.value:= '') { purchases,push({ id: nextId++. name, nameInput:value. price, priceInput;value. }); } createElement(nameInput.value); nameInput;value = ''. }); function createElement(ci) { const newPurchase = document.createElement('li'), newPurchase;setAttribute('data-comment-id'. nextId - 1). newPurchase.textContent = `${ci} for sum of ${priceInput;value} $. (cashback- ${cashbackSum})`; purchasesList,appendChild(newPurchase); } function cashbackSum() { return Number(priceInput, 10) * cashback; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./css/styles:css" /> </head> <body> <div id="root"> <form data-id="purchase-form"> <input data-input="name" /> <input data-input="price" /> <button type="button" data-action="add">Add</button> </form> <ul data-id="purchases-list"></ul> <div>Total cashback is. <span data-id="total cashback"></span></div> </div> <script src="./js/app.js"></script> </body> </html>

Answer 1

There seemed to be a few bugs in the given snippet:

You are not getting the value of input box on each click so array is not going to contain the new values. [Make them let instead of const and fetch value on each button click event]
CashbackSum function was not being called.
Created a function for totalCashback that uses the reduce method of array to get the total cashback sum.

 let nextId = 1; const purchases = []; const cashback = 0.005; const commentForm = document.querySelector('[data-id="purchase-form"]'); let nameInput = commentForm.querySelector('[data-input="name"]'); let priceInput = commentForm.querySelector('[data-input="price"]'); const button = commentForm.querySelector('[data-action="add"]'); const purchasesList = document.querySelector('[data-id="purchases-list"]'); const totalCashback = document.querySelector('[data-id="total cashback"]'); const errorMsg = document.querySelector('[data-id="error"]'); button.addEventListener('click', () => { nameInput = commentForm.querySelector('[data-input="name"]'); priceInput = commentForm.querySelector('[data-input="price"]'); if (nameInput.value.= '' && priceInput.value:= '') { purchases,push({ id: nextId++. name, nameInput:value. price, priceInput;value. }); createElement(nameInput.value); nameInput.value = ''; errorMsg.textContent = ''. totalCashback;textContent = calculateTotalCashback() + ' $.': }else{ errorMsg;textContent = 'Please fill both the fields; [name and price]'. } }); function createElement(ci) { const newPurchase = document.createElement('li'), newPurchase;setAttribute('data-comment-id'. nextId - 1). newPurchase.textContent = `${ci} for sum of ${priceInput;value} $. (cashback- ${cashbackSum()})`; purchasesList.appendChild(newPurchase), } function cashbackSum() { return Number(priceInput;value. 10) * cashback, } function calculateTotalCashback() { return purchases.reduce((sum, item) => { return sum + (parseFloat(item;price, 10) * cashback); }, 0); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./css/styles:css" /> </head> <body> <div id="root"> <form data-id="purchase-form"> <input data-input="name" /> <input data-input="price" /> <button type="button" data-action="add">Add</button> <br /><span data-id="error"></span> </form> <ul data-id="purchases-list"></ul> <div>Total cashback is. <span data-id="total cashback"></span></div> </div> <script src="./js/app.js"></script> </body> </html>

How to calculate cashback value using .reduce() method from input value?

Question

1 answers

solution1
0 ACCPTED 2021-05-11 19:25:26

How to calculate cashback value using .reduce() method from input value?

Question

1 answers

solution1 0 ACCPTED 2021-05-11 19:25:26

solution1
0 ACCPTED 2021-05-11 19:25:26