I want the code to display history in the text box after the calc funciton has run, the issue here is i want to be able to browse through history while clicking history button and also calculate at any point after clicking a sign to calculate from history or select the history.
I will add a history add and history hide button which will be shown after a initial calculation is done.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator </title>
<style>
/* body {} */
.container {
box-shadow: 1px 1px 7px 1px rgb(133, 135, 136);
position: relative;
align-content: center;
border: 4px #58585853;
padding: 14px;
margin-top: 10% !important;
margin: auto;
border-radius: 3.78%;
/* border: rgba(177, 177, 177, 0.77), 2px; */
background-color: rgb(237, 244, 251);
height: fit-content;
width: fit-content;
text-align: center
}
.screen {
font-size: 20px;
background-color: rgb(92, 169, 92);
text-align: right;
text-overflow: inherit;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.999);
height: auto;
max-height: auto;
width: 80%;
}
.clear {
margin-left: 3px;
background-color: rgb(255, 255, 255);
height: 40px;
color: red;
font-size: 20px;
font-weight: bold;
max-height: fit-content;
position: inherit;
margin: 2%;
border-radius: 15%;
padding: 2%;
}
.history {
height: 40px;
color: rgb(255, 255, 255);
font-size: 20px;
border-radius: 10%;
background-color: rgb(69, 68, 68);
font-weight: bold;
}
.deletehistory {
height: 40px;
color: red;
font-size: 15px;
font-weight: bold;
}
.historyd {
width: 200px;
margin: auto;
text-align: left;
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow-y: auto;
margin-top: 10px;
}
.history-item {
border-bottom: 1px solid #eee;
padding: 5px;
}
.disp {
padding: 10px;
width: 100%;
display: inline-block !important;
}
td .numbers {
box-shadow: 1px 1px 3px 1px rgb(93, 94, 94);
width: 80px;
height: 8vh;
background-color: rgba(222, 210, 218, 0.395);
border-radius: 15.45%;
box-shadow: 1px;
font-size: 20px;
}
td .sign {
box-shadow: 1px 1px 3px 1px rgb(101, 101, 101);
width: 80px;
height: 8vh;
font-size: 20px;
font-weight: bold;
background-color: rgba(17, 9, 14, 0.395);
border-radius: 15.45%;
box-shadow: 1px;
}
</style>
</head>
<body id="checkkey" onkeydown="checkeyfn(event)">
<div style="text-align:center; position: relative;">
<div class="container">
<form>
<div style="display: inline-block;">
<div class="disp">
<input class="screen" id="display" type="" value=""></input>
<input type="button" class="clear" value="Clear" onclick="clear1()">
</div>
<div>
<table>
<tr>
<td><input type="button" class="history" value="History" onclick="showHistory()"></td>
<td><input type="button" class="deletehistory" value="DEL" onclick="Del()"></td>
<td><input type="button" class="sign" style="left: 80px; position: relative;" value="="
onclick="calculate()"></td>
</tr>
<tr class="inputs">
<td><input type="button" class="numbers" value="9" onclick="display.value+= '9'"></td>
<td><input type="button" class="numbers" value="8" onclick="display.value+= '8'"></td>
<td> <input type="button" class="numbers" value="7" onclick="display.value+= '7'"></td>
<td><input type="button" class="sign" value="/" onclick="display.value+= '/'"></td>
</tr>
<tr>
<td><input type="button" class="numbers" value="6" onclick="display.value+= '6'"></td>
<td><input type="button" class="numbers" value="5" onclick="display.value+= '5'"></td>
<td><input type="button" class="numbers" value="4" onclick="display.value+= '4'"></td>
<td> <input type="button" class="sign" value="*" onclick="display.value+= '*'"> </td>
</tr>
<tr>
<td><input type="button" class="numbers" value="3" onclick="display.value+= '3'"></td>
<td><input type="button" class="numbers" value="2" onclick="display.value+= '2'"></td>
<td><input type="button" class="numbers" value="1" onclick="display.value+= '1'"></td>
<td><input type="button" class="sign" value="+" onclick="display.value+= '+'"></td>
</tr>
<tr>
<td><input type="button" class="numbers" value="0" onclick="display.value+= '0'"></td>
<td><input type="button" class="sign" value="." onclick="display.value+= '.'"></td>
<td><input type="button" class="sign" value="%" onclick="display.value+= '%'"></td>
<td><input type="button" class="sign" value="-" onclick="display.value+= '-'"></td>
</tr>
</table>
</div>
<div style="border:2px red dotted;position:relative;display:block;">Test
</div>
</form>
</div>
</div>
</div>
</body>
<footer>
<script>
let history = [];
function checkeyfn(event) {
var display = document.getElementById('display').value
// console.log(event);
var charCode = event.charCode;
var key = String.fromCharCode(charCode);
var key = event.key;
var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'+', '-', '*', '/', '%', '.', '(', ')'
];
if (allowedKeys.includes(key)) {
document.getElementById("display").value += key;
} else if (key === 'Enter' || key === '=') {
calculate();
} else if (key === 'Backspace') {
Del();
}
// Prevent default actions for some keys (optional)
if (['+', '-', '*', '/', '%'].includes(key)) {
event.preventDefault();
}
}
function calculate() {
var screenvalue = document.getElementById('display').value;
var historyvalue = history;
try {
if (screenvalue.length > 1 && history.length > 0) {
var lastdigit = historyvalue[0].split('=');
console.log(historyvalue + ' History value');
}
if (screenvalue.match(/^[0-9+-*/%().]+$/)) {
var result = eval(screenvalue);
document.getElementById('display').value = result;
var equatsto = result
if (screenvalue === result) {
console.log('This 2')
}
// adds to history
history.push(screenvalue + "=" + result);
} else {
document.getElementById('display').value = "";
alert('Invalid Input');
}
} catch (e) {
document.getElementById("display").value = '!Undefined';
9
console.log(e);
// setTimeout(clear(),500);
}
}
function clear1() {
document.getElementById("display").value = '0'
}
function Del() {
var display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}
function showHistory() {
var historyDisplay = document.getElementById('display');
// historyDisplay.value = '';
// historyDisplay.style.display = 'block';
console.log('ifhistory', history);
for (var i = history.length - 1; i >= 0; i--) {
console.log(history.length, 'checking lenght', i);
historyDisplay.value = history[i];
var splits = history.value.split('=');
console.log('Checking splits', splits);
console.log(history[i]);
}
}
</script>
</footer>
</html>