вот HTML----> <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <script defer src="./app.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <section> <div id="res" class="res"></div> <div class="buttons"> <div class="click yel ">C</div> <div class="click yel">.</div> <div class="click yel">-</div> <div class="click yel">+</div> <div class="click">7</div> <div class="click">8</div> <div class="click">9</div> <div class="click yel">/</div> <div class="click">4</div> <div class="click">5</div> <div class="click">6</div> <div class="click yel">*</div> <div class="click">1</div> <div class="click">2</div> <div class="click">3</div> <div class="click yel">=</div> <div class="click zero">0</div> </div> </section> </body> </html> вот CSS ----> *{ margin: 0%; padding: 0%; box-sizing: border-box; } section{ width: 100%; height: 100vh; background-image: url("./30-12-23_11-44-40.jpg"); } #res{ width: 250px; height: 10vh; margin-left: 7%; margin-top: 10px; border: none; color: white; background-color: rgb(28, 28, 16); display: flex; align-items: center; justify-content: end; font-size: 2rem; font-weight: 500; padding-right: 10px; } .buttons{ width: 250px; height: 400px; margin-left: 7%; border: solid; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: rgb(28, 28, 28); } .click{ width: 25%; height: 19%; border: solid; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 28px; font-family:'Courier New', Courier, monospace; background-color: rgb(89, 89, 89); font-weight: bold; border: none; color: white; cursor: pointer; } .click:hover{ background-color: rgb(117, 113, 113); } .zero{ width: 65%; margin-right: 5px; border-radius: 80px; } .yel{ background-color: rgb(249, 249, 46); } .yel:hover{ background-color: rgb(186, 186, 30); } вот JavaScript ----> let display = document.getElementById('res') let click = Array.from(document.querySelectorAll('.click')) click.map(el => { el.addEventListener('click', () => { if(el.innerText === '='){ display.innerText = eval(display.innerText) }else if (el.innerText === 'C'){ display.innerText = '' }else{ display.innerText += el.innerText } }) })