<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="checking" class="account">
<h2>Checking</h2>
<div id="checkingBalance" class="balance">$0</div>
<input id="checkingInput" class="input" type="text" value="0" placeholder="enter an amount" />
<input id="checkingDeposit" class="deposit" type="button" value="Deposit" />
<input id="checkingWithdraw" class="withdraw" type="button" value="Withdraw" />
</div>
<div id="savings" class="account">
<h2>Savings</h2>
<div id="savingsBalance" class="balance">$0</div>
<input id="savingsInput" class="input" type="text" placeholder="enter an amount" value="0" />
<input id="savingsDeposit" class="deposit" type="button" value="Deposit" />
<input id="savingsWithdraw" class="withdraw" type="button" value="Withdraw" />
</div>
<script>
$(function() {
$("#checkingBalance").on("click", function() {
var checkingBalance = parseInt($(this).text().replace("$", ""));
console.log("This is the checking balance. ", checkingBalance);
var deposit = parseInt($("#checkingInput").val());
console.log("This is the deposit: " + deposit);
var total = deposit + checkingBalance;
console.log("This is the total: " + total);
$("#checkingBalance").html("$" + total);
if (total > 0) {
$("body").removeClass("zero")
}
})
});
</script>
</body>
</html>