JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<label for="balance">Balance:</label>
<input type="text" id="balance" name="balance" placeholder="Balance"><br>
<label for="balance">Burn:</label>
<input type="text" id="burn" name="burn" placeholder="Burn"><br>
<button type="button" id="submit">Update</button>
<br>
<br>
<br>
Records: <pre id="records"></pre>
Balance breakdown: <pre id="balance-breakdown"></pre>
Burn breakdown: <pre id="burn-breakdown"></pre>
<br>
<br>
<br>
<br>

JavaScript

const records = [{
    brand: 'Lamborghini',
    value: 30,
    position: 1
  },
  {
    brand: 'Ferrari',
    value: 10,
    position: 2
  },
  {
    brand: 'Ferrari',
    value: 20,
    position: 3
  },
  {
    brand: 'Bugatti',
    value: 10,
    position: 4
  },
  {
    brand: 'Lamborghini',
    value: 20,
    position: 5
  }
]

function groupBrand(listOfRecords, balance) {
  let output = [];
  let reminder = balance;
  for (let i = 0; i < listOfRecords.length; i++) {
  	let record = listOfRecords[i];
    if (reminder - record.value > 0) {
      reminder = reminder - record.value;
      output.push(record);
    } else {

      output.push({
        brand: record.brand,
        value: reminder,
        position: record.position
      });
      break;
    }
  }

  console.log(output);
  return output;
}

function balanceBreak(listOfRecords, balanceAmount) {
  console.log('====EARN====')
  return groupBrand(listOfRecords, balanceAmount);
}

function burnBreak(listOfRecords, burnAmount) {
  console.log('====BURN====')
  listOfRecords = listOfRecords.sort((a, b) => b.position - a.position);
  console.log(listOfRecords);
  return groupBrand(listOfRecords, burnAmount);
}

function update() {
  const balanceAmount = document.getElementById("balance").value;
  const burnAmount = document.getElementById("burn").value;

  const balanceBreakdown = balanceBreak(records, balanceAmount);
  const burnBreakdown = burnBreak(records, burnAmount);

  document.getElementById("balance-breakdown").innerHTML = JSON.stringify(balanceBreakdown, null, 4)
  document.getElementById("burn-breakdown").innerHTML = JSON.stringify(burnBreakdown, null, 4)
}

document.getElementById("balance").value = 20;
document.getElementById("burn").value = 30;
document.getElementById("records").innerHTML = JSON.stringify(records, null, 4);
document.getElementById("submit").addEventListener("click", update);