"Calculator"
Bootstrap 4.1.1 Snippet by mayurkarthik

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <body> <h1>Calculator</h1> <p class="js-calculation"></p> <div class="calculator"> <div class="button-grid"> <button class="one" title="One" onclick="updateCalculation('1');">1</button> <button class="two" title="Two" onclick="updateCalculation('2');">2</button> <button class="three" title="Three" onclick="updateCalculation('3');">3</button> <button class="four" title="Four" onclick="updateCalculation('4');">4</button> <button class="five" title="Five" onclick="updateCalculation('5');">5</button> <button class="six" title="Six" onclick="updateCalculation('6');">6</button> <button class="seven" title="Seven" onclick="updateCalculation('7');">7</button> <button class="eight" title="Eight" onclick="updateCalculation('8');">8</button> <button class="nine" title="Nine" onclick="updateCalculation('9');">9</button> <button class="zero" title="Zero" onclick="updateCalculation('0');">0</button> <button class="dot" title="Dot" onclick="updateCalculation('.');">.</button> <button class="equals" title="Equals" onclick=" calculation = eval(calculation); displayCalculation(); localStorage.setItem('calculation', calculation); ">=</button> <button class="clear" title="Clear" onclick=" calculation = ''; displayCalculation(); localStorage.setItem('calculation', calculation);">clear</button> </div> <div class="operators"> <button class="plus" title="Plus" onclick="updateCalculation(' + ');">+</button> <button class="minus" title="Minus" onclick="updateCalculation(' - ');">-</button> <button class="division" title="Division" onclick="updateCalculation(' / ');">/</button> <button class="multiplication" title="Multiplication" onclick="updateCalculation(' * ');">*</button> </div> </div> <script src="cal.js"></script> </body> </html>
body { font-family: 'Times New Roman', serif; background-color: rgb(51, 35, 50); } .button-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; width: fit-content; } button { background-color: transparent; color: white; border: 2px solid white; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .calculator { display: flex; gap: 15px; margin-left: 800px; } .numbers { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; } .operators { display: flex; flex-direction: column; gap: 10px; } button { background-color: transparent; color: white; border: 2px solid white; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .clear { grid-column: 1 / -1; width: calc(100% + 65px); margin-right: -65px; border-radius: 25px; padding: 0 20px; } h1 { color: white; margin-left: 825px; } .js-calculation { color: white; font-size: 3rem; font-weight: bold; margin-left: 20px; }
//Calculator Game let calculation = localStorage.getItem('calculation') || ''; displayCalculation(); function updateCalculation(value) { calculation += value; displayCalculation(); localStorage.setItem('calculation', calculation); } function displayCalculation() { document.querySelector('.js-calculation') .innerHTML = calculation; }

Related: See More

Paper Kit 2
Bootstrap Loan Calculator

Questions / Comments: