Calculator Project

Given the following HTML and CSS that creates the calculator to the right, add script to populate the buttons.

The HTML

This HTML creates the layout for buttons in 4 rows of 4 buttons. There is some script below the HTML to handle the button actions.

The CSS

The CSS below places the display and buttons horizontally across the calculator. The white buttons are intended to be for digits. The light-blue buttons are intended to be for the operations, addition, subtraction, multiplication, and division. Clear and equals round out the light-blue buttons.

The button array starts at the top-left and runs from left to right for each row. For the first row, there are 3 digits, then 1 operator. Same for the second and third rows. For the fourth row, there is 1 operator, 1 digit, then 2 more operators.

The Code

Arrays

Since JavaScript arrays are zero-based, the button indexes are numbered 0 through 15.

Here is an example array for each character that represents each of the 16 buttons:

const buttonTexts = ["1", "2", "3", "+", "4", "5", "6", "-", "7", "8", "9", "*", "C", "0", "=", "/"];
              

Another way to write this array will make it more obvious how the buttons are intended to be arranged:

const buttonTexts = [ "1", "2", "3", "+",
                      "4", "5", "6", "-",
                      "7", "8", "9", "*",
                      "C", "0", "=", "/" ];
              

Buttons

The buttons themselves are represented by HTML div elements. An array of the buttons can be retrieved with this code:

const buttons = document.querySelectorAll(".button");
              

Like the array for the buttonTexts above, the button array has 16 elements indexed 0 through 15.

For Loops

Using a for-loop, we can loop through the buttons to set their text to the cooresponding character in the buttonTexts array. Here is an example:

for (let i = 0; i < buttons.length; i++) {
  const button = buttons[i];
}
              

We can use that same loop to retrieve each buttonText as well:

for (let i = 0; i < buttons.length; i++) {
  const button = buttons[i];
  const buttonText = buttonTexts[i];
}

Putting it all together, we can set the button text with the buttonText character like so:

for (let i = 0; i < buttons.length; i++) {
  const button = buttons[i];
  const buttonText = buttonTexts[i];
  buttonText.innerHTML = buttonText;
}

Functions

Functions are written with the following structure,

function myfunction() {
  // some code here:
  console.log("hello");
}

The example function above is referred to as a "no-args" function.

Functions can optionally have 1 or more arguments that are variables avaiable to the function,

function myfunction(message, name) {
  console.log(message + " " + name);
}

Functions are called by their name and arguments,

  myfunction("hello", "bob");

This function call results in "hello bob" being printed to the console window.

Function can also return a value,

function myfunction(message, name) {
  return message + " " + name;
}

Calling this function will also result in "hello bob" being printed to the console, but using the return value instead,

const value = myfunction("hello", "bob");
console.log(value);

Putting it all together

In the editor below, create a function to populate the buttons, between the script tags, with digits 0 through 9 as well as the operation buttons for +, -, *, /, C, and =, using the following steps:

1. Declare a variable named "buttonTexts" that contains the text for each button
2. Declare a variable named "buttons" that contains the buttons divs
3. Create a function named "fillButtons" that is a no-args function
4. Inside of the "fillButtons" function, use a for-loop to set the button text for each button
5. Call the "fillButtons" function
6. Click the "Run" button when your code is ready
7. Your calculator should now be functional

const buttonTexts = [ "1", "2", "3", "+",
                      "4", "5", "6", "-",
                      "7", "8", "9", "*",
                      "C", "0", "=", "/" ];

const buttons = document.querySelectorAll(".button");

function fillButtons() {
  for (let i = 0; i < buttons.length; i++) {
    const button = buttons[i];
    const buttonText = buttonTexts[i];
    button.innerHTML = buttonText;
  }
}

fillButtons();