Download source code here https://github.com/fenelon01/Calculator
1. Event Listener for DOM Content Loaded
javascriptCopy codedocument.addEventListener('DOMContentLoaded', function() {
- Purpose: This line adds an event listener that waits for the entire HTML document to be fully loaded before running the enclosed JavaScript code. This ensures that all elements in the DOM are available for manipulation.
2. Selecting Buttons and the Display Element
javascriptCopy codeconst buttons = document.querySelectorAll('.btn');
const display = document.getElementById('result');
let currentInput = '';
let operator = '';
let firstOperand = '';
buttons
: This selects all elements with the class.btn
, which corresponds to all the calculator buttons.display
: This selects the input element with the IDresult
, which is where the calculated result or current input is shown.currentInput
: A variable to store the number or operation currently being input by the user.operator
: This stores the mathematical operator (+
,-
,*
,/
) selected by the user.firstOperand
: Stores the first number entered before an operator is selected.
3. Looping Through Each Button
javascriptCopy codebuttons.forEach(button => {
button.addEventListener('click', function() {
- Purpose: This code loops through each button element in the
buttons
NodeList and attaches an event listener. This event listener waits for a click event, triggering the enclosed code whenever a button is clicked.
4. Getting the Button’s Value
javascriptCopy codeconst value = this.textContent;
- Purpose: This line retrieves the text content of the button that was clicked. For example, if you click the "7″ button,
value
will be'7'
.
5. Clearing the Display
javascriptCopy codeif (value === 'C') {
currentInput = '';
firstOperand = '';
operator = '';
display.value = '';
- Purpose: If the "C" button is clicked, this code clears all stored variables (
currentInput
,firstOperand
,operator
) and resets the display to an empty string, effectively clearing the calculator.
6. Performing the Calculation
javascriptCopy code} else if (value === '=') {
if (firstOperand && operator) {
currentInput = eval(`${firstOperand} ${operator} ${currentInput}`);
display.value = currentInput;
firstOperand = '';
operator = '';
}
- Purpose: When the "=" button is clicked, this code checks if both
firstOperand
andoperator
are set (meaning the user has entered a number, chosen an operator, and entered another number). eval()
: This function evaluates a string as a mathematical expression (e.g.,'3 + 4'
) and returns the result. Here, it computes the result offirstOperand operator currentInput
.- Resetting: After the calculation, the result is shown in the display, and the
firstOperand
andoperator
variables are reset for the next calculation.
7. Handling Operator Selection
javascriptCopy code} else if (this.classList.contains('operator')) {
if (currentInput) {
operator = value;
firstOperand = currentInput;
currentInput = '';
}
- Purpose: When an operator button is clicked (
+
,-
,*
,/
), this code checks if there’s acurrentInput
. If so, it sets theoperator
to the clicked operator, stores the current input asfirstOperand
, and clearscurrentInput
for the next number input.
8. Handling Number and Decimal Input
javascriptCopy code} else {
currentInput += value;
display.value = currentInput;
- Purpose: For number and decimal buttons, this appends the clicked button’s value to
currentInput
and updates the display to reflect the current input string.
9. Closing the Event Listeners and DOMContentLoaded Function
javascriptCopy code });
});
- Purpose: These lines close the event listener attached to each button and the
DOMContentLoaded
function. This ensures that the code is properly scoped and runs only when intended.
Summary
document.addEventListener('DOMContentLoaded')
: Ensures the script runs after the HTML is fully loaded.- Button Selection and Display: Identifies the buttons and display element to manipulate.
- Event Listeners: Listens for button clicks and updates the display or performs calculations based on user input.
- Basic Operations: Handles the clearing of inputs, calculating results, and managing input and operator sequences.
.
.