WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
कैलकुलेटर
873
AmirAliAkrami
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
14 September 2024
सरल कैलकुलेटर
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); }
