Page 1 of 2 ©
Building a Calculator
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
c. Change the background colour of clear “C” button, to black. Also the font colour
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:
Page 2 of 2 © St. Clair College of Applied Arts and Technology
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 [login to view URL]
to return the value and it should be stored as a new variable added to screen
6. Perform calculations (*, /, +, -) when clicking on the equal “=” button,
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([login to view URL]) method. Assign the answer that you obtain to the screen
value. (Note: eval() is a function/method that evaluates expressions. Like:
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.
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
The mark for this project is 25% of your mark. Partial marks will 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 together in one.
Hello i can handle this type of job for [login to view URL] free to message me. i will do my best in job for sure
11 freelances font une offre moyenne de 47 $ pour ce travail
Hi, Dear! I have a full experience of 7 years in HTML, JS and CSS... I have read your requirement carefully and I am interested in this project. If you`ll choose me, I am confident to provide you best solution that co Plus
✨✔⭐⭐Dear Client⭐⭐✔✨ !! Thanks for sharing a clear requirement and I am really excited to bid you that I would be A suitable guy for you. I have been MERN(Mongodb, Express, React, Node) developer for 6+ years and I am r Plus
Hello, there? I am appropriate to your description. I have rich experience with the similar projects over 6 years. I have small reviews but i can assure you that i will finish this project with high quality on time. Th Plus
⭐⭐⭐⭐⭐ Algorithm Expert ⭐⭐⭐⭐⭐ Dear sir! I am very familiar with algorithm & data structure using c/c++/c#/java/python language. I've checked just your attached project and I am very interested in your project. When do Plus
Hi, there Thanks for your job suggestion. As a experienced and skillful full-stack web developer, I feel happy to suggest you my proposal on this project. I have checked your project description very carefully with gr Plus
Hi I am ready to start your project immediately. If you award me, you will get the wonderful results. Best regards