<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 ----------> <br> <div class="container"> <div class="card calculator bg-light mb-3" style="width: 20rem;"> <div class="card-header"> <h3><b><i>Calculator</i></b></h3> <p id="info">  v 1.1</p> </div> <div class="card-header resp bg-dark"> <h4 id="operations">0</h4> <div class="float-right" id="answer">0</div> </div> <div class="card-body"> <div class="row"> <div class="col-3"> <button type="button" onclick="test()" class="btn btn-dark">AC</button> </div> <div class="col-3"> <button type="button" onclick='add("(")' class="btn btn-dark">(</button> </div> <div class="col-3"> <button type="button" onclick='add(")")' class="btn btn-dark">)</button> </div> <div class="col-3"> <button type="button" onclick='add("/")' class="btn btn-dark">/</button> </div> </div> <div class="row"> <div class="col-3"> <button type="button" onclick="add(7)" class="btn btn-dark">7</button> </div> <div class="col-3"> <button type="button" onclick="add(8)" class="btn btn-dark">8</button> </div> <div class="col-3"> <button type="button" onclick="add(9)" class="btn btn-dark">9</button> </div> <div class="col-3"> <button type="button" onclick='add("x")' class="btn btn-dark">X</button> </div> </div> <div class="row"> <div class="col-3"> <button type="button" onclick="add(4)" class="btn btn-dark">4</button> </div> <div class="col-3"> <button type="button" onclick="add(5)" class="btn btn-dark">5</button> </div> <div class="col-3"> <button type="button" onclick="add(6)" class="btn btn-dark">6</button> </div> <div class="col-3"> <button type="button" onclick='add("-")' class="btn btn-dark">-</button> </div> </div> <div class="row"> <div class="col-3"> <button type="button" onclick="add(1)" class="btn btn-dark">1</button> </div> <div class="col-3"> <button type="button" onclick="add(2)" class="btn btn-dark">2</button> </div> <div class="col-3"> <button type="button" onclick="add(3)" class="btn btn-dark">3</button> </div> <div class="col-3"> <button type="button" onclick='add("+")' class="btn btn-dark">+</button> </div> </div> <div class="row"> <div class="col-6"> <button type="button" onclick="add(0)" class="btn btn-dark" style="width: 130px">0</button> </div> <div class="col-3"> <button type="button" onclick='add(".")' class="btn btn-dark">.</button> </div> <div class="col-3"> <button type="button" onclick="solve()" class="btn btn-dark">=</button> </div> </div> </div> </div> </div>

.calculator { border-color: black; border-width: 2px; -webkit-box-shadow: 11px 10px 14px -1px rgba(0,0,0,0.75); -moz-box-shadow: 11px 10px 14px -1px rgba(0,0,0,0.75); box-shadow: 11px 10px 14px -1px rgba(0,0,0,0.75); } .calculator .row { padding-bottom: 13px; padding-right: 15px; } .calculator button { width: 58px; height: 54px; font-size: 1.2rem; } #answer { cursor: pointer; } .resp { color: white; }

var operations = ""; function strip(str) { return str.replace(/^\s+|\s+$/g, ''); } function add(c) { operations += c; show(); } function test() { operations = ""; show(); $("#answer").text("0"); } function solve() { try { $("#answer").text(eval(operations.replace(/x/g, "*"))); } catch (err) { $("#answer").text("Syntax Error") } operations = ""; } function show() { var display = ""; if (operations.length > 18) { display = "..." + operations.slice(operations.length - 18, operations.length); } else if (operations === "") { display = "0"; } else { display = operations; } $("#operations").text(display); } $(document).ready(function() { $("#answer").click( function() { var $temp = $("<input>"); $("body").append($temp); $temp.val(strip($("#answer").text())).select(); document.execCommand("copy"); $temp.remove(); $("#info").text("Copied"); //add temp function }); });