Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Math Expression Solver</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      text-align: center;
    }
    
    .input-container {
      margin-bottom: 10px;
    }
    
    input[type="text"] {
      width: 300px;
      padding: 8px;
      font-size: 16px;
    }
    
    button {
      padding: 8px 16px;
      font-size: 16px;
    }
    
    #result {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
  <script type="text/javascript">
    async function solveExpression() {
      const expressionInput = document.getElementById('expression');
      const resultElement = document.getElementById('result');

      const expression = expressionInput.value;
      if (!expression) {
        resultElement.textContent = 'Please enter a valid expression.';
        return;
      }

      try {
        const result = await evaluateExpression(expression);
        resultElement.textContent = `Result: ${result}`;
      } catch (error) {
        resultElement.textContent = 'Error: Invalid expression.';
      }
    }

    function evaluateExpression(expression) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            const result = eval(expression);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
    }
    
    function clearInput() {
      const expressionInput = document.getElementById('expression');
      const resultElement = document.getElementById('result');
      
      expressionInput.value = '';
      resultElement.textContent = '';
    }
  </script>
</head>
<body>
  <h1>Math Expression Solver</h1>
  <div class="input-container">
    <input type="text" id="expression" placeholder="Enter a mathematical expression">
  </div>
  <div class="input-container">
    <button onclick="solveExpression()">Solve</button>
    <button onclick="clearInput()">Clear</button>
  </div>
  <p id="result"></p>
</body>
</html>
Editor is loading...