****Urgent Urgent Urgent - Javascript code required****
I am including contents of CSS file and .html file that was provided along with this project.
PLEASE DO ALL THIS IN JAVA FILE, NO CHANGES CAN BE MADE IN CSS OR HTML FILES.
INSTRUCTIONS:
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 if needed based on your code. (Note: You can add only different
selectors (id, class) in HTML and cannot make any changes to CSS.) Create your
own .js file. All your work will be done in only to 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.
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.
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.
(yellow). Ensure the colour changes back when the mouse cursor is
removed.
***CSS doc***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculatorF17{
flex: 0 0 40%;
}
.screenF17{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttonsF17{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
.btn-grey{
background: rgb(224,224,224);
}
.btF17{
font-size: 4rem;
}
***HTML DOC***
Calculator F17
Calculator F17
*
/
-
+
.
9
8
7
6
5
4
3
2
1
0
=
C
****Urgent Urgent Urgent - Javascript code required****
I am including contents of CSS file and .html file that was provided along with this project.
Also, here is a link to google doc with the CSS and HTML file data which you can access and edit directly if you prefer.
https://docs.google.com/document/d/132uPwAG3GkfBXd8kXmLktWywz2A5eaYAWwNoXE2V2qI/edit?usp=sharing
For step 3 part a - Please choose: green for +, red for -, purple for *, orange for /
For step 11 - Please choose colour yellow.
***CSS doc***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculatorF17{
flex: 0 0 40%;
}
.screenF17{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttonsF17{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
.btn-grey{
background: rgb(224,224,224);
}
.btF17{
font-size: 4rem;
}
***HTML DOC***
Calculator F17
Calculator F17
*
/
-
+
.
9
8
7
6
5
4
3
2
1
0
=
C