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 an initial calculation is done.
Some Issues I am encountering:
- I can't get the input to overflow to y
- 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.
- 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
- The history button should cycle through history in order a+b=c then c+d=e
- When I click any operator after the calculation the history for loop show length but is undefined
- I want the history to be shown in the box in a manner unlike just x+y=55,x-y=33
Code:
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[i], 'Loop number', i); // var lastdigit = history[i].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[i]; var splits = [] = history[i].split('=', ); if (splits.length > 0) { for (var i = splits.lenght; i <= 0, i++;) { console.log(splits[i]); console.log('Checking splits', splits); // console.log(sp[i]); } } else { console.log('directed here'); } }}/* 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;}<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>