<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: rgb(80, 80, 90); } .calculator { display: grid; position: relative; } .calculator .value { grid-column: span 4; text-align: right; outline: none; padding: 10px; border-radius: 8px; border: 1px solid #6b6364; width: 240px; height: 80px; color: aliceblue; font-weight: 700; font-size: 30px; background: #565759; } .calculator .num { display: flex; justify-content: center; align-items: center; border: 1px solid #565759; background: rgba(124, 124, 124, 0.842); width: 60px; height: 60px; color: aliceblue; } .calculator span.zero { grid-column: span 2; width: 120px; } .calculator span.ac { grid-column: span 3; width: 180px; } </style> <body> <form class="calculator" name="calc"> <input type="text" class="value" name="txt"> <span class="num ac" onclick="document.calc.txt.value = ''">AC</span> <span class="num" onclick="document.calc.txt.value += '/'">/</span> <span class="num" onclick="document.calc.txt.value += '7'">7</span> <span class="num" onclick="document.calc.txt.value += '8'">8</span> <span class="num" onclick="document.calc.txt.value += '9'">9</span> <span class="num" onclick="document.calc.txt.value += '*'">*</span> <span class="num" onclick="document.calc.txt.value += '4'">4</span> <span class="num" onclick="document.calc.txt.value += '5'">5</span> <span class="num" onclick="document.calc.txt.value += '6'">6</span> <span class="num" onclick="document.calc.txt.value += '-'">-</span> <span class="num" onclick="document.calc.txt.value += '1'">1</span> <span class="num" onclick="document.calc.txt.value += '2'">2</span> <span class="num" onclick="document.calc.txt.value += '3'">3</span> <span class="num" onclick="document.calc.txt.value += '+'">+</span> <span class="num zero" onclick="document.calc.txt.value += '0'">0</span> <span class="num" onclick="document.calc.txt.value += '.'">.</span> <span class="num" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span> </form> </body> </html>