dokunbam
8 months ago

Currency Denomination counter in pure JavaScript

Posted 8 months ago by dokunbam

I am try to create a currency Denomination counter in JavaScript. I have written some code but I feel there are more effective ways to do it. Something like using array and loop, but I don't quite get it how to use array and loop for this problem. Also I want to take it further by selecting different currencies.

So the program gets input and determine the number of denominations. From 1000 to 5. let say I input 10850. it should output 1000=10, 500=1, 200=1, 100=1 etc

here is my JavaScript code Which I think it getting longer

//use strict
document.getElementById("buttonConvert").addEventListener("click", convert);

function convert() {
    const display = document.getElementById("covertInput").value;
    const currencyType = document.getElementById("currencyType").value;

    if (display === "" || currencyType === "") {
        document.getElementById("warning").innerHTML = "The forms should not be empty";
        return false;

    } else if (isNaN(display)) {
        document.getElementById("warning").innerHTML = "Please type in a number";
        return false;
    } else {
        convertCurrency(display);
    }

    display

    function convertCurrency(display) {
        //get 1000 
        if (display > 1000) {
            var oneThousand = display / 1000;
            var processedOneThousand = Math.floor(oneThousand);
            console.log("1000 has " + processedOneThousand + " Demonination");

            //get 500 remainder
            var oneThousandRemainder = display - (processedOneThousand * 1000);
            console.log("So after 1000, " + oneThousandRemainder + " is remaining");

            //calculate 500
            if (oneThousandRemainder > 500) {
                var fiveHundred = oneThousandRemainder / 500;
                var processedFiveHundred = Math.floor(fiveHundred);
                console.log("500 has " + processedFiveHundred + " Denomination");

                //get 500 remainder
                var fiveHundredRemainder = oneThousandRemainder - (processedFiveHundred * 500);
                console.log("So after 500, " + fiveHundredRemainder + " is remaining");

                if (fiveHundredRemainder > 200) {
                    var twoHundred = fiveHundredRemainder / 200;
                    var processedTwoHundred = Math.floor(twoHundred);
                    console.log("200 has " + processedTwoHundred + " Denomination");

                    //get 200 remainder
                    var twoHundredRemainder = fiveHundredRemainder - (processedTwoHundred * 200);
                    console.log("So after 200, " + twoHundredRemainder + " is remaining");
                }
                if (twoHundredRemainder > 100) {
                    var oneHundred = twoHundredRemainder / 100;
                    var processedOneHundred = Math.floor(oneHundred);
                    console.log("100 has " + processedOneHundred + " Denomination");

                    //get 200 remainder
                    var oneHundredRemainder = twoHundredRemainder - (processedOneHundred * 100);
                    console.log("So after 200, " + oneHundredRemainder + " is remaining");


                }
            }

        }
    }
}

This is my HTML

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" media="screen " href="Public/css/style.css">
    <link rel="stylesheet" type="text/css" media="screen" href="Public/css/yeti.css">
    <link rel="stylesheet" type="text/css" media="screen " href="Public/css/calculator.css">
    <link rel="stylesheet" type="text/css" media="screen" href="Public/css/fontawesome.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="Public/css/all.min.css">
    <title>Automated Currency Demonination Counter</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success py-0 mb-2">
        <div class="container">
            <a class="navbar-brand" href="index.html">Currency Demonination Counter</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>

            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html"><span class="sr-only">(current)</span></a>
                    </li>
                </ul>
                <div class="nav navbar-nav navbar-right" id="navbarColor01">
                </div>
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-md-4">
        </div>


        <div class="col-md-4">
            <nav class="py-1 muted-text bg-light">
                <a class="navbar-brand p-3">Currency Demonination Counter</a>
                <h6 class="text-danger" id="warning"></h6>
            </nav>
            <form name="calForm" class="bg-light">
                <div class="form-group">
                    <input type="text" aria-label="Page Title" name="display" placeholder="Enter Amount" id="covertInput" class="form-control" required="true">
                </div>

                <div class="row" id="buttonRow">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>Please Select Currency Type</label>
                            <select class="custom-select" id="currencyType" required="true">
                                                          <option selected></option>
                                                          <option value="Naira">Naira</option>
                                                          <option value="Dollars">Dollars</option>
                                                        </select>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <input type="button" id="buttonConvert" name="buttonConvert" class="btn btn-danger numBtn" value="Convert">
                    </div>
                </div>
            </form>


            <table class="table table-striped">
                <ul class="list-group">
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">1000 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">2</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">500 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">200 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">100 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">50 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">20 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">10 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                    <li class="list-group-item">
                        <h4 class="font-weight-bold">5 Naira Denomination has</h4>
                        <h5 class="text-success muted-text font-weight-bold">1</h5><span>Count(s)</span></li>
                </ul>
            </table>
        </div>

        <div class="col-md-4">
        </div>
    </div>



    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="Public/js/currency.js "></script>
    <script src="Public/js/jquery-3-31.js "></script>
    <script src="Public/js/bootstrap.js "></script>

</body>

</html>

I will really appreciate Thanks

Please sign in or create an account to participate in this conversation.