WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculadora
480
AmirAliAkrami
Abrir en el editor
Publica tu código
Recomendado
27 March 2025
Calculadora de IMC
14 September 2024
Calculadora sencilla
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="main"> <input type="text" id='res'> <div class="btn"> <input type="button" value='C' onclick="Clear()"> <input type="button" value='%' onclick="Solve('%')"> <input type="button" value='←' onclick="Back('←')"> <input type="button" value='/' onclick="Solve('/')"> <br> <input type="button" value='7' onclick="Solve('7')"> <input type="button" value='8' onclick="Solve('8')"> <input type="button" value='9' onclick="Solve('9')"> <input type="button" value='x' onclick="Solve('*')"> <br> <input type="button" value='4' onclick="Solve('4')"> <input type="button" value='5' onclick="Solve('5')"> <input type="button" value='6' onclick="Solve('6')"> <input type="button" value='-' onclick="Solve('-')"> <br> <input type="button" value='1' onclick="Solve('1')"> <input type="button" value='2' onclick="Solve('2')"> <input type="button" value='3' onclick="Solve('3')"> <input type="button" value='+' onclick="Solve('+')"> <br> <input type="button" value='00' onclick="Solve('00')"> <input type="button" value='0' onclick="Solve('0')"> <input type="button" value='.' onclick="Solve('.')"> <input type="button" value='=' onclick="Result()"> </div> </div> <script src="js.js"></script> </body> </html>
CSS
Copy
* { padding: 0; margin: 0; font-family: 'poppins', sans-serif; } body { background-color: #495250; display: grid; height: 100vh; place-items: center; } .main { width: 400px; height: 450px; background-color: white; position: absolute; border: 5px solid rgb(0, 0, 0); border-radius: 6px; } .main input[type='text'] { width: 88%; position: relative; height: 80px; top: 5px; text-align: right; padding: 3px 6px; outline: none; font-size: 40px; border:2px solid rgb(200, 10, 10); display: flex; margin: auto; border-radius: 6px; color: black; } .btn input[type='button'] { width: 90px; padding: 2px; margin: 2px 0px; position: relative; left: 13px; top: 20px; height: 60px; cursor: pointer; font-size: 18px; transition: 0.5s; background-color: #45b49c; border-radius: 6px; color: white; } .btn input[type='button']:hover { background-color: black; color: white; }
JS
Copy
function Solve(val) { var v = document.getElementById('res'); v.value += val; } function Result() { var num1 = document.getElementById('res').value; var num2 = eval(num1); document.getElementById('res').value = num2; } function Clear() { var inp = document.getElementById('res'); inp.value = ''; } function Back() { var ev = document.getElementById('res'); ev.value = ev.value.slice(0, -1); }
