WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculatrice
617
AmirAliAkrami
Ouvrir dans l'éditeur
Publiez votre code
Precisa de um site?
29 August 2024
Interface utilisateur de la calculatrice - Neumorphisme - Drak
17 July 2025
calculatrice scientifique
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); }
