Calculator

Why was the math book sad?
Because it had too many problems.
Here's your calculator as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title>
    <style>
      body {
        background-color: #333;
        color: #fff;
      }

      .calculator {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        padding: 20px;
      }

      .calculator button {
        font-size: 25px;
        padding: 10px;
        background-color: #444;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
      }

      .calculator button:hover {
        background-color: #555;
      }

      .calculator button:active {
        background-color: #666;
      }

      .calculator button.operator {
        background-color: #f39c12;
        color: #333;
      }

      .calculator button.operator:hover {
        background-color: #ffa633;
      }

      .calculator button.operator:active {
        background-color: #ff9933;
      }

      .calculator input {
        font-size: 40px;
        background-color: #444;
        border: none;
        color: #fff;
        text-align: right;
        padding: 10px;
      }

      .calculator input:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="calculator">
      <input type="text" id="output" readonly>
      <button onclick="appendToInput('7')">7</button>
      <button onclick="appendToInput('8')">8</button>
      <button onclick="appendToInput('9')">9</button>
      <button class="operator" onclick="appendToInput('+')">+</button>
      <button onclick="appendToInput('4')">4</button>
      <button onclick="appendToInput('5')">5</button>
      <button onclick="appendToInput('6')">6</button>
      <button class="operator" onclick="appendToInput('-')">-</button>
      <button onclick="appendToInput('1')">1</button>
      <button onclick="appendToInput('2')">2</button>
      <button onclick="appendToInput('3')">3</button>
      <button class="operator" onclick="appendToInput('*')">*</button>
      <button onclick="appendToInput('0')">0</button>
      <button onclick="appendToInput('.')">.</button>
      <button onclick="clearInput()">C</button>
      <button class="operator" onclick="appendToInput('/')">/</button>
      <button onclick="calculate()">=</button>
    </div>

    <script>
      let input = document.getElementById('output');

      function appendToInput(val) {
        input.value += val;
      }

      function clearInput() {
        input.value = '';
      }

      function calculate() {
        let result = eval(input.value);
        input.value = result;
      }
    </script>

    <p>Why was the math book sad?</p>
    <p>Because it had too many problems.</p>

  </body>
</html>
```

Enjoy calculating and don't forget to laugh at the joke. :)