Palmetto Innovation Center

This step will change the button's behavior from displaying in a window alert to displaying on the web page just above the calculator buttons. To do this, we will need to add the display, then 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>

    If you need help 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 the ctrl + s keys for a shortcut to saving 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.

    It should match the "CSS Markup in the css/main.css File" section below.

  2. Save the main.css file.

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

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

    It should match the "JavaScript Code js/main.js File" section below.

  4. Save the main.js file.

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

  5. 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 new display; except for the = and last four buttons which should not do anything.

  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 buttons 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 id="calculatorOutput" role="status"></p> is an HTML paragraph that will display the calculator values.

    The role="status" attribute is used for blind screen reader users. Screen readers announce the content of web pages and their changes so blind people can interact with them. When the numbers in the display change, their changes are automatically announced so blind users.


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

    Information the browser needs to display is organized in memory called the Document Object Model (DOM) and is accessed with the keyword "document".

    The getElementById("calculatorOutput") will get a reference to the element with the ID value of "calculatorOutput", which is the calculator <p> tag we are using for the number display.

    The .innerText gets a reference to the text inside of the <p> tag.

    Once we have reference to the display's innerText, we assign "=" the value passed in by the buttonValue parameter.

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;

}