Calculator website

<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="calculator">
    <div class="display">
      <input type="text" id="result" disabled>
    </div>
    <div class="keys">
      <button onclick="clearResult()">C</button>
      <button onclick="appendSymbol('%')">%</button>
      <button onclick="appendSymbol('/')">÷</button>
      <button onclick="appendSymbol('*')">×</button>
      <button onclick="appendSymbol('7')">7</button>
      <button onclick="appendSymbol('8')">8</button>
      <button onclick="appendSymbol('9')">9</button>
      <button onclick="appendSymbol('-')">-</button>
      <button onclick="appendSymbol('4')">4</button>
      <button onclick="appendSymbol('5')">5</button>
      <button onclick="appendSymbol('6')">6</button>
      <button onclick="appendSymbol('+')">+</button>
      <button onclick="appendSymbol('1')">1</button>
      <button onclick="appendSymbol('2')">2</button>
      <button onclick="appendSymbol('3')">3</button>
      <button onclick="calculateResult()">=</button>
      <button onclick="appendSymbol('0')">0</button>
      <button onclick="appendSymbol('.')">.</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
.calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 10px;
}

.display {
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 5px;
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

button {
  font-size: 20px;
  padding: 5px;
}
let result = document.getElementById('result');

function appendSymbol(symbol) {
  result.value += symbol;
}

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

function calculateResult() {
  try {
    result.value = eval(result.value);
  } catch(error) {
    result.value = 'Error';
  }
}
Editor is loading...