Untitled

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <style>
        .btn{
            padding:4px 24px;
        }
        #result{
            width:245px;
            margin-left:15px;
            margin-top:15px;
            margin-bottom:10px;
        }
    </style>
</head>
    <body>
        <div class="container">
            <div class="row">
                <input type="text" class="form-control" value="" id="result" data-operation="" data-total="0" data-current="">
                <p>&nbsp;</p>
            </div>
            <div class="row">
                <div class="form-group col-lg-12">
                    <input type="button" class="btn btn-default" value="7">
                    <input type="button" class="btn btn-default" value="8">
                    <input type="button" class="btn btn-default" value="9">
                    <input type="button" class="btn btn-primary" value="/">
                </div>
                <div class="form-group col-lg-12">
                    <input type="button" class="btn btn-default" value="4">
                    <input type="button" class="btn btn-default" value="5">
                    <input type="button" class="btn btn-default" value="6">
                    <input type="button" class="btn btn-primary" value="x">
                </div>
                <div class="form-group col-lg-12">
                    <input type="button" class="btn btn-default" value="1">
                    <input type="button" class="btn btn-default" value="2">
                    <input type="button" class="btn btn-default" value="3">
                    <input type="button" class="btn btn-primary" value="-">
                </div>
                <div class="form-group col-lg-12">
                    <input type="button" class="btn btn-default" value="0">
                    <input type="button" class="btn btn-primary" value=".">
                    <input type="button" class="btn btn-danger" value="=">
                    <input type="button" class="btn btn-primary" value="+">
                </div>
            </div>
        </div>
        <script>
            let _btns = document.getElementsByClassName('btn-default');
            for(item of _btns){
                item.addEventListener('click', (e) => {
                    console.log(e.target.value);
                    let input = document.getElementsByClassName('form-control')[0];
                    if(isNaN(input.value)){
                       input.dataset.current += e.target.value;
                    }
                    input.value += e.target.value;
                });
            }

            let _ops = document.getElementsByClassName('btn-primary');
            for(item of _ops){
                item.addEventListener('click', (e) => {
                    let input = document.getElementsByClassName('form-control')[0];
                    if(input.dataset.operation != ''){
                        switch(input.dataset.operation){
                            case '+': input.value = parseInt(input.dataset.total) + parseInt(input.dataset.current); break;
                            case '-': input.value = parseInt(input.dataset.total) - parseInt(input.dataset.current); break;
                            case '/': input.value = parseInt(input.dataset.total) / parseInt(input.dataset.current); break;
                            case 'x': input.value = parseInt(input.dataset.total) * parseInt(input.dataset.current); break;
                            default: break;
                        }
                        input.dataset.current = "";
                        input.dataset.operation = e.target.value;
                        input.dataset.total = input.value;
                    }
                    else {
                        input.dataset.total = input.value;
                    }
                    input.value = input.value + e.target.value;
                    input.dataset.operation = e.target.value;

                    // if(!isNaN(input.value)){
                    //     input.value += e.target.value;
                    // }


                });
            }
        </script>
    </body>
</html>