Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is

[Lu3ifer]

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.
Some Issues I am encoutering
1. I can't get the input to overflow to y
2. I have no idea how to fix when I enter number and the eval gives me a result with '=' sign, I just want the result.
3. I want to check if the display has a value and if that display value is something from history and if that is the case, upon entering a number the display should have x(entered number) and not the x+y=z(entered numbers) and if not it should just proceeded with entering the number which I couldn't do
4. The history button should cycle through history in order a+b=c then c+d=e
5. When I click any operator after the calculation the history for loop show length but is undefined
6. I want the history to be shown in the box in a manner unlike just x+y=55,x-y=33







<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->

<!-- language: lang-js -->
<code>
<script>
let history = [];
function checkeyfn(event) {
var display = document.getElementById('display').value
var charCode = event.charCode;
var key = String.fromCharCode(charCode);
var key = event.key;
console.log('Initial length',display.length);
var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'+', '-', '*', '/', '%', '.', '(', ')'];
if (allowedKeys.includes(key)) {
var newvalue = document.getElementById("display").value += key;
if(display.value === newvalue){
var newvalue = document.getElementById("display").value += key;
}
if(display.value !== newvalue && allowedKeys.includes(key))
{
if (display.length > 1 && history.length > 0) {
console.log("checking if history is here ", history);
for (var i = history.length; i >= 0, i++ {
console.log('I am being called History', history, 'Loop number', i);
// var lastdigit = history.split('=');
console.log('I am being called Last digit', lastdigit);
}
console.log('Check if lastdigit is added', lastdigit);
console.log('Check if new value is added', newvalue);
}
}


} 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 {
console.log('This is screenvalue', screenvalue, 'And this is length', screenvalue.length);

if (screenvalue && screenvalue.match(/^[0-9+\-*/%().]+$/)) {
var result = eval(screenvalue);
console.log('The result is ', result);
document.getElementById('display').value = result;
if(screenvalue === result){
console.log('This 2')
}
var pushes = history.push(screenvalue + "=" + result);
showHistory();
}
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() {
console.log('Pushed to history', history);
var historyDisplay = document.getElementById('display');

for (var i = history.length - 1; i >= 0; i--) {
historyDisplay.value = history;
var splits = [] = history.split('=',);
if (splits.length > 0) {
for (var i = splits.lenght; i <= 0, i++ {
console.log(splits);
console.log('Checking splits', splits);
// console.log(sp);

}
} else {
console.log('directed here');
}

}

}
</script>

<!-- language: lang-css -->

/* 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;
}

<!-- language: lang-html -->

<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>
</body>
enter code here

<!-- end snippet -->

</code>