Tạo máy tính cầm tay bằng JavaScript

Xây dựng ứng dụng máy tính đơn giản bằng Javascript, Tạo máy tính cầm tay bằng JavaScript. Bài viết này sẽ hướng dẫn chi tiết cách xây dựng một ứng dụng máy tính đơn giản bằng JavaScript

<style>
  /*<![CDATA[*/
#cal-container{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:Arial,sans-serif}
.calculator{width:300px;padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
#display{width:100%;margin-bottom:10px;padding:5px;font-size:18px}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px}
button{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:5px;background-color:#f4f4f4;cursor:pointer}
button:active{background-color:#ddd}
  /*]]>*/
</style>
<div id='cal-container'>
  <div class="calculator">
    <input type="text" id="display" readonly = 'true'/>
    <div class="buttons">
      <button onclick="clearDisplay()">C</button>
      <button onclick="appendToDisplay('/')">/</button>
      <button onclick="appendToDisplay('*')">x</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 onclick="calculate()">=</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
    </div>
  </div>
</div>
<script>
  //<![CDATA[
  let display = document.getElementById('display');
  let operators = ['+', '-', '*', '/'];
  let lastInputIsOperator = false;

  function appendToDisplay(value) {
    // Kiểm tra nếu giá trị là toán tử hoặc dấu chấm và nếu người dùng đã nhập một toán tử trước đó
    if ((operators.includes(value) || value === '.') && lastInputIsOperator) {
      // Không thêm gì cả
      return;
    }
    // Nếu giá trị không phải là toán tử hoặc dấu chấm, đặt lại biến lastInputIsOperator
    if (!operators.includes(value) && value !== '.') {
      lastInputIsOperator = false;
    }
    display.value += value;
    // Nếu giá trị là toán tử hoặc dấu chấm, đặt lastInputIsOperator thành true
    if (operators.includes(value) || value === '.') {
      lastInputIsOperator = true;
    }
  }

  function clearDisplay() {
    display.value = '';
    lastInputIsOperator = false;
  }

  function calculate() {
    try {
      display.value = eval(display.value);
    } catch (error) {
      display.value = 'Error';
    }
  }
  //]]>
</script>