WEB 230

Page 1 of 2 © St. Clair College of Applied Arts andTechnology

Final Project

Building a Calculator

______________________________________________________________________

In this project you will write the JavaScript code to create acalculator. Good thing is that

everyone knows how the calculator works. It is a challengingproject, give yourself lots of

time to complete it.

1. You are provided with an HTML, and CSS files.. Look at thesefiles 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 anychanges to CSS.)

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

2. Connect files and this is what you should see. All files musthave 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 (includedecimal “.” 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), youshould see

something like this:

WEB 230

Page 2 of 2 © St. Clair College of Applied Arts andTechnology

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

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

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

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

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

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

to return the value and it should be stored as a new variableadded 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 clickthe button, the

handler function(event) can be used to calculate the expressionusing

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

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

eval(“2+7”).)

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

and nothing is displayed on the screen.

8. Make the memory functional; storing, clearing and retrievingdata.

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 tothe right.

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

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

removed.

The mark for this project is 25% of your mark. Partial markswill be given. 10% of mark will

be based on variable unique naming and proper code formatting.Identical projects will be

marked “0”. There is no late submission. Zip all files togetherin one.

WEB 230: JavaScript 1, Winter 21