<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4" style="margin-top: 10%;"> <div class="panel panel-info"> <div class="panel-heading"> Calculator </div> <div class="panel-body"> <div class="form-group"> <label>Enter Your Calculation</label> <input type="text" id="set_all_number" class="form-control"> </div> <div class="row"> <div class="col-sm-9"> <div class="row"> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(1)" class="btn btn-block btn-info btn-sm">1</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(2)" class="btn btn-block btn-info btn-sm">2</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(3)" class="btn btn-block btn-info btn-sm">3</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(4)" class="btn btn-block btn-info btn-sm">4</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(5)" class="btn btn-block btn-info btn-sm">5</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(6)" class="btn btn-block btn-info btn-sm">6</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(7)" class="btn btn-block btn-info btn-sm">7</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(8)" class="btn btn-block btn-info btn-sm">8</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(9)" class="btn btn-block btn-info btn-sm">9</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number('.')" class="btn btn-block btn-info btn-sm">.</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="get_number(0)" class="btn btn-block btn-info btn-sm">0</a> </div> <div class="col-sm-4 ss"> <a href="javascript:;" onclick="all_number_calculate()"class="btn btn-block btn-info btn-sm">=</a> </div> </div> </div> <div class="col-sm-3"> <a href="javascript:;" onclick="get_number('+')" class="ss btn btn-block btn-info btn-sm">+</a> <a href="javascript:;" onclick="get_number('-')" class="ss btn btn-block btn-info btn-sm">-</a> <a href="javascript:;" onclick="get_number('*')" class="ss btn btn-block btn-info btn-sm">*</a> <a href="javascript:;" onclick="get_number('/')" class="ss btn btn-block btn-info btn-sm">/</a> </div> <div class="col-sm-12 ss"> <a href="javascript:;" onclick="clear_all()"class="btn btn-block btn-info btn-sm">Clear</a> </div> </div> </div> </div> </div> </div> </div>

.ss{ margin-bottom: 10px; } #set_all_number{text-align: right;font-weight: bold;font-size: 20px;} .ss a{font-size: 25px;font-weight: bold; color: #000;} .ss{font-size: 25px;font-weight: bold; color: #170000;} .my_res{ width: 100%; height: 200px; border:2px solid #000; margin-bottom: 10px; } .pop_up{ background-color: rgb(0 0 0 / 79%); height: 100%; width: 100%; z-index: 99991; background-size: 100%; position: fixed; z-index: 99999; top: 0px; display: none; } .box_box{ background: #fff; padding: 10px; margin-top: 15%; border: 5px solid #1d6f1b; } .box_box h1{ height: 50px; margin: 0px; }

//calcualor function get_number(a){ var old_val = document.getElementById('set_all_number').value; var new_val = old_val+a document.getElementById('set_all_number').value = new_val; } function all_number_calculate(){ var old_val = document.getElementById('set_all_number').value; var new_val = eval(old_val); document.getElementById('set_all_number').value = new_val; } function clear_all(){ document.getElementById('set_all_number').value = ""; }