WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5509
pufffissal
Abrir no Editor
Publique Seu Código
Precisa de um site?
Recomendado
30 March 2025
Um código por ytr3d3
29 May 2025
Efeito de luz no ícone social
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Fancy Calculator</title> </head> <body> <div class="calculator"> <input type="text" id="display" disabled> <div class="row"> <button class="button" onclick="clearDisplay()">C</button> <button class="button" onclick="appendToDisplay('7')">7</button> <button class="button" onclick="appendToDisplay('8')">8</button> <button class="button" onclick="appendToDisplay('9')">9</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('4')">4</button> <button class="button" onclick="appendToDisplay('5')">5</button> <button class="button" onclick="appendToDisplay('6')">6</button> <button class="button" onclick="appendToDisplay('+')">+</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('1')">1</button> <button class="button" onclick="appendToDisplay('2')">2</button> <button class="button" onclick="appendToDisplay('3')">3</button> <button class="button" onclick="appendToDisplay('-')">-</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('0')">0</button> <button class="button" onclick="appendToDisplay('.')">.</button> <button class="button" onclick="calculate()">=</button> <button class="button" onclick="appendToDisplay('*')">*</button> </div> <div class="row"> <button class="button" onclick="appendToDisplay('/')">/</button> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background: linear-gradient(to bottom, #999, #666); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .calculator { background-color: #333; border-radius: 20px; padding: 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); width: 300px; } input[type="text"] { width: 100%; height: 40px; font-size: 20px; text-align: right; border: none; background-color: #333; color: #fff; margin-bottom: 10px; } .row { display: flex; justify-content: space-between; } .button { width: 65px; height: 65px; font-size: 25px; text-align: center; border: none; border-radius: 50%; background-color: #333; color: #fff; cursor: pointer; transition: background-color 0.2s; } .button:hover { background-color: #666; }
JS
Copy
function appendToDisplay(value) { document.getElementById('display').value += value; } function clearDisplay() { document.getElementById('display').value = ''; } function calculate() { try { document.getElementById('display').value = eval(document.getElementById('display').value); } catch (error) { document.getElementById('display').value = 'Error'; } }
