Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript

Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript

Trong thời đại số hóa ngày nay, việc tạo ra một ứng dụng máy tính bỏ túi trở nên dễ dàng hơn bao giờ hết. Với sự kết hợp của HTML, CSS, và JavaScript, chúng ta có thể xây dựng một công cụ tính toán đơn giản ngay trên trình duyệt web của mình. Trong bài viết này, chúng ta sẽ khám phá cách tạo một máy tính bỏ túi tiện lợi và thú vị chỉ bằng vài dòng mã và một chút sáng tạo. Hãy cùng nhau bắt đầu hành trình này!

Bước 1: Thêm HTML


<form name="calc" class="calculator">
  <div class="screen">
    <input type="text" class="display" name="display" readonly>
    <input type="text" class="result" name="result" readonly>
  </div>
  <span class="btn clear" onclick="handleClear()">c</span>
  <span class="btn" onclick="handleBack()"><i class="fa-regular fa-circle-left"></i></span>
  <span class="btn" onclick="document.calc.display.value += '/'">/</span>
  <span class="btn" onclick="document.calc.display.value += '7'">7</span>
  <span class="btn" onclick="document.calc.display.value += '8'">8</span>
  <span class="btn" onclick="document.calc.display.value += '9'">9</span>
  <span class="btn" onclick="document.calc.display.value += '*'">*</span>
  <span class="btn" onclick="document.calc.display.value += '4'">4</span>
  <span class="btn" onclick="document.calc.display.value += '5'">5</span>
  <span class="btn" onclick="document.calc.display.value += '6'">6</span>
  <span class="btn" onclick="document.calc.display.value += '-'">-</span>
  <span class="btn" onclick="document.calc.display.value += '1'">1</span>
  <span class="btn" onclick="document.calc.display.value += '2'">2</span>
  <span class="btn" onclick="document.calc.display.value += '3'">3</span>
  <span class="btn" onclick="document.calc.display.value += '+'">+</span>
  <span class="btn" onclick="document.calc.display.value += '00'">00</span>
  <span class="btn" onclick="document.calc.display.value += '0'">0</span>
  <span class="btn" onclick="document.calc.display.value += '.'">.</span>
  <span class="btn" onclick="handleCalculator()">=</span>
</form>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
}

.calculator {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
}

.calculator .screen {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.calculator .screen .display,
.calculator .screen .result {
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    padding-top: 32px;
    font-size: 18px;
}

.calculator .screen .result {
    padding-top: 0;
}

.calculator span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 60px;
    color: #333;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: all 0.3s;
    user-select: none;
}

.calculator span:active {
    background-color: #bae6fd;
}

.calculator span.clear {
    grid-column: span 2;
    width: 100%;
    color: #fff;
    background-color: #3b82f6;
}

.calculator span.clear:active {
    opacity: 0.7;
}

Bước 3: Thêm Javascript


const display = document.querySelector('.display');
const result = document.querySelector('.result');

function handleClear() {
  display.value = '';
  result.value = '';
}

function handleBack() {
  if(display.value && display.value !== '') {
    display.value = display.value.slice(0, display.value.length - 1);
  }
}

function handleCalculator() {
  result.value = eval(display.value);
}

Full tutorial:


Hoàn thành

Trong khi bài hướng dẫn này chỉ tạo ra một máy tính bỏ túi đơn giản, nhưng nó là một bước khởi đầu tuyệt vời để khám phá thế giới của phát triển web. Qua việc kết hợp HTML, CSS và JavaScript, chúng ta đã có cơ hội tiếp cận với sức mạnh của công nghệ web và khả năng tạo ra các ứng dụng thú vị. Hãy tiếp tục học hỏi và phát triển kỹ năng của bạn trong lĩnh vực này, và bạn có thể xây dựng những ứng dụng phức tạp hơn trong tương lai.

Hy vọng rằng bạn đã tận hưởng hành trình này và đã học được ít nhất một điều mới từ bài hướng dẫn này. Chúc bạn thành công và sáng tạo trong việc phát triển ứng dụng web của riêng mình!

No comments:

Powered by Blogger.