WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5668
pufffissal
Apri nell'Editor
Pubblica il Tuo Codice
15 October 2024
Barra di navigazione blu
19 October 2024
Portafoglio sviluppatore HTML V2
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'; } }
