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!

Các bài viết liên quan:

• 
  Tạo Hiệu Ứng Trái Tim Đầy Màu Sắc Khi Di Chuột bằng HTML, CSS
  và Javascript
  


• 
  Cách làm Video Slider đơn giản bằng HTML, CSS và
  Javascript
  


• 
  Input Validator đơn giản bằng HTML, CSS và Javascript
  


• 
  Animated Login Form đơn giản bằng HTML và CSS
  


• 
  Sticky Header On Scroll đơn giản bằng HTML, CSS và
  Javascript
  


• 
  Password Strength Checker đơn giản bằng HTML, CSS và
  Javascript
  

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!