HTML: 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
      <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 onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button onclick="calculateResult()">=</button>
      <button onclick="appendToDisplay('+')">+</button>
      <button onclick="clearDisplay()">C</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS: 

  body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.calculator {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
}

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

button {
  padding: 15px;
  font-size: 18px;
  cursor: pointer;
}

JAVASCRIPT: 

  let displayValue = '';

function appendToDisplay(value) {
  displayValue += value;
  document.getElementById('display').value = displayValue;
}

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

function clearDisplay() {
  displayValue = '';
  document.getElementById('display').value = '';
}

Try to answer about this code:

Which HTML tag is used for creating an input field that cannot be edited by the user?

<input type="readonly">
<input type="text" readonly>

<input type="text" disabled>
<input type="readonly" disabled>

What does the eval() function in JavaScript do in the provided code?

It evaluates an expression and returns a string.
It executes code contained in a string.

It calculates complex mathematical formulas.
It creates a new variable from a string.

Which element in the HTML code is responsible for performing addition in the calculator?

<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('+')">+</button>

<button onclick="calculateResult()">=</button>
<button onclick="clearDisplay()">C</button>

What is the purpose of the readonly attribute in the input field of the calculator?

It allows users to input numbers only.
It restricts user input and allows only programmatic changes.

It prevents users from entering any value.
It enables users to edit the displayed value.