WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Simple Calculator
6518
pufffissal
Open In Editor
Video
Publish Your Code
1
Recommended
27 February 2024
Simple HTML CSS Button
2 March 2024
Simple Translator app(English to Urdu)
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'; } }
