Untitled

<html class="">
  <head>
    <title>Income Calculator</title>
    <style>
      /* Add some styling to make the calculator look nice /
      .calculator {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .calculator input[type="text"] {
        width: 200px;
        height: 30px;
        font-size: 18px;
        margin: 10px 0;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .calculator input[type="button"] {
        width: 100px;
        height: 30px;
        font-size: 18px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #eee;
        cursor: pointer;
      }

      .calculator input[type="button"]:hover {
        background-color: #ddd;
      }

      .calculator .result {
        margin: 20px 0;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <script>
      const calculate = () => {
        // Get the user's annual income
        var income = document.getElementById("income").value;

        // Multiply the income by 25
        var result = income 25;

        // Display the result
        document.getElementById("result").innerHTML = "Result:" + result;
      };
    </script>
    <div class="calculator">
      <!-- Add a form for the user to input their annual income -->
      <form>
        <label for="income">Annual Income:</label>
        <input type="text" id="income" name="income" />
      </form>

      <!-- Add a button to trigger the calculation -->
      <input type="button" value="Calculate" onclick="calculate()" />

      <!-- Add an element to display the result -->
      <div class="result">Result: <span id="result">0</span></div>
    </div>

    <!-- Add the JavaScript code to perform the calculation -->
  </body>
</html>
Editor is loading...