Create a Money Counter using HTML, CSS and JavaScript

Demonstration of the money counter on my YouTube channel.

We will first designate our div as belonging class “bills.”

Then, within that div is our fieldset tag, as well as our legend tag entitled “Total Amount.”

And finally, within all of that is our table element.

<div class="bills">
<fieldset>
  <legend>Total Amount</legend>
<table></table>
    
  </fieldset>
</div>

For each bill type, the 1’s, 5’s, 10’s, 20’s, 50’s, 100, and Total button, these will each have a <td> element, or Table Data element, which will show up as a cell containing the dollar amount.

So, we have 7 table data elements.

6 for each bill types, and 1 for the total button.

And just to keep things neat and tidy, let’s put the 7 table data elements into 4 rows. How? We use the <tr> element.

Notice how each row of bills has 2 columns, whereas the total button has 1 column.

… and let’s add comments so we don’t lose track of what each <td> element represents.

<div class="bills">
<fieldset>
  <legend>Total Amount</legend>
<table>
<tr>
  <!--one dollar bills-->
    <td>
    </td>
<!--five dollar bills-->
    <td>
    </td>
  </tr>
<tr>
  <!--ten dollar bills-->
    <td>
    </td>
<!--twenty dollar bills-->
    <td>
    </td>
  </tr>
<tr>
  <!--fifty dollar bills-->
    <td>
    </td>
<!--hundred dollar bills-->
    <td>
    </td>
</tr>
<tr>
    <td>
    <div>
      <button onclick="findTotal()">Total</button>
<input type="text" name="total" id="total"/>
    </div>
    </td>
  </tr>
  
    </table>
    
  </fieldset>
</div>

Alright, so now things are about to get interesting!

Each <td> element is a container, with an image and a form. The type of form will be the “range” type. Basically, when you slide it, the range increases from left to right. From zero to one hundred. For all of them. The only difference is with the one dollar bill, the range slides from one to one hundred in increments of 1.

<tr>
  <!--one dollar bills-->
    <td>
    <img src="images/ones.png" alt="One Dollar Bill" style="width:180px;height:90px;">
    <form oninput="qty.value=parseInt(a.value)*parseInt(b.value)">0
    <input type="range" id="a" value="0">100
    <input type="hidden" id="b" value="1">
    =<output name="qty" for="a b"></output>
    </form>
    <input type="hidden" onblur="findTotal()" name="qty" id="qty1"/><br>
    </td>
<!--five dollar bills-->
    <td>
    <img src="images/fives.png" alt="Five Dollar Bill" style="width:180px;height:90px;">
    <form oninput="qty.value=parseInt(c.value)*parseInt(d.value)">0
    <input type="range" id="c" value="0">100
    <input type="hidden" id="d" value="5">
    =<output name="qty" for="c d"></output>
    </form>
    <input type="hidden" onblur="findTotal()" name="qty" id="qty2"/><br>
    </td>
  </tr>

For the five dollar bill, the range also slides from to one hundred, but in increments of 5.

And for the ten dollar bill, it’s increments of 10, and for twenty it’s in increments of 20, etc…(you get the idea).

So, in the form is an event called oninput, which means when I enter a value into this form, it will multiply 2 values: value “a” and value “b”.

Value “a” is the range slide button. By default, it starts on zero and the maximum value is one hundred.

Value “b” is hidden from human eyes, but the multiplication final product is visible. The “hidden” value is where we specify the value based on dollar-type denomination.

And really, all of these <td> elements are identical… all you need to do is replace values “a” and “b” with other characters so as to avoid confusion over duplicates.

Now, each dollar type has an event called onblur, which will invoke findTotal(). They all have the same name of “qty”, but unique ids, such as “qty1”, “qty2”, “qty3”, “qty4”, “qty5”, and “qty6”.

At the bottom of each form is another hidden input type, which invokes a function called findTotal(). This is where the JavaScript comes in:

// The total of all bill types
function myFunction() {
  document.getElementById("findTotal()").value = "total";
}
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

The sum of these quantities is displayed when we click on the “Total” button. Where is it displayed? Well, right next to it, in the text field, which is named “total”, and has an id called “total”.

The function findTotal() essentially treats each qty as an element in an array.

Keep in mind each qty is a total amount.

Remember?

-Total amount of one-dollar bills is a quantity.

-Total amount of five-dollar bills is a quantity

-Total amount of ten-dollar bills is a quantity.

…. and so on and so forth…

Think of these bill types as “subtotals.”

Using a for loop, each quantity is indexed from smallest to largest. The smallest is indexed at zero.

And each index has its unique total value, added to other total values. The sum gives us a new value.

So a total of all totals, that’s what this new value is. It’s stored in a variable called “tot”, also means total, but spelled in this unique way, so it helps avoid further confusion with other names and ids called “total”.

The text field, next to the button, calls the document.getElementById to provide the means to yield the grand total!

In the CSS file, we refer to the img element, which references pictures of the dollar bills, and adjust the size dimensions.

Also, we tag the html elements of body, bills, center, button, and specify the font, colors, positioning, size, etc.

Hopefully you found this useful and fun. For the source code, you may find it here at my github repo.