Sobre a Aula
Interactive Calculator
In this second project, we will create an interactive calculator that will allow you to perform basic operations of addition, subtraction, multiplication and division. We will develop HTML, CSS, and JavaScript and add comments to explain each part of the code.
HTML (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator"> <input type="text" id="display" readonly> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="concatenateNumber('7')">7</button> <button onclick="concatenateNumber('8')">8</button> <button onclick="concatenateNumber('9')">9</button> <button onclick="performOperation('/')">/</button> <button onclick="concatenateNumber('4')">4</button> <button onclick="concatenateNumber('5')">5</button> <button onclick="concatenateNumber('6')">6</button> <button onclick="performOperation('*')">*</button> <button onclick="concatenateNumber('1')">1</button> <button onclick="concatenateNumber('2')">2</button> <button onclick="concatenateNumber('3')">3</button> <button onclick="performOperation('-')">-</button> <button onclick="concatenateNumber('0')">0</button> <button onclick="performOperation('.')">.</button> <button onclick="calculateResult()">=</button> <button onclick="performOperation('+')">+</button> </div> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .calculator { max-width: 300px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input { width: 92%; padding: 10px; margin-bottom: 10px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { width: 100%; padding: 10px; cursor: pointer; font-size: 16px; background-color: #332d2d; color: #f2f2f2; }
JavaScript (script.js):
let displayValue = ''; let currentOperation = ''; let previousValue = ''; // Function to concatenate numbers on the display function concatenateNumber(number) { displayValue += number; updateDisplay(); } // Function to perform operations (+, -, *, /) function performOperation(operation) { if (currentOperation === '' || displayValue === '') { previousValue = displayValue; } else { calculateResult(); } currentOperation = operation; displayValue = ''; } // Function to calculate and display the result function calculateResult() { let result; switch (currentOperation) { case '+': result = parseFloat(previousValue) + parseFloat(displayValue); break; case '-': result = parseFloat(previousValue) - parseFloat(displayValue); break; case '*': result = parseFloat(previousValue) * parseFloat(displayValue); break; case '/': result = parseFloat(previousValue) / parseFloat(displayValue); break; default: return; } displayValue = result.toString(); currentOperation = ''; updateDisplay(); } // Function to clear the display function clearDisplay() { displayValue = ''; currentOperation = ''; previousValue = ''; updateDisplay(); } // Function to update the display content function updateDisplay() { document.getElementById('display').value = displayValue; }
This interactive calculator project uses the concepts learned, such as event manipulation, dynamic DOM updating and programming logic. Feel free to try and expand this project!
Entrar na conversa