================================================
FILE: JavaScript/script.js
================================================
// Select all buttons and display elements
const buttons = document.querySelectorAll('.buttons button');
const equationDisplay = document.querySelector('.equation');
const resultDisplay = document.querySelector('.result');
// Initialize input and equation variables
let currentInput = '';
let currentOperator = '';
let currentEquation = '';
// Function for formatting number with commas and decimal places
function formatNumber(number) {
return parseFloat(number).toLocaleString('en-US', {
maximumFractionDigits: 16,
minimumFractionDigits: 0,
});
}
// Add click event listener to each button
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
// If button is a digit or decimal point, add it to the input
if (value >= '0' && value <= '9' || value === '.') {
if (currentInput.length < 16) {
currentInput += value;
resultDisplay.textContent = formatNumber(currentInput);
}
}
// If button is "C", clear all variables and displays
else if (value === 'C') {
currentInput = '';
currentOperator = '';
currentEquation = '';
equationDisplay.textContent = '';
resultDisplay.textContent = '0';
}
// If button is "Backspace", remove last digit from input
else if (value === 'Backspace') {
currentInput = currentInput.slice(0, -1);
// Check if currentInput is empty, if so, display "0"
if (currentInput === '') {
resultDisplay.textContent = '0';
} else if (currentInput === '-' && currentEquation.endsWith(currentInput)) {
resultDisplay.textContent = '0';
} else {
resultDisplay.textContent = formatNumber(currentInput);
}
}
// If button is an operator, add it to the equation and update operator variable
else if (value === '+' || value === '-' || value === '*' || value === '/') {
if (currentInput) {
currentEquation += currentInput + ' ' + value + ' ';
currentOperator = value;
equationDisplay.textContent = currentEquation;
currentInput = '';
}
}
// If button is "=", compute the result of the equation and display it
if (value === '=') {
if (currentInput && currentEquation) {
currentEquation += currentInput;
const result = eval(currentEquation); // Use eval() to compute equation
if (result === Infinity) {
resultDisplay.textContent = "Undefined";
} else {
resultDisplay.textContent = formatNumber(result.toFixed(2).replace(/\.00$/,''));
}
equationDisplay.textContent = '';
currentEquation = '';
currentInput = result.toFixed(2).replace(/\.00$/,'');
}
}
});
});
// Arithmetic functions for addition, subtraction, multiplication, and division
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
return a / b;
}
// Function to call appropriate arithmetic function based on operator
function functionOperate(operator, a, b) {
switch (operator) {
case "+":
return add(a, b);
case "-":
return subtract(a, b);
case "*":
return multiply(a, b);
case "/":
if (b === 0) {
return "Undefined";
}
return divide(a, b);
default:
return "Invalid operator";
}
}
================================================
FILE: README.md
================================================
# Lonario-CalculatorME
Midterm Hands-On Exam
Instructions:
• Create a new folder and name it as LastName-CalculatorME.
• Create three different folders, one for your JavaScript, HTML, and CSS.
• Create a JavaScript file and store it in your JavaScript folder, HTML file to your HTML folder, and CSS file
to your CSS folder.
• Create a function for each of the four basic arithmetic operations which is composed of addition,
subtraction, multiplication, and division. These functions will serve as your computation functions for your
calculator.
• A calculator can operate or calculate if it consists of a number, an operator, and of course, another
number (e.g., 1+1). Create three variables, one for the number, one for the operation, and another one
for the second number. These variables will be used to update the computed value that will appear on
your calculator display.
• Create another function called functionOperate which can take an operator, two numbers, and is able to
call one of the functions from the four basic arithmetic operations that you have created previously.
• Now that your functions and variables are set, start creating the user interface for the calculator by
implementing some basic HTML. In addition to the calculator having numbers and the four basic
arithmetic operations, also add a clear button and of course, an equals button.
• Create a function that can populate the display when you click the number buttons because when
working with a calculator, until you have selected an operation, you can type in as many numbers as you
want. You should be storing the display value in a separate variable.
• At this point, try to see if your functions and behaviors is working together with the interface of your
calculator. Ensure that the calculator is working, try to calculate some basic math (e.g., 1+1, 4/2, 2-2, 2*2).
(Tip: The values and operator selected should be stored and then use the functionOperate on the
values/operator pressed when the you press on the “=” key to show the result.)
• A basic calculator can also solve for multiple operations in one scenario (e.g., 5+2-3*1, after pressing =,
you will get the answer 4) and NOT just first input value, one operator, and another value to calculate
together with the first value (e.g., 1+1=2). However, in this scenario, your calculator (similar to real life
calculators) should first calculate the first part of the equation (e.g., You press on 5 then the + operator
then the number and the calculator displays it as 7, then you press on the – operator then the number 3
and your display shows 4, then press on the * operator and press on 1 then your calculator displays 4)
• Your calculator should also have a clear button, mostly identified in calculators as the capital letter C, and
once you press “clear” it will clear any existing data, your calculation essentially reverts back to 0. There
should also be a backspace button to erase the current input from the calculator.
• If a user tries to divide a number by 0, then an error message such as “Undefined” should appear and the
calculator should not crash because of this operation.
• Challenge: Add an additional function or feature that has not been mentioned in the instructions.
• Zip your folder and save it as LastName-CalculatorME.zip and submit.