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