Jonnie Grieve Digital Media: Blog

Blog: Creating a Cash Counter #4 (More Posts)

Before we start, let’s summarise what we’ve achieved so far.

We’ve got a <div> element in the website header; an element with the class of .cash_total .cash_total that calculates the whole sum of all the Cash and Cheque inputs. This number updates in real-time.

In the .calculations_container element, we have 3 other elements that represent electronic versions of the UK Banking slip. They take the calculations in the Cash and Cheque Inputs which you can then use to write your banking slips.

Let’s discuss how I wrapped up the script.

We have a few more things to finish before we functionally complete the application.

On most banking slips, there’s a separate tally that shows us the sum of your coin deposits (this is particularly useful for coins of 50p coins and lower).  It’s a way of organising the data and is not an addition to the total cash amount. We’re going to do 2 things in this blog; Do the banking totals and sort out the Coin totals.

Starting with the Banking totals totals. Before, when we’ve been filling in the main and slip stub sections, we’ve had 2 table cells to update. And we’re doing the same thing below. These are the elements we’ll be using at this point.

.cash_total
#slipstub_total
#mainslip_total

Each table cell has its own ID element so they can be easily selected in the script.

// #slipstub_total
var slipStubTotalElement = document.getElementById("slipstub_total");
// #mainslip_total
var mainSlipTotalElement = document.getElementById("mainslip_total");

This has partially worked. We are getting a visual update in real-time in both the cells that it should but we’re only getting the cash total.  So when we’re using dot notation to format the number with .toFixed, we can’t use the .cashTotal variable. We need cheques to to be taken into account too and to do that, we need to use a different variable

We can try using the combinedTotal. variable, the stored value of cash and cheque inputs.

var combinedTotal = cashInputTotal + totalItems;
mainSlipTotalElement.textContent = combinedTotal.toFixed(2);

// #slipstub_total
var slipStubTotalElement = document.getElementById("slipstub_total");
slipStubTotalElement.textContent = combinedTotal.toFixed(2);
// #mainslip_total
var mainSlipTotalElement = document.getElementById("mainslip_total");
mainSlipTotalElement.textContent = combinedTotal.toFixed(2);

Other Coins

In UK Banking on the reverse of each slip, coin values of 50p and lower are tallied in their own table. I’ve put these coins in their own table below. These will also be totalised.

Coins
50p  0.00
20p  0.00
10p  0.00
5p   0.00
2p   0.00
1p   0.00
Total: £0.00

So we want to get these values from the user inputs in the input brackets table. The best way to do this is probably to tally up the .coins_calculation elements as a whole.

We’ll go through this with 50p coins. Get the calculated value and format it to 2 decimal places. So what we’re going to do is declare a variable that uses the calculated amount of 50p coins as inputted by the user.

/* User selects the input element #input_050 which
* multiplies the value of the disabled #calc_50 
* element */
var multiply050 = parseFloat(calc050.value);

Use this to change the values dynamically so we can see them change as users make their counts.

// Dynamic coin container calculations
var coin50Element = document.getElementById('coin_bracket_50');
coin50Element.value = multiply050.toFixed(2);

// Do the same for the rest of the coins

As a result, the individual rows are filled in with the correct values depending on the counts. We now have to work out how to get the cash total for these coins.

<tr>
    <td><strong>Total: </strong></td>
    <td id="coin_total">£0.00</td>
</tr>

We still need to add an ID attribute to the table cell for the coin totals.  Add it to the last table cell in the last row. This means we now have a selection point to add our total amount of coins counted.

Hooking up the grand total of coin brackets.

First, use a variable to track the numbers and set it to zero.

var totalCoins = 0;

To help keep track of what numbers we’ll be adding values to, I gave each of the elements a class of  .coin_container. And once we find them we can add their current value with each iteration

// Get the total value of coins (.coin_container)
var totalCoins = 0;

var coinInputs = document.querySelectorAll('.coins_container');

coinInputs.forEach(function(input) {
    // Parse input value as float and add to total
    totalCoins += parseFloat(input.value) || 0;

});

When we’ve finished iterating through them, we can use the calculated total and transfer that sum total to the OTHER COINS in the main slip and slip stub tables. The elements we need to change are “main_coins” and “stub_coins”

// Update #coins_total with the calculated total
var coinsTotalElement = document.getElementById('coins_total');
coinsTotalElement.textContent = '£' + totalCoins.toFixed(2);

Now that we’ve got the total of just the other coins… we ready to mirror those dynamic values into the appropriate table cells; so #main_coins, #stub_coins and #coins_total will always match.

// Select the other coin table cells and update the value
var mainOtherCoinsElement = document.getElementById("main_coins");
var stubOtherCoinsElement = document.getElementById("stub_coins");
mainOtherCoinsElement.value = totalCoins.toFixed(2);
stubOtherCoinsElement.value = totalCoins.toFixed(2);

Finally, we can get to work on the dynamic grand total of cash and the cheques. #cash_total, #mainslip_total and #slipstub_total.

// display the #cash_total value into the elements #mainslip_total and #slip stub total.
var mainSlipGrandTotal = document.getElementById("mainslip_total");
mainSlipGrandTotal.textContent = cashTotal.toFixed(2);

var slipStubGrandTotal = document.getElementById("slipstub_total");
slipStubGrandTotal.textContent = cashTotal.toFixed(2);

Again we can find the right number by Swap out cashTotal with combinedTotal as the text contents.

mainSlipGrandTotal.textContent = combinedTotal.toFixed(2);
slipStubGrandTotal.textContent = combinedTotal.toFixed(2);

Conclusion

The application is now functionally complete.  I’ve opted to leave out the Savings and Investment notes for now. I’ll add this at a later date. Instead, I’ll next focus on styling the application, focusing on UX improvements and making the script behind the scenes easier to read and maintain.