Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Advanced Calculator</title>
  <!-- Include Font Awesome library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .calculator {
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .calculator input {
      width: 100%;
      margin-bottom: 5px;
      padding: 10px;
      font-size: 18px;
      text-align: right;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .calculator button {
      width: 70px;
      height: 50px;
      font-size: 18px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      margin: 2px;
    }
    .calculator button.operator {
      background-color: #f0f0f0;
    }
    .icon {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="result" readonly>
    <button onclick="clearResult()"><i class="icon fas fa-times"></i>C</button>
    <button onclick="appendToResult('/')"><i class="icon fas fa-divide"></i></button>
    <button onclick="appendToResult('*')"><i class="icon fas fa-times"></i></button>
    <button onclick="appendToResult('7')">7</button>
    <button onclick="appendToResult('8')">8</button>
    <button onclick="appendToResult('9')">9</button>
    <button onclick="appendToResult('-')"><i class="icon fas fa-minus"></i></button>
    <button onclick="appendToResult('4')">4</button>
    <button onclick="appendToResult('5')">5</button>
    <button onclick="appendToResult('6')">6</button>
    <button onclick="appendToResult('+')"><i class="icon fas fa-plus"></i></button>
    <button onclick="appendToResult('1')">1</button>
    <button onclick="appendToResult('2')">2</button>
    <button onclick="appendToResult('3')">3</button>
    <button onclick="appendToResult('0')">0</button>
    <button onclick="appendToResult('.')"><i class="icon fas fa-dot-circle"></i></button>
    <button onclick="calculateResult()"><i class="icon fas fa-equals"></i></button>
    <button onclick="calculateSquareRoot()"><i class="icon fas fa-square-root-alt"></i></button>
    <button onclick="calculateExponent()"><i class="icon fas fa-superscript"></i></button>
    <button onclick="calculateSin()"><i class="icon fas fa-sin"></i></button>
    <button onclick="calculateCos()"><i class="icon fas fa-cos"></i></button>
    <button onclick="calculateTan()"><i class="icon fas fa-tan"></i></button>
  </div>

  <!-- Include Font Awesome JavaScript for icons -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
  
  <script>
    function appendToResult(value) {
      const resultInput = document.getElementById('result');
      resultInput.value += value;
      resultInput.focus();
    }

    function clearResult() {
      document.getElementById('result').value = '';
    }

    function calculateResult() {
      const resultInput = document.getElementById('result');
      try {
        const result = eval(resultInput.value);
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }

    function calculateSquareRoot() {
      const resultInput = document.getElementById('result');
      try {
        const result = Math.sqrt(eval(resultInput.value));
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }

    function calculateExponent() {
      const resultInput = document.getElementById('result');
      try {
        const result = eval(resultInput.value) ** 2;
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }

    function calculateSin() {
      const resultInput = document.getElementById('result');
      try {
        const result = Math.sin(eval(resultInput.value));
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }

    function calculateCos() {
      const resultInput = document.getElementById('result');
      try {
        const result = Math.cos(eval(resultInput.value));
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }

    function calculateTan() {
      const resultInput = document.getElementById('result');
      try {
        const result = Math.tan(eval(resultInput.value));
        resultInput.value = result;
      } catch (error) {
        resultInput.value = 'Error';
      }
    }
  </script>
</body>
</html>
Editor is loading...