Palmetto Innovation Center

Step 6: Add Display Functionality

This step will change the button's behavior from displaying a value in a window alert to displaying it on the web page just above the calculator buttons. We will add the display and have the button's value show in it when clicked.

Step 6 - Lesson

Instructions

Edit the index.html file

  1. Edit the index.html file by adding the following code before the first HTML button element: <p id="calculatorOutput"></p>

    For assistance, see the "HTML Markup in the index.html File" section below.

  2. Just after the opening <body> tag, add this tag: <div class="calcDiv">

  3. Just before the closing </body> tag, add this tag: </div>

  4. Just before the first button tag, add this paragraph tag:
    <p id="calculatorOutput" role="status"></p>

  5. Save the index.html file.

    Hint: Press Ctrl + S for a shortcut to save files.

Edit the main.css and main.js files

  1. Edit the css/main.css file by adding the CSS classes exactly as shown in the "CSS Markup" section below.

    Ensure it matches the "CSS Markup in the css/main.css File" section below.

  2. Save the main.css file.

    Hint: Press Ctrl + S for a shortcut to save files.

  3. Edit the js/main.js file by replacing the line of code:
    alert(buttonValue);
    with
    document.getElementById("calculatorOutput").innerText = buttonValue;

    Ensure it matches the "JavaScript Code in the js/main.js File" section below.

  4. Save the main.js file.

    Hint: Press Ctrl + S for a shortcut to save files.

  5. Click the Run button and verify that your buttons look and behave like the samples in the Results section below when clicked.

    Each button label should appear in the new display; except for the = and last four buttons, which should not perform any action.

  6. Go to Step 7: Program Calculator Functionality

CSS Markup

#calculatorOutput {
  border: 1px solid #000000;
  text-align: right;
  padding: 0.3em;
}

.calcDiv {
  display: inline-block;
  border: 1px solid #000000;
  padding: 1em;
  width: auto;
  height: auto;
  margin-left: 4em;
  margin-top: 1em;
  background-color: #ffffff;
}

Result

Notice that each button's label value is shown in the calculator display when clicked; except for the = and last four buttons, which should not do anything.






Step 6 - Resources

Explanation

  1. <p id="calculatorOutput" role="status"></p>

    The <p> element with the ID "calculatorOutput" will display the calculator values.

    The role="status" attribute is important for users of screen readers. As the numbers in the display change, their updates are automatically announced by the screen reader, ensuring accessibility for blind users.

  2. document.getElementById("calculatorOutput").innerText = buttonValue;

    Information displayed on the webpage is organized in a structure called the Document Object Model (DOM), accessed by the keyword "document".

    The getElementById("calculatorOutput") method retrieves a reference to the element with the ID "calculatorOutput", which is the paragraph we use for the number display.

    The .innerText property references the text inside the paragraph element.

    Finally, we assign the button value to the paragraph's innerText.

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 />

    </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:

function calculatorButtonClicked(buttonValue) {

  document.getElementById("calculatorOutput").innerText = buttonValue;

}