I've added a back button to my calculator with the idea that when someone presses it they can undo if they clicked the wrong number.

I've tried to solve using substr within an if statement in my calculate function but nothing seems to be happening it's as if it's not recording when the user clicks the button. To be honest I'm not sure this is the correct approach!

```js
//Create variable to hold display value, create variable of display area and populate.
let toShow = 0;
let displayValue = 0;
let displayArea = document.getElementById('result-display');
let dataType = document.querySelectorAll('[data-type]');
let operator = "";
let firstNumber = 0;
let secondNumber = 0;
let operatorPressed = false;
let secondNumberCounter = false;
let firstNumberCounter = false;
let buttonNumber = 0;
let decimalCounter = 0;
displayArea.innerHTML = 0;
/* displayArea.innerHTML += displayValue; */

//Basic math functions
add = (firstNumber, secondNumber) => firstNumber + secondNumber;
subtract = (firstNumber, secondNumber) => firstNumber - secondNumber;
multiply = (firstNumber, secondNumber) => firstNumber * secondNumber;
divide = (firstNumber, secondNumber) => firstNumber / secondNumber;

//Take an operator and two numbers and call a math function

operate = (operator, firstNumber, secondNumber) => {
  toShow = operator(firstNumber, secondNumber);
  return Math.round(toShow * 100) / 100;
};

//Update display with button clicked
const button = document.querySelectorAll('.item');
addEventListener('click', e => {
  calculate(e);
});

let calculate = (e) => {
  if (e.target.id === "equals" && secondNumber === 0) {
    displayArea.innerHTML = "OH HELL NO!";
  } else if (e.target.id === "equals") {
    decimalCounter = 0;
    switch (operator) {
      case "add":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(add, firstNumber, secondNumber);
      case "multiply":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(multiply, firstNumber, secondNumber);
      case "divide":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(divide, firstNumber, secondNumber);
      case "subtract":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(subtract, firstNumber, secondNumber);
    }
  }
  if (operatorPressed === true && e.target.dataset.type === "number") {
    if (secondNumberCounter === false) {
      displayArea.innerHTML = null;
    }
    if (decimalCounter === 0) {
      let secondButtonNumber = e.target.innerText;
      displayValue = secondButtonNumber;
      displayArea.innerHTML += displayValue;
      secondNumber = Number(displayArea.innerHTML);
      secondNumberCounter = true;
    }
  } else if (e.target.dataset.type === "nonNumber") {
    decimalCounter = 0;
    operator = e.target.id;
    firstNumber = Number(displayArea.innerText);
    operatorPressed = true;
  } else {
    if (e.target.id === "decimal" && decimalCounter === 0) {
      ++decimalCounter;
      buttonNumber = e.target.innerText;
      displayValue = buttonNumber;
      displayArea.innerHTML += displayValue;
      console.log(buttonNumber);
    } else {
      buttonNumber = Number(e.target.innerText);
      displayValue = buttonNumber;
      displayArea.innerHTML += displayValue;
      displayArea.innerHTML = Number(displayArea.innerHTML);
    }
  }
  if (e.target.id === "AC") {
    secondNumberCounter = false;
    operatorPressed = false;
    firstNumber = 0;
    secondNumber = 0;
    buttonNumber = 0;
    decimalCounter = 0;
    displayArea.innerHTML = 0;
  }
}
```

```css
body {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  width: 275px;
  height: 450px;
  border: 1px solid black;
}

.sub-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 95%;
  width: 800%;
}

.display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid white;
  width: 80%;
  height: 10%;
  margin: 5% 0 5% 0;
  color: white;
}

#result-display {
  margin-right: 8%;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 80%;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: black;
}

button {
  width: 100%;
  height: 100%;
}

footer {
  width: 100%;
  background-color: gray;
}

Make the calculator work! You’ll need to store the first number that is input into the calculator when a user presses an operator,
and also save which operation has been chosen and then operate() on them when the user presses the “=” key.
```

```html
<div class="container">
  <div class="sub-container">
    <div class="display">
      <p id="result-display">

      </p>
    </div>
    <div class="button-grid">
      <div>
        <button class="item" id="7" data-type="number">
7
</button>
      </div>
      <div>
        <button class="item" id="8" data-type="number">
8
</button>
      </div>
      <div>
        <button class="item" id="9" data-type="number">
9
</button>
      </div>
      <div>
        <button class="item" id="divide" data-type="nonNumber">
*/*
</button>
      </div>
      <div>
        <button class="item" id="4" data-type="number">
4
</button>
      </div>
      <div>
        <button class="item" id="5" data-type="number">
5
</button>
      </div>
      <div>
        <button class="item" id="6" data-type="number">
6
</button>
      </div>
      <div>
        <button class="item" id="multiply" data-type="nonNumber">
X
</button>
      </div>
      <div>
        <button class="item" id="1" data-type="number">
1
</button>
      </div>
      <div>
        <button class="item" id="2" data-type="number">
2
</button>
      </div>
      <div>
        <button class="item" id="3" data-type="number">
3
</button>
      </div>
      <div>
        <button class="item" id="subtract" data-type="nonNumber">
-
</button>
      </div>
      <div>
        <button class="item" id="0" data-type="number">
0
</button>
      </div>
      <div>
        <button class="item" id="decimal" data-type="number">
.
</button>
      </div>
      <div>
        <button class="item" id="AC" data-type="nonNumber">
AC
</button>
      </div>
      <div>
        <button class="item" id="add" data-type="nonNumber">
+
</button>
      </div>
      <div>
        <button class="item" id="equals" data-type="nonNumber">
=
</button>
      </div>
      <div>
        <button class="item" id="back" data-type="nonNumber">
<
</button>
      </div>
    </div>
  </div>
</div>
<div>

  <!-- User presses back button
preprend displayValue
displayValue remove one
displayArea.innerHTML remove one 
let str = 'Mozilla';
let smallStr = str.substr(0, str.length - 1);-->
```