Step 7: Program Calculator Functionality
Step 7 - Lesson
Instructions
Edit the index.html File
-
Add this line of code just after the last button element in the index.html file:
<p id="mPlusValue" role="status"><b>MR Value: 0</b></p> -
Save the index.html file.
Hint: Press Ctrl + S for a shortcut to save files.
Edit the main.js File
-
Edit the main.js file by replacing all content with the code in the "JavaScript Code" section below.
It should match the "JavaScript Code in the js/main.js File" section below.
-
Save the main.js file.
Hint: Press Ctrl + S for a shortcut to save files.
-
Click the Run button and check that your buttons look and behave like the sample in the Results section below when clicked.
This is the completed calculator.
Improve the Calculator
-
There are some calculator behaviors that can be improved. Use these enhancements 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 thecalculatorButtonClicked(...)function to fix this.
JavaScript Code
var global_userEntry = "";
var global_MPlus = "0";
function calculatorButtonClicked(buttonValue) {
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_MPlus;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
}
Result
Notice that each button's 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 user inputs for the display and the M+ Value. They are global variables, meaning they can be accessed throughout the window object's code, including inside all functions.In this case, it tests whether the global variable
global_MPlusis a string with a value of zero"0". In programming, the string"0"is not the same as the number0."0"is of type String, while0is of type Number. Understanding data types and their behaviors will become clearer as you continue to study programming.For more information on JavaScript Variables, visit W3Schools JavaScript Variables, opens in new window
For more information on JavaScript Variable Scope, visit W3Schools JavaScript Scope, opens in new window
For more information on JavaScript Data Types, visit 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 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 += 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_MPlus;
document.getElementById("calculatorOutput").innerText = global_userEntry;
}
}