Calculator Tools Calculator Tools
Create

Calculator

Oct 7, 2023

About this app

Simple calculator app

Calculator 7 8 9 / 4 5 6 * 1 2 3 - 0 . C + =

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Calculator</title>
<meta name="description" content="Simple calculator app">
<meta name="keywords" content="calculator, math, arithmetic">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
$(document).ready(function () {
var display = $("#display");
var buttons = $(".btn");
var result = 0;
var currentOperator = null;
var clearDisplay = false;

buttons.on("click", function () {
var value = $(this).data("value");

if (value === "C") {
display.text("");
result = 0;
currentOperator = null;
clearDisplay = false;
} else if (value === "=") {
calculate();
clearDisplay = true;
} else {
if (clearDisplay) {
display.text("");
clearDisplay = false;
}
display.text(display.text() + value);
}
});

function calculate() {
var expression = display.text();
try {
result = eval(expression);
display.text(result);
} catch (error) {
display.text("Error");
}
}
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
#display {
height: 60px;
font-size: 30px;
text-align: right;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ddd;
}

.btn {
font-size: 20px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="display"></div>
<div>
<button class="btn btn-secondary" data-value="7">7</button>
<button class="btn btn-secondary" data-value="8">8</button>
<button class="btn btn-secondary" data-value="9">9</button>
<button class="btn btn-secondary" data-value="/">/</button>
</div>
<div>
<button class="btn btn-secondary" data-value="4">4</button>
<button class="btn btn-secondary" data-value="5">5</button>
<button class="btn btn-secondary" data-value="6">6</button>
<button class="btn btn-secondary" data-value="*">*</button>
</div>
<div>
<button class="btn btn-secondary" data-value="1">1</button>
<button class="btn btn-secondary" data-value="2">2</button>
<button class="btn btn-secondary" data-value="3">3</button>
<button class="btn btn-secondary" data-value="-">-</button>
</div>
<div>
<button class="btn btn-secondary" data-value="0">0</button>
<button class="btn btn-secondary" data-value=".">.</button>
<button class="btn btn-secondary" data-value="C">C</button>
<button class="btn btn-secondary" data-value="+">+</button>
</div>
<div>
<button class="btn btn-primary" data-value="=">=</button>
</div>
</div>
</body>
</html>