[Solved] CSE 106 Lab 4

Write a calculator web app in JavaScript, HTML, and CSS with the following features:

1. Has an output field that represents the numbers input or the answer
2. Has number buttons representing all numbers (0-9)
3. Has a decimal (.) button to make decimals that can only be used once (e.g. 3.5 OK, 4.5.6 not OK)
4. Has arithmetic action buttons for addition, subtraction, multiplication, and division
5. Has an equals button that outputs the result from the calculation of the first and second numbers input and the arithmetic action clicked
6. Has a clear button that clears the inputs, arithmetic actions, and output field

Here are some additional requirements:

1. The numbers clicked from the number buttons should be appended to the numbers in the output field until an arithmetic action button is pressed. Once an arithmetic action is pressed, a new number can be input.
2. The arithmetic action button should be highlighted after it is clicked to show what operation is occurring. The button stays highlighted until another number is input, another arithmetic action button is pressed, or the equals or clear buttons are pressed.
3. When the equals button is pressed a second time, it performs the last action with the answer being the first number input (e.g. 2+4 click equals -> 6, click equals again equates to 6+4 -> 10, click equals again equates to 10+4 -> 14)
4. When an arithmetic action button is clicked again, after a number is input, an arithmetic action button is clicked and a second number is input, it effectively acts as an equals button and makes the arithmetic action button clicked now active and highlighted
5. Have different colors for number buttons, arithmetic actions and equals buttons, and clear buttons
6. All buttons and output should be arranged in a grid with a background and border Here is an example of how it could look:

Note: If you want a calculator to try out that acts similarly to this one, you may try out:

https://www.onlinecalculator.com