Money Counter

It will count your money

by Selva Chezhian

HTML

<h3>Money Counter</h3>

<ul>
    <li>
        <label>&#8377;1000</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="1000">
    </li>
    <li>
        <label>&#8377;500</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="500">
    </li>
    <li>
        <label>&#8377;100</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="100">
    </li>
    <li>
        <label>&#8377;50</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="50">
    </li>
    <li>
        <label>&#8377;20</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="20">
    </li>
    <li>
        <label>&#8377;10</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="10">
    </li>
    <li>
        <label>&#8377;5</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="5">
    </li>
    <li>
        <label>&#8377;2</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="2">
    </li>
    <li>
        <label>&#8377;1</label>
        <span>x</span>
        <input type="number" class="numbers" data-val="1">
    </li>
</ul>
<div id="result"> <strong>Total Amount</strong>
 <span id="value">0</span>

</div>

CSS

ul li {
    list-style-type: none;
    line-height: 1.8;
}
label {
    width: 50px;
    float: left;
}
#value {
    color: #961ADE;
    font-weight: bold;
    font-size: 25px;
}

JavaScript

var elements = document.getElementsByClassName('numbers');
document.addEventListener("input", function (e) {
    total = calculateTotal();
    document.getElementById('value').innerHTML = total;
}, false);

function calculateTotal() {
    totalArr = [];
    l = elements.length;
    for (i = 0; i < l; i++) {
        totalArr.push(calculateEach(elements[i]));
    }
    return totalArr.reduce(function (pv, cv) {
        return pv + cv;
    }, 0);
}

function calculateEach(elem) {
    return elem.value * elem.dataset.val;
}