Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phearak Tech Calculator</title>
  <style>
    /* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    /* Body Styling */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }

    /* Calculator Container */
    .calculator {
      background: #2c3e50;
      border-radius: 15px;
      box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
      padding: 20px;
      width: 320px;
    }

    /* Title Styling */
    .title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 20px;
    }

    /* Display Screen */
    .display {
      background: #34495e;
      color: #ffffff;
      font-size: 2em;
      text-align: right;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Buttons Grid */
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    /* Button Styling */
    .buttons button {
      background: #3498db;
      color: #ffffff;
      font-size: 1.5em;
      border: none;
      border-radius: 10px;
      padding: 20px;
      cursor: pointer;
      transition: background 0.3s, transform 0.1s;
    }

    .buttons button:hover {
      background: #2980b9;
    }

    .buttons button:active {
      transform: scale(0.95);
    }

    /* Special Buttons (AC and =) */
    .buttons .clear {
      background: #e74c3c;
      grid-column: span 2;
    }

    .buttons .clear:hover {
      background: #c0392b;
    }

    .buttons .equal {
      background: #2ecc71;
      grid-column: span 2;
    }

    .buttons .equal:hover {
      background: #27ae60;
    }

    /* Operator Buttons */
    .buttons .operator {
      background: #f39c12;
    }

    .buttons .operator:hover {
      background: #e67e22;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <!-- Title -->
    <div class="title">Phearak Tech</div>

    <!-- Display Screen -->
    <div class="display" id="display">0</div>

    <!-- Buttons -->
    <div class="buttons">
      <button class="clear" onclick="clearDisplay()">AC</button>
      <button onclick="appendToDisplay('/')">/</button>
      <button onclick="appendToDisplay('*')">*</button>
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('+')">+</button>
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button class="equal" onclick="calculateResult()">=</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
    </div>
  </div>

  <script>
    // Function to append value to the display
    function appendToDisplay(value) {
      const display = document.getElementById('display');
      if (display.textContent === '0' && value !== '.') {
        display.textContent = value;
      } else {
        display.textContent += value;
      }
    }

    // Function to clear the display
    function clearDisplay() {
      document.getElementById('display').textContent = '0';
    }

    // Function to calculate the result
    function calculateResult() {
      const display = document.getElementById('display');
      try {
        display.textContent = eval(display.textContent);
      } catch (error) {
        display.textContent = 'Error';
      }
    }
  </script>
</body>
</html>
Editor is loading...