WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
mikey's new calculator
838
Mikeykun
Open In Editor
Publish Your Code
Recommended
14 September 2024
Simple Calculator
29 August 2024
Calculator UI -Neumorphism -Drak
29 August 2024
Calculator UI -Neumorphism - white
HTML
Copy
Calculator
MIKEY'S NEW CALCULATOR
CSS
Copy
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } body, html { height: 100%; } body { background: linear-gradient(rgb(0, 255, 208),rgb(0, 11, 128)); display: grid; place-items: center; } h1{ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; color: #6e5dba; font-size: 50px; } .calculatrice { width: 330px; background: #6e5dba; padding: 40px 30px; border-radius: 10px; box-shadow: -3px -3px 7px #221d3b, 3px 3px 5px #00000070; } .calculatrice .resultat { height: 60px; width: 100%; background: #ffffff; box-shadow: inset -3px -3px 7px #221d3b, inset 3px 3px 5px #00000070; } .calculatrice .resultat input{ width: 100%; height: 100%; background: transparent; padding: 1rem; color: #000000; font-size: 20px; text-align: right; border: none; outline: none; box-shadow: inset -1px -1px 7px #221d3b, inset 1px 1px 5px #00000070; font-weight: 500; } .calculatrice .buttons { padding: 30px 0 0 0; text-align: center; } .calculatrice input[type=button]{ height: 56px; width: 56px; margin: 4px; font-size: 23px; background: #120f1f; color: #f1f1f1; border: none; outline: none; box-shadow: -2px -2px 7px #221d3b, 2px 2px 5px #00000070; cursor: pointer; } .calculatrice input[type=button]:active{ box-shadow: inset -2px -2px 7px #221d3b, inset 2px 2px 5px #00000070; } .reset { width: 100%!important; font-size: 18px!important; } .infos { color: #eb9595; text-align: center; text-transform: uppercase; font-size: 9px; font-family: Arial, Helvetica, sans-serif; margin-bottom: 1rem; font-weight: 400; }
JS
Copy
const info = document.querySelector('.infos') const allBtns = document.querySelectorAll('input[type=button]') function val(resultat){ form.fenetre.value = form.fenetre.value + resultat } function calcule(){ if(form.fenetre.value == ""){ info.innerText = `Veuillez écrire un chiffre`; allBtns.forEach(btn => { btn.addEventListener('click', function(){ info.innerText = "" }) }) }else { form.fenetre.value = eval(form.fenetre.value); info.innerText = "" } } function suppr(){ form.fenetre.value = ""; }