WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculator
484
AmirAliAkrami
Open In Editor
Publish Your Code
Recommended
29 August 2024
Calculator UI -Neumorphism - white
1 February 2025
mikey's new calculator
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); }
