A Pen by Wahyu Irawan on CodePen.
Created
January 13, 2025 02:46
-
-
Save Wirawa24/313b2476ff26817eb637736017a9be50 to your computer and use it in GitHub Desktop.
Calculator .app
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculator App</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="calculator"> | |
| <input type="text" id="display" readonly> | |
| <div class="buttons"> | |
| <!-- Numbers and operators --> | |
| <button onclick="appendValue('7')">7</button> | |
| <button onclick="appendValue('8')">8</button> | |
| <button onclick="appendValue('9')">9</button> | |
| <button onclick="appendValue('/')">/</button> | |
| <button onclick="appendValue('4')">4</button> | |
| <button onclick="appendValue('5')">5</button> | |
| <button onclick="appendValue('6')">6</button> | |
| <button onclick="appendValue('*')">x</button> | |
| <button onclick="appendValue('1')">1</button> | |
| <button onclick="appendValue('2')">2</button> | |
| <button onclick="appendValue('3')">3</button> | |
| <button onclick="appendValue('-')">-</button> | |
| <button onclick="appendValue('0')">0</button> | |
| <button onclick="appendValue('.')">.</button> | |
| <button onclick="calculate()">=</button> | |
| <button onclick="appendValue('+')">+</button> | |
| <!-- Clear and Delete --> | |
| <button onclick="clearDisplay()">C</button> | |
| <button onclick="deleteLast()">DEL</button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // script.js | |
| // Append value to the display | |
| function appendValue(value) { | |
| const display = document.getElementById('display'); | |
| display.value += value; | |
| } | |
| // Clear the display | |
| function clearDisplay() { | |
| document.getElementById('display').value = ''; | |
| } | |
| // Delete the last character | |
| function deleteLast() { | |
| const display = document.getElementById('display'); | |
| display.value = display.value.slice(0, -1); | |
| } | |
| // Perform calculation | |
| function calculate() { | |
| const display = document.getElementById('display'); | |
| try { | |
| display.value = eval(display.value); // Evaluate the expression | |
| } catch { | |
| display.value = 'Error'; // Display error for invalid input | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* styles.css */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f0f0f0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .calculator { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| width: 300px; | |
| } | |
| #display { | |
| width: 100%; | |
| height: 50px; | |
| margin-bottom: 10px; | |
| font-size: 18px; | |
| text-align: right; | |
| padding: 5px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| background-color: #f9f9f9; | |
| } | |
| .buttons { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| } | |
| button { | |
| height: 50px; | |
| font-size: 18px; | |
| background-color: #007BFF; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| button:active { | |
| background-color: #003f7f; | |
| } | |
| button:nth-child(16) { | |
| grid-column: span 2; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment