Question

In this project you will write the JavaScript code to create a calculator. Good thing is that everyone knows how the calculator works. It is a challenging project, give yourself lots of time to complete it.

1. You are provided with an HTML, and CSS files.. Look at these files to understand

how to use them and modify them if needed based on your code. (Note: You can add

different selector (id, class) in HTML ONLY and cannot make any changes to CSS.)

Create your own .js file. All your work will be done in JS file.

2. Connect files and this is what you should see. All files must have your name in the

file’s name. You are ready to start.

3. Apply these changes :

a. Change the background colour of operation buttons (*, /, +, -), make each

button a different colour ( your choice).

b. Change the font colour for all number buttons (include decimal “.” button, to

blue.

c. Change the background colour of clear “C” button, to black. Also the font colour

to white.

4. Add three Buttons before “C” (clear) button as follow:

a. MS -Memory Store

b. MC – Memory Clear

c. MR – Memory Restore

All three buttons must have grey background and white font.

After you apply the changes(with your own colour selection), you should see

something like this:

5. Record any clicking of buttons and display its value on the screen.

Suggested steps: (Note: You can come up with your own solution)

a. Create variables that will store targeted DOM elements, input/outputs

b. Add an event listener to retrieve data from all buttons when they are clicked.

The handler, function(event) can be used to display the value of the button

(number or operation) on the screen. You can use event.target.dataset.num

to return the value and it should be stored as a new variable added to screen

value.

6. Perform calculations (*, /, +, -) when clicking on the equal “=” button,

Suggested steps:

a. Add an event listener for the equal button. When you click the button, the

handler function(event) can be used to calculate the expression using

eval(screen.value) method. Assign the answer that you obtain to the screen

value. (Note: eval() is a function/method that evaluates expressions. Like:

eval(“2+7”).)

7. Display a message such as “Please Enter a Value”, when clicking the equal “=” button

and nothing is displayed on the screen.

8. Make the memory functional; storing, clearing and retrieving data.

Suggested steps:

a. Add event listeners for:

i. MS- Store the data from screen to memory;

ii. MC - clear the data in the memory;

iii. MR - Recall the memory value to screen.

9. Clear data in screen by clicking on “C” button.

10. Text appearing on the calculator screen must be aligned to the right.

11. When the mouse hovers over a button, change the background colour of the button.

(your choice of colour). Ensure the colour changes back when the mouse cursor is

removed.

Can i get code for the above question?