ATiwari2000/task10.html

<!DOCTYPE html>
<html>
<head>
  <title>Task 10</title>
  
</head>
<body>
  <form>
    <label for="functionSelect">Select a function:</label>
    
    <select id="functionSelect">
      <option value="linear">Linear</option>
      <option value="inverse">Inverse</option>
      <option value="log">Log</option>
    </select>
    <br>
    <br>

    <label for="numberInput">Enter a number:</label>
    <input type="number" id="numberInput" required>

    <br>
    <br>

    <input type="submit" value="Submit" onclick="calculate(); return false;">

    <br>

    <div id="result"></div>

    <br>

    <pre id="jsonOutput"></pre>
  </form>
</body>

<script>
    function calculate() {
      var select = document.getElementById("functionSelect");
      var selectedFunction = select.value;
      var input = document.getElementById("numberInput");
      var number = parseFloat(input.value);

      if (selectedFunction === "inverse" && number === 0) 
      {
        alert("Wrong input: Cannot divide by zero.");
        return;
      }

      if (selectedFunction === "log" && (number <= 0 || isNaN(number))) {
        alert("Wrong input: Input must be a positive number.");
        return;
      }

      var result;
      if (selectedFunction === "linear") {
        result = number;
      } 
      else if (selectedFunction === "inverse") {
        result = 1 / number;
      } 
      else if (selectedFunction === "log") {
        result = Math.log(number);
      }

      document.getElementById("result").innerText = "Result: " + result;

      var formData = {
        function: selectedFunction,
        number: number,
        result: result
      };

      var jsonData = JSON.stringify(formData, null, 2);
      document.getElementById("jsonOutput").innerText = jsonData;
    }
  </script>
</html>