Calculator JAVA SCRIPT

Writing Materials and a Calculator

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 ID result, 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 and operator 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 of firstOperand operator currentInput.
  • Resetting: After the calculation, the result is shown in the display, and the firstOperand and operator 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 a currentInput. If so, it sets the operator to the clicked operator, stores the current input as firstOperand, and clears currentInput 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.

.

.

Scroll to Top