<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-md-4"></div> <div class="col-md-4" style="margin-top: 150px;"> <div class="row"> <div class="panel panel-info"> <div class="panel-heading text-center"> Js Calculator </div> <div class="panel-body "> <div class="col-sm-12"> <input type="text" class="form-control" id="input_text"> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('9')">9</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('8')">8</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('7')">7</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('+')">+</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('6')">6</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('5')">5</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('4')">4</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('-')">-</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('3')">3</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('2')">2</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('1')">1</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('*')">*</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('.')">.</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('0')"> 0</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="sum_value()">=</a> </div> <div class="col-sm-3"> <a href="javascript:;" id="btn_click" class="btn btn-block btn-danger" onclick="btn_value('/')">/</a> </div> <div class="col-sm-12"> <a href="javscript:;" class="btn btn-block btn-danger" id="btn_click" onclick="cler_main()">C</a> </div> </div> </div> </div> </div> </div> </div>

#btn_click{ margin-top: 10px; font-weight: bold; font-size: 20px; } #input_text{ text-align: right; font-size: 20px; font-weight: bold; }

function btn_value(main){ var d_value = document.getElementById('input_text').value; var a_value = d_value+main; document.getElementById('input_text').value = a_value; } function sum_value(){ var sum = document.getElementById('input_text').value; var main_sum =eval(sum); document.getElementById('input_text').value = main_sum; } function cler_main(){ document.getElementById('input_text').value = ""; }