Palmetto Innovation Center

To create each of the calculator buttons, we are going to copy the HTML button element we already made, then paste 19 more copies. Then we are going to change each button's label and the onClick function's parameter. To make the buttons line up like a calculator, we are going to put line breaks after every for buttons.

Because we are just adding page elements and not changing the way they look or behave, we only need to edit the HTML in the index.html file.

Step 5 - Lesson

Instructions

We are going to add the code seen in the "HTML Samples" section below. Using copy and paste, it will be quick to complete.

  1. Open the index.html file for editing.

  2. Select and copy the entire button element. Copy this: <button type="button" class="buttonStyle" onClick="calculatorButtonClicked('0')">0</button>

  3. Paste it 19 times just after the one already there. See the "HTML Markup" section below for help.

  4. After every 4 buttons, add this line break: <br />

  5. Change each button's label as seen in the "HTML Markup" section below. The button labels will be ordered like: 7 8 9 + 4 5 6 - 1 2 3 * CL M+ M- MR

  6. Your final HTML should match the code in the "HTML Markup in the index.html File" section below. Notice that the = and last four buttons have different onClick JavaScript function calls.

  7. Save the index.html file.

    Hint: press the ctrl + s keys for a shortcut to saving files.

  8. Click the Run button and check that your button looks and behaves like the sample in the Results section below when clicked.

    Each button label should appear in the window alert message except the = and last four buttons which should not do anything.

  9. Go to Step 6 Add Calculator Display

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

  1. <br />

    The <br /> tag inserts a single line break.


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);

}