WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Simple Calculator
5340
pufffissal
Open In Editor
Publish Your Code
Recommended
18 June 2023
Simple Login Form
22 August 2024
A Simple Login Page
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'; } }
