Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
atharva Vispute 3 
Can share the code?
Thanks!!
ok.
Below is the code.
calculator.js_____________
import { LightningElement } from 'lwc';
export default class Calculator extends LightningElement {
var input_box = document.getElementById("calculation");
var historyData = [];
var expressionData = "";
var resultData = "";
input_box.onkeydown = function () {
console.log(input_box.value);
};
function UserClickButton(input) {
var oldinput = input_box.value;
var newinput = oldinput + input;
expressionData = newinput;
input_box.value = newinput;
}
function CalculateValue() {
console.log("Click");
var input = input_box.value;
input = input.replace('"', "").replace("'", "");
var result = eval(input);
resultData = result;
historyData.push({ expression: expressionData, result: resultData });
showLogdata();
resultData = "";
expressionData = "";
input_box.value = result;
}
function ClearData() {
input_box.value = "";
}
function showLogdata() {
var log = document.getElementById("history_log");
var string = "";
for (var key in historyData) {
string +=
"" +
historyData[key]["expression"] +
" = " +
historyData[key]["result"] +
"<br>";
}
log.innerHTML = string;
}
}
claculator.html____________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<style>
.nopadding{
padding: 0px;
}
.btn_font{
font-size: 30px;
}
</style>
</head>
<body style="background: #FFA726;">
<h1 class="text-center">HTML JavaScript Calculator</h1>
<div class="container" style="padding: 30px;border: 1px solid grey;margin-top: 50px;background: whitesmoke; box-shadow: 5px 5px #525252; border-radius: 10px;">
<div class="row">
<div class="col-lg-12 nopadding">
<input type="text" name="calculation" id="calculation" class="form-control" style="padding: 10px;font-size: 30px;height: 50px;">
</div>
</div>
<div class="row">
<div class="col-xs-3 nopadding">
<button id="one" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('1')">1</button>
</div>
<div class="col-xs-3 nopadding">
<button id="two" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('2')">2</button>
</div>
<div class="col-xs-3 nopadding">
<button id="three" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('3')">3</button>
</div>
<div class="col-xs-3 nopadding">
<button id="add" class="btn btn-success btn-block btn_font" onclick='UserClickButton("+")'>+</button>
</div>
</div>
<div class="row">
<div class="col-xs-3 nopadding">
<button id="four" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("4")'>4</button>
</div>
<div class="col-xs-3 nopadding">
<button id="five" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("5")'>5</button>
</div>
<div class="col-xs-3 nopadding">
<button id="six" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("6")'>6</button>
</div>
<div class="col-xs-3 nopadding">
<button id="minus" class="btn btn-success btn-block btn_font" onclick='UserClickButton("-")'>-</button>
</div>
</div>
<div class="row">
<div class="col-xs-3 nopadding">
<button id="seven" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("7")'>7</button>
</div>
<div class="col-xs-3 nopadding">
<button id="eight" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("8")'>8</button>
</div>
<div class="col-xs-3 nopadding">
<button id="nine" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("9")'>9</button>
</div>
<div class="col-xs-3 nopadding">
<button id="multiply" class="btn btn-success btn-block btn_font" onclick='UserClickButton("*")'>*</button>
</div>
</div>
<div class="row">
<div class="col-xs-3 nopadding">
<button id="dot" class="btn btn-primary btn-block btn_font" onclick='UserClickButton(".")'>.</button>
</div>
<div class="col-xs-3 nopadding">
<button id="zero" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("0")'>0</button>
</div>
<div class="col-xs-3 nopadding">
<button id="equal" class="btn btn-primary btn-block btn_font" onclick='CalculateValue()'>=</button>
</div>
<div class="col-xs-3 nopadding">
<button id="divide" class="btn btn-success btn-block btn_font" onclick='UserClickButton("/")'>/</button>
</div>
</div>
<div class="row">
<div class="col-lg-12 nopadding">
<button class="btn btn-danger btn-block" onclick="ClearData()">CLEAR</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>History Log</h2>
</div>
<div class="col-lg-12" id="history_log">
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
Thanks!!