JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<button id="applyInterest">Apply interest</button>

<button id="pay">Pay $100</button>

<div id="amountDue"></div>
<div id="amountPaid"></div>

JavaScript

let amountDue = 10000;
let totalPaid = 0;

function renderAmounts() {
	document.getElementById("amountDue").innerText = `Amount due: ${Math.round(amountDue * 100) / 100}`;
  document.getElementById("amountPaid").innerText = `Total paid: ${Math.round(totalPaid * 100) / 100}`;
}

renderAmounts();

document.getElementById("applyInterest").addEventListener("click", function () {
	amountDue *= 1 + 0.04 / 12;
  renderAmounts();
});

document.getElementById("pay").addEventListener("click", function () {
	const payAmount = Math.min(100, amountDue);
  totalPaid += payAmount;
	amountDue -= payAmount;

  renderAmounts();
});