<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="center"> <form name="forms"> <input type="text" id="display" name="display"> <div class="buttons"> <input type="button" id="seven" value="7"> <input type="button" id="eight" value="8"> <input type="button" id="nine" value="9"> <input type="button" id="divide" value="/"><br> <input type="button" id="four" value="4"> <input type="button" id="five" value="5"> <input type="button" id="six" value="6"> <input type="button" id="multi" value="*"><br> <input type="button" id="one" value="1"> <input type="button" id="two" value="2"> <input type="button" id="three" value="3"> <input type="button" id="subs" value="-"><br> <input type="button" id="dot" value="."> <input type="button" id="zero" value="0"> <input type="button" id="add" value="+"> <input type="button" id="clear" value="C"><br> <input type="button" id="equal" value="="> </div> </form> </div>

*{ margin: 0; padding: 0; outline: none; box-sizing: border-box; } body{ font-family: montserrat; display: flex; text-align: center; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(#9cebfc,#6ae1fb); } .center{ /* display: none; */ width: 350px; background: black; border-radius: 20px; } input[type="text"]{ height: 60px; width: 300px; margin-top: 40px; border-radius: 1px; border: 1px solid #e1e7ea; color: black; font-size: 22px; font-weight: bold; text-align: right; padding-right: 20px; background: linear-gradient(#d1dce0,#dfe6e9); } form .buttons{ width: 300px; margin: 10px 25px 0 25px; padding: 10px 0; } input[type="button"]{ width: 58px; height: 55px; margin: 5px; font-size: 22px; line-height: 55px; border-radius: 3px; border: 1px solid #d9d9d9; background: linear-gradient(#d9d9d9, #bfbfbf); } input[type="button"]:hover{ transition: .5s; background: linear-gradient(#bfbfbf, #d9d9d9); } input#clear{ background: #ff1a1a; border: 1px solid #cc0000; color: white; } input#equal{ width: 275px; margin: 10px 0 10px 0; font-size: 30px; color: white; background: #ff3d00; border: 1px solid #b32a00; }

$(document).ready(function(){ $('#one').click(function(){ document.forms.display.value += 1; }); $('#two').click(function(){ document.forms.display.value += 2; }); $('#three').click(function(){ document.forms.display.value += 3; }); $('#four').click(function(){ document.forms.display.value += 4; }); $('#five').click(function(){ document.forms.display.value += 5; }); $('#six').click(function(){ document.forms.display.value += 6; }); $('#seven').click(function(){ document.forms.display.value += 7; }); $('#eight').click(function(){ document.forms.display.value += 8; }); $('#nine').click(function(){ document.forms.display.value += 9; }); $('#zero').click(function(){ document.forms.display.value += 0; }); $('#add').click(function(){ document.forms.display.value += '+'; }); $('#subs').click(function(){ document.forms.display.value += '-'; }); $('#multi').click(function(){ document.forms.display.value += '*'; }); $('#divide').click(function(){ document.forms.display.value += '/'; }); $('#dot').click(function(){ document.forms.display.value += '.'; }); $('#equal').click(function(){ if (display.value == "") { alert("Please enter any numbers to calculate!"); }else{ document.forms.display.value = eval(document.forms.display.value); } }); $('#clear').click(function(){ document.forms.display.value = ""; }); })