Step 7 - Lesson
Instructions
Edit the index.html File
-
Add this line of code just after the last button element in teh index.html file
<p id="mPlusValue" role="status"><b>MR Value: 0</b></p> Save the index.html file.
Hint: press the ctrl + s keys for a shortcut to saving files.
Edit the main.js File
Edit the main.js file by replacing all content with the code in the "JavaScript Code" section below.
Save the main.js file.
Hint: press the ctrl + s keys for a shortcut to saving files.
Click the Run button and check that your button looks and behaves like the sample in the Results section below when clicked.
This is the completed calculator.
It should match the "JavaScript Code js/main.js File" section below.
Improve the Calculator
There are some calculator behaviors that can be improved. Use these fixes to practice what you have learned in this course.
When the calculator has no value and you press the +,-,*,/, or . (period), they should not appear in the display. Use an if(...) conditional statement in the calculatorButtonClicked(...) function to fix this.
JavaScript Code
var global_userEntry = "";
var global_MPlus = "0";
function calculatorButtonClicked(buttonValue){
global_userEntry = global_userEntry + buttonValue;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
function sum(){
let result = eval(global_userEntry);
document.getElementById("calculatorOutput").innerText = result;
global_userEntry = result;
}
function CLR(){
global_userEntry = "";
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
function MPlus(){
global_MPlus = global_userEntry;
document.getElementById("mPlusValue").innerHTML = "<b>MR Value:</b> " + global_MPlus;
}
function MMinus(){
global_MPlus = "0";
document.getElementById("mPlusValue").innerHTML = "<b>MR Value:</b> " + global_MPlus;
}
function MRecall(){
if(global_MPlus != "0"){
global_userEntry = global_userEntry + global_MPlus;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
}
Result
Notice that each buttons label value is shown in the calculator display when clicked.
MR Value: 0
Step 7 - Resources
Explanation
-
<var global_userEntry = "";andvar global_MPlus = "0";>are JavaScript variables used to store the user inputs for the display and the M+ Value. They are global variables which means they can be accessed throughout the window object's code including inside all functions.In this case, it tests to see if the global variable global_MPlus is a string with a value of zero
"0". In computers, the string"0"is not the same as a0."0"is of type String, and0is of type Number. Data types, and how they behave, will become clearer as you continue to study computers.For more information on JavaScript Variables, visit the W3schools JavaScript Variables, opens in new window
For more information on JavaScript Variable Scope, visit the W3schools JavaScript Scope, opens in new window
For more information on JavaScript JavaScript Data Types, visit the W3schools JavaScript Data Types, opens in new window
-
The
if(global_MPlus != "0"){conditional statement tests a condition and executes the code in its block if the condition is true.For more information on JavaScript's if() conditional tests, visit the W3schools JavaScript if...else, opens in new window
HTML Markup in the index.html File
The HTML markup in your index.html file should match the sample below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="calcDiv">
<p id="calculatorOutput" role="status"></p>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('7')">7</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('8')">8</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('9')">9</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('+')">+</button>
<br />
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('4')">4</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('5')">5</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('6')">6</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('-')">-</button>
<br />
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('1')">1</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('2')">2</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('3')">3</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('*')">*</button>
<br />
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('0')">0</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('.')">.</button>
<button type="button" class="buttonStyle" onClick="sum()">=</button>
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('/')">/</button>
<br />
<button type="button" class="buttonStyle" onClick="CLR()">CL</button>
<button type="button" class="buttonStyle" onClick="MPlus()">M+</button>
<button type="button" class="buttonStyle" onClick="MMinus()">M-</button>
<button type="button" class="buttonStyle" onClick="MRecall()">MR</button>
<br />
<p id="mPlusValue" role="status"><b>MR Value: 0</b></p>
</div>
</body>
</html>
CSS Markup in the css/main.css File
The CSS markup in your css/main.css file should match the sample below:
.buttonStyle{
width: 50px;
height: 50px;
font-weight: bold;
font-size: 1em;
margin-bottom: 0.4em;
margin-right: 0.2em;
}
#calculatorOutput{
border: 1px solid #000000;
text-align: right;
padding: 0.3em;
height: 1em;
}
.calcDiv{
display: inline-block;
border: 1px solid #000000;
padding: 1em;
width: auto;
height: auto;
margin-left: 4em;
margin-top: 1em;
background-color: #ffffff;
}
JavaScript Code in the js/main.js File
The JavaScript markup in your js/main.js file should match the sample below:
var global_userEntry = "";
var global_MPlus = "0";
function calculatorButtonClicked(buttonValue){
global_userEntry = global_userEntry + buttonValue;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
function sum(){
let result = eval(global_userEntry);
document.getElementById("calculatorOutput").innerText = result;
global_userEntry = result;
}
function CLR(){
global_userEntry = "";
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
function MPlus(){
global_MPlus = global_userEntry;
document.getElementById("mPlusValue").innerHTML = "<b>MR Value:</b> " + global_MPlus;
}
function MMinus(){
global_MPlus = "0";
document.getElementById("mPlusValue").innerHTML = "<b>MR Value:</b> " + global_MPlus;
}
function MRecall(){
if(global_MPlus != "0"){
global_userEntry = global_userEntry + global_MPlus;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
}