Blog: Creating a Cash Counter #3 (More Posts)
Now that we’ve performed most of the calculations by users wanting to count their money, we can start to concentrate on updating the rest of the app. It’ll be worth therefore spending some time getting some layout styling basics in place. On the left of the screen, users should be able to make their money counts, on the right, users will see what they should put in their banking deposits.
To refresh what the HTML structure is like.
<main id="container">
<article class="input_bracket_container"> . . . </article>
<article class="calculations_container"> . . . </article>
</main>So there are 3 main containing elements. Currently, each of these elements stack on top of each other. While I’m developing this part of the app I’d like to get them laid out side by side.
We could just do display: inline-block; for a traditional more basic CSS layout. But I’m going to go for a more modern technique and apply CSS Grid to the container element.
#container {
display: grid;
grid-template-columns: 1fr 1fr;
}There are further layout issues to deal with to come but we can deal with that when the script is completed.
Below are the money denominations and the calculated cash numbers. They represent what goes in the cash main slip and slip stub in UK Banking.
£50.00 £0.00
£20.00 £0.00
£10.00 £0.00
£5.00 £0.00
S&I £0.00
£2.00 £0.00
£1.00 £0.00
OTHER COINS £0.00
TOTAL CASH £0.00
CHEQUES £0.00
TOTAL £0.00
Let’s start incrementally working with the remaining tables like we did before in part 1, and concentrate on £50 denominations.
The ID elements we’ll be using for this part are #main_50 and #stub_50.
We need to do an important UX update first. We need to remove the colspan on the final row on the #mainslip_total and #slipstub_total tables and specifically state that the row refers to a sum total of values. An example of this is below
<tr>
<td>TOTAL CASH</td>
<td id="slipstub_total">£0.00</td>
</tr>Now we’re ready to start on the second half of the app. Where the first element container was the place where the user interacts to count their money, the second part was purely about the results of those counts.
This screenshot should help you understand what I mean.
If someone uses the app to count one £50 note the app will reflect this like it’s filling in a banking deposit slip and to the calculation for us. This is achieved by selecting the IDs of both elements and multiplying the calculation element by the user count. So because the value of variable calc50 is in fact, 50 that value goes across to the table rows in both the Main Cash Counter and the Slip Stub Counter.
// Calculate the total for #stub_50 by multiplying the value of #calc_50 by the value of #input_50
var totalStub50 = parseFloat(calc50.value);
// Update the value of #stub_50 with the calculated total
var stub50Element = document.getElementById('stub_50');
stub50Element.value = totalStub50.toFixed(2);We need a catchall name to prevent duplication and code bloat, so the calculation takes place on both the main and stub parts. And that is multiply50.
// Calculate the total for #stub_50 by multiplying the value of #calc_50 by the value of #input_50
var multiply50 = parseFloat(calc50.value);
// Update the value of #stub_50 with the calculated total
var stub50Element = document.getElementById('stub_50');
var main50Element = document.getElementById('main_50');
stub50Element.value = multiply50.toFixed(2);
main50Element.value = multiply50.toFixed(2);
// Display the total in the cash total element
cashTotal.textContent = '£' + total.toFixed(2); // Format the total with 2 decimal places and prepend £We could go through the rest of the denominations in the same way. But to me, it makes more sense to tackle the Cash and Cheque Totals as the process to do these will be a little different.
handling the cheque totals.
We know how much all our cheque amounts are going to tally because we work it out in the sum total.
// Update the value of #main_cheques and #stub_cheques with the calculated total
var mainChequesElement = document.getElementById('main_cheques');
var stubChequesElement = document.getElementById('stub_cheques');
mainChequesElement.value = '£' + totalItems.toFixed(2);
stubChequesElement.value = '£' + totalItems.toFixed(2);Again, the AI gave me a string concatenation the app simply doesn’t need. Remove the concatenated £ symbol because in our app that would duplicate the cash display.
// Update the value of #main_cheques and #stub_cheques with the calculated total
var mainChequesElement = document.getElementById('main_cash');
var stubChequesElement = document.getElementById('stub_cash');
mainChequesElement.value = totalItems.toFixed(2);
stubChequesElement.value = totalItems.toFixed(2);Now for the Cash total. When I tried to implement the cash counts in the same way as the cheques, I faced a couple of issues. Namely, I wasn’t getting any response in the “Total Cash” table cells and there was no indication that the grand total in the header was taking cash inputs into account.
To try and resolve this, I introduced a cash counter ID element.
<tr>
<td colspan="2">CASH TOTAL</td>
<td id="cash_input_total">0.00</td>
</tr>This is the text prompt I used to get the code.
I've added a colspan and an element which will contain the total of cash inputs, like we did for the check amounts.We can select the cash total with the id attribute #cash_input_total. Calculate the total of all input values in this table and display the calculation in real-time.Now that we’ve identified a unique part of the document to get the total number, it’s a similar process to the £50 cash data we did earlier.
// Select all input elements within the .input_brackets table
var inputElements = document.querySelectorAll('.input_brackets input[type="text"]');
var cashTotal = 0;
// Loop through each input element and add its value to the cash total
inputElements.forEach(function(inputElement) {
cashTotal += parseFloat(inputElement.value || 0);
});
// Update the #cash_input_total element with the calculated cash total
var cashInputTotalElement = document.getElementById('cash_input_total');
cashInputTotalElement.textContent = cashTotal.toFixed(2);However, this created a problem – the .cash_total that exists in the header stopped element stopped taking into account the input brackets. It only takes into account cheque amounts.
The function below allows us to do that by storing the text contents directly in a variable and doing an addition calculation on them.
function updateCashTotal() {
// Calculate the total cash input
var cashInputTotal = parseFloat(document.getElementById('cash_input_total').textContent);
// Get the total value of items (cheque amounts)
var totalItems = parseFloat(document.getElementById('items_total').textContent);
// Calculate the combined total of cash input and cheque amounts
var combinedTotal = cashInputTotal + totalItems;
// Update the .cash_total element with the combined total
var cashTotalElement = document.querySelector('.cash_total');
cashTotalElement.textContent = '£' + combinedTotal.toFixed(2); // Format the total with 2 decimal places and prepend £
}Now that we’ve done that we now have separation of cash totals, cheque totals and the grand total of all counts.
an issue with how you’re updating the .cash_total element. You mentioned that you want to display the combined total of #cash_input_total, #cash_input, #cash_input, and #items_total, but it seems you’re only updating #items_total in the .cash_total element.
function updateCashTotal() {
// Calculate the total cash input
var cashInputTotal = parseFloat(document.getElementById('cash_input_total').textContent);
// Update the #main_cash and #stub_cash elements with the calculated cash input total
var mainCashElement = document.getElementById('main_cash');
var stubCashElement = document.getElementById('stub_cash');
mainCashElement.value = cashInputTotal.toFixed(2);
stubCashElement.value = cashInputTotal.toFixed(2);
// Get the total value of items (cheque amounts)
var totalItems = parseFloat(document.getElementById('items_total').textContent);
// Calculate the combined total of cash input and cheque amounts
var combinedTotal = cashInputTotal + totalItems;
// Update the .cash_total element with the combined total
var cashTotalElement = document.querySelector('.cash_total');
cashTotalElement.textContent = '£' + combinedTotal.toFixed(2); // Format the total with 2 decimal places and prepend £
}Elements will be updated with the calculated cash input total whenever any input values change, keeping all totals dynamically updated.
var stub20Element = document.getElementById('stub_20');
var main20Element = document.getElementById('main_20');
stub20Element.value = multiply20.toFixed(2);
main20Element.value = multiply20.toFixed(2);
var stub10Element = document.getElementById('stub_10');
var main10Element = document.getElementById('main_10');
stub10Element.value = multiply10.toFixed(2);
main10Element.value = multiply10.toFixed(2); // Down to £2 pound denominationConclusions
This has been a tricky part of the development process in this app and such is the nature of how the code in this app has grown, I have skimmed over a few issues I’ve encountered.
But we’ve now made significant progress with this app. We can count money denominations using many input fields and perform calculations on them. This is now set up for all brackets except the savings and investments notes. Plus. these calculations now transfer to the representations of the banking deposit slips (Main Slip and the slip Stubs).
Hopefully, we’ll be able to count up coin denominations and finish off a few more things in the 4th part of this series.