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