Step 5: Add Calculator Buttons
To create each of the calculator buttons, we will copy the HTML button element we already made and then paste 19 additional copies. Each button's label and the onClick function's parameter will be changed accordingly. To ensure the buttons line up like a calculator, we will include line breaks after every four buttons.
Since we are only adding page elements and not changing their appearance or behavior, we will only need to edit the HTML in the index.html file.
Step 5 - Lesson
Instructions
We will add the code shown in the "HTML Samples" section below. Using copy and paste will speed up the process.
Open the index.html file for editing.
-
Select and copy the entire button element. Copy this:
<button type="button" class="buttonStyle" onClick="calculatorButtonClicked('0')">0</button> Paste it 19 times just after the one already there. See the "HTML Markup" section below for help.
After every four buttons, add this line break:
<br />-
Change each button's label as shown in the "HTML Markup" section below. The button labels should be ordered like:
7 8 9 + 4 5 6 - 1 2 3 * CL M+ M- MR -
Your final HTML should match the code in the "HTML Markup in the index.html File" section below. Notice that the = and the last four buttons have different onClick JavaScript function calls.
-
Save the index.html file.
Hint: Press Ctrl + S for a shortcut to save files.
-
Click the Run button and ensure that your buttons look and behave like the samples in the Results section below when clicked.
Each button label should appear in the alert message except for the = and last four buttons, which should not perform any action.
HTML Markup
<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 />
Result
Notice that each button's label value is shown in the popup when clicked.
Step 5 - Resources
Explanation
-
<br />The
<br />tag inserts a single line break.-
For more information on the
<br />tag, visit W3Schools' HTML Tag, 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>
<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 />
</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;
}
JavaScript Code in the js/main.js File
The JavaScript markup in your js/main.js file should match the sample below:
function calculatorButtonClicked(buttonValue) {
alert(buttonValue);
}