Add to the application the ability to enter numbers and operations from the dump. How to implement?

var inputField = document.getElementById('inputField'); function addSymbolToInput(number) { if (inputField.value === '0') { inputField.value = number; } else { inputField.value += number; }; }; function deleteLastSymbol() { var subStr = inputField.value.slice(0, -1) inputField.value = subStr === '' ? '0' : subStr; }; function deleteAllSymbols() { inputField.value = 0; }; function getResult() { inputField.value = eval(inputField.value); }; 
 body { font-size: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 100%; } .calculator { width: 420px; height: 610px; border-radius: 15px; margin: auto; } .calculator__display { text-align: center; padding: 31px; } .calculator__display--textview { width: 360px; height: 90px; font-size: 50px; color: black; padding: 10px; background: linear-gradient(to top, #a6e6e9, darkgray); border: 0; border-radius: 8px; } table { margin: auto; } .calculator__btn { width: 80px; height: 80px; font-size: 30px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; background: linear-gradient(to top, #f3ede3, #afaca8); border: 0; cursor: pointer; border-radius: 8px; } .calculator__btn--stronger { width: 164px; height: 80px; } .calculator__btn--longer { width: 80px; height: 164px; } 
 <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML Калькулятор</title> <link href="calc.css" rel="stylesheet"> </head> <body> <div class="calculator"> <div class="calculator__display"> <input disabled class="calculator__display--textview" name="textview" id="inputField" type="text" value="0"> </div> <table> <tr> <td> <button class="calculator__btn calculator__btn--red" onclick="deleteAllSymbols('AC')">AC</button> </td> <td> <button class="calculator__btn calculator__btn--red" onclick="deleteLastSymbol()">C</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('/')">/</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('*')">*</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('7')">7</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('8')">8</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('9')">9</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('-')">-</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('4')">4</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('5')">5</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('6')">6</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('+')">+</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('1')">1</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('2')">2</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('3')">3</button> </td> <td rowspan="2"> <button class="calculator__btn calculator__btn--longer calculator__btn--orange" onclick="getResult('=')">=</button> </td> </tr> <tr> <td colspan="2"> <button class="calculator__btn calculator__btn--stronger" onclick="addSymbolToInput('0')">0</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('.')">.</button> </td> </tr> </table> </div> <script src="calc.js"></script> </body> </html>

    1 answer 1

     var inputField = document.getElementById('inputField'); function addSymbolToInput(number) { if (inputField.value === '0') { inputField.value = number; } else { inputField.value += number; }; }; function deleteLastSymbol() { var subStr = inputField.value.slice(0, -1) inputField.value = subStr === '' ? '0' : subStr; }; function deleteAllSymbols() { inputField.value = 0; }; function getResult() { inputField.value = eval(inputField.value); }; var SYMBOL_KEYCODES = { '45': '0', '35': '1', '40': '2', '34': '3', '37': '4', '12': '5', '39': '6', '36': '7', '38': '8', '33': '9', '107': '-', '109': '+', '106': '*', '111': '/', '46': '.' }; var ENTER_KEYCODE = 13; var BACKSPACE_KEYCODE = 8; document.addEventListener('keydown', function(evt) { if (evt.keyCode in SYMBOL_KEYCODES) { evt.preventDefault(); addSymbolToInput(SYMBOL_KEYCODES[evt.keyCode]) } else if (evt.keyCode === ENTER_KEYCODE) { getResult(); } else if (evt.keyCode === BACKSPACE_KEYCODE) { deleteLastSymbol(); } }); 
     .calculator { width: 420px; height: 610px; border-radius: 15px; margin: auto; } .calculator__display { text-align: center; padding: 31px; } .calculator__display--textview { width: 360px; height: 90px; font-size: 50px; color: black; padding: 10px; background: linear-gradient(to top, #a6e6e9, darkgray); border: 0; border-radius: 8px; } table { margin: auto; } .calculator__btn { width: 80px; height: 80px; font-size: 30px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; background: linear-gradient(to top, #f3ede3, #afaca8); border: 0; cursor: pointer; border-radius: 8px; } .calculator__btn--stronger { width: 164px; height: 80px; } .calculator__btn--longer { width: 80px; height: 164px; } 
     <div class="calculator"> <div class="calculator__display"> <input disabled class="calculator__display--textview" name="textview" id="inputField" type="text" value="0"> </div> <table> <tr> <td> <button class="calculator__btn calculator__btn--red" onclick="deleteAllSymbols('AC')">AC</button> </td> <td> <button class="calculator__btn calculator__btn--red" onclick="deleteLastSymbol()">C</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('/')">/</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('*')">*</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('7')">7</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('8')">8</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('9')">9</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('-')">-</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('4')">4</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('5')">5</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('6')">6</button> </td> <td> <button class="calculator__btn calculator__btn--orange" onclick="addSymbolToInput('+')">+</button> </td> </tr> <tr> <td> <button class="calculator__btn" onclick="addSymbolToInput('1')">1</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('2')">2</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('3')">3</button> </td> <td rowspan="2"> <button class="calculator__btn calculator__btn--longer calculator__btn--orange" onclick="getResult('=')">=</button> </td> </tr> <tr> <td colspan="2"> <button class="calculator__btn calculator__btn--stronger" onclick="addSymbolToInput('0')">0</button> </td> <td> <button class="calculator__btn" onclick="addSymbolToInput('.')">.</button> </td> </tr> </table> </div>