"simple responsive calculator "
Bootstrap 4.1.1 Snippet by Electro1212

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"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Akasher Calculator</title> <link rel="stylesheet" href="./Calculator.css"> </head> <body> <section> <div class="container"> <div id="display"></div> <div class="buttons"> <div class="button">C</div> <div class="button">/</div> <div class="button">*</div> <div class="button">←</div> <div class="button">7</div> <div class="button">8</div> <div class="button">9</div> <div class="button">-</div> <div class="button">4</div> <div class="button">5</div> <div class="button">6</div> <div class="button">+</div> <div class="button">1</div> <div class="button">2</div> <div class="button">3</div> <div class="button">.</div> <div class="button">(</div> <div class="button">0</div> <div class="button">)</div> <div id="equal" class="button">=</div> </div> </div> </section> <script src="./calculator.js"></script> </body> </html>
.container{ max-width: 400px; margin: 10vh auto 0 auto; box-shadow: 0px 0px 43px 17px rgba(153, 153,153, 1); } #display{ text-align: right; height: 70px; line-height: 70px; padding: 16px 8px; font-size: 25px; } .buttons{ display: grid; border-bottom: 1px solid #999; border-left: 1px solid #999; grid-template-columns: 1fr 1fr 1fr 1fr; } .button > div{ border-top: 1px solid #999; border-right:1px solid #999; } .button{ border: 0.5px solid #999; line-height: 100px; text-align: center; font-size: 25px; cursor: pointer; } #equal{ background-color: #5555ff; color: #fff; } .button:hover{ background-color:rgb(226, 156, 25); color: #fff; transition: 0.5s ease-in-out; }
let display = document.getElementById('display'); let buttons = Array.from(document.getElementsByClassName('buttons')); buttons.map( buttons =>{ buttons.addEventListener('click', (e) => { switch(e.target.innerText){ case 'C': display.innerText= ''; break; case '←': if(display.innerText){ display.innerText= display.innerText.slice(0, -1); } break; case '=': try{ display.innerText = eval(display.innerText); }catch { display.innerText = 'Buir asbe bokachoda'; } break; default: display.innerText += e.target.innerText; } }); });

Related: See More

Paper Kit
Simple Vertical timeline
Simple white navbar
BS4 clean & simple invoice template

Questions / Comments: