1. Tạo ứng dụng máy tính bỏ túi bằng VSCode
- Bước 1: Truy cập công cụ Visual Studio Code (VSCode) online qua đường dẫn: https://vscode.dev/
- Bước 2: Tạo trong ổ đĩa bất kỳ trong laptop của các bạn một thư mục, đặt tên là calculator-app (hoặc tên tùy ý)
- Bước 3: Mở công cụ VSCode -> dẫn đường dẫn tới thư mục calculator-app vừa tạo ở bước 2
- Bước 4: Tạo trong thư mục calculator-app 3 tập tin: index.html, script.js, style.css
- Bước 5: Bắt đầu code ứng dụng của chúng ta ở file index.html
2. Bố cục ứng dụng máy tính bỏ túi với HTML
Khung ứng dụng máy tính bỏ túi là dạng một trang web, vì vậy chúng ta sẽ bắt đầu mã nguồn ứng dụng với một cặp thẻ <html></html>
Trong cặp thẻ <html></html> sẽ không thể thiếu 2 cặp thẻ chính đó là <head></head> và <body></body>. Mã nguồn trang web ban đầu sẽ như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Calculator</title>
</head>
<body>
<!-- We will code here -->
<script src="script.js"></script>
</body>
</html>Đoạn code ở trên có 2 thẻ cần lưu ý:
– Thẻ <link rel=”stylesheet” href=”style.css”/> để dẫn đường dẫn tới tập tin style.css chứa mã CSS dùng để định dạng kiểu dáng, phong cách cho ứng dụng đẹp hơn là chỉ có mỗi HTML.
– Thẻ <script src=”script.js”></script> để dẫn đường dẫn tới tập tin script.js chứa mã JavaScript dùng để hiện thực các chức năng tính toán khi người dùng tương tác với giao diện của ứng dụng.
Tiếp theo, chúng ta thêm 5 cặp thẻ <div> như đoạn mã dưới đây vào bên trong cặp thẻ <body> để hình thành phần khung giao diện ứng dụng máy tính bỏ túi
<div class="container">
<div class="calculator">
<div class="display-screen">
<div id="display"></div>
</div>
<div class="buttons">
<!-- Bàn phím máy tính bỏ túi -->
</div>
</div>
</div>Trong cặp thẻ <div class=”buttons”>, chúng ta sẽ sử dụng cặp thẻ <table></table> để tạo các nút cần thiết cho bàn phím của ứng dụng máy tính bỏ túi của chúng ta với đoạn code sau:
<table>
<tr>
<td><button class="btn-operator" id="clear">C</button></td>
<td><button class="btn-operator" id="/">÷</button></td>
<td><button class="btn-operator" id="*">×</button></td>
<td><button class="btn-operator" id="backspace"><</button></td>
</tr>
<tr>
<td><button class="btn-number" id="7">7</button></td>
<td><button class="btn-number" id="8">8</button></td>
<td><button class="btn-number" id="9">9</button></td>
<td><button class="btn-operator" id="-">-</button></td>
</tr>
<tr>
<td><button class="btn-number" id="4">4</button></td>
<td><button class="btn-number" id="5">5</button></td>
<td><button class="btn-number" id="6">6</button></td>
<td><button class="btn-operator" id="+">+</button></td>
</tr>
<tr>
<td><button class="btn-number" id="1">1</button></td>
<td><button class="btn-number" id="2">2</button></td>
<td><button class="btn-number" id="3">3</button></td>
<td rowspan="2">
<button class="btn-equal" id="equal">=</button>
</td>
</tr>
<tr>
<td><button class="btn-operator" id="(">(</button></td>
<td><button class="btn-number" id="0">0</button></td>
<td><button class="btn-operator" id=")">)</button></td>
</tr>
</table>3. Định dạng kiểu dáng, phong cách ứng dụng máy tính bỏ túi với CSS
Thiết lập một số thuộc tính mặc định ban đầu cho cả trang web với bộ chọn * qua đoạn mã sau
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}Cài đặt phông chữ, hình nền dùng chung cho toàn bộ ứng dụng với 2 thuộc tính quen thuộc là font-family và background-image
body {
font-family: sans-serif;
background-image: linear-gradient( to bottom right, rgba(79,51,176,1.0),rgba(210,53,165));
}Khai báo khuôn mẫu ứng dụng sẽ nằm trong một thùng chứa dạng lưới để thiết lập chiều rộng, chiều cao, vị trí của ứng dụng máy tính bỏ túi
.container {
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}Định dạng kiểu dáng, vị trí dùng chung cho toàn bộ các thành phần trên ứng dụng máy tính này qua thuộc tính position, height, width, padding,…như sau:
.calculator {
position: relative;
height: auto;
width: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 30px #000;
background-color: #fff;
}Tiếp tục tạo kiểu dáng cho màn hình hiện số của máy tính bỏ túi thông qua bộ chọn id là display và định dạng màn hình này dang với bố cục flexbox, ẩn thanh cuộc ngang đi cho đẹp với các đoạn mã CSS sau:
#display {
margin: 0 10px;
height: 150px;
width: auto;
max-width: 270px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 30px;
margin-bottom: 20px;
overflow-x: scroll;
}
#display::-webkit-scrollbar {
display: block;
height: 3px;
}Tạo kiểu dáng cho các nút trên bàn phím máy tính bỏ túi và thêm một vài hiệu ứng hoạt động giúp tăng trải nghiệm của người dùng khi tương tác với các thuộc tính như cursor, transition, :hover trong đoạn mã tinh gọn như sau
button {
height: 60px;
width: 60px;
border: 0;
border-radius: 30px;
margin: 5px;
font-size: 20px;
cursor: pointer;
transition: all 200ms ease;
}
button:hover {
transform: scale(1.1);
}
button#equal {
height: 130px;
}Tô thêm nhiều màu sắc cho các nút bấm theo từng loại khác nhau như các nút số, nút toán tử, nút xóa,…với 2 thuộc tính quen thuộc đó là background-color, color như sau:
.calculator #display {
color: #0a1e23;
}
.calculator button#clear {
background-color: #ffd5d8;
color: #fc4552;
}
.calculator button.btn-number {
background-color: #c3eaff;
color: #000000;
}
.calculator button.btn-operator {
background-color: #ffd0fb;
color: #f967f3;
}
.calculator button.btn-equal {
background-color: #adf9e7;
color: #000;
}4. Hiện thực các chức năng máy tính bỏ túi với JavaScript
Có 2 nhóm giao diện mà JavaScript cần tương tác chính lên đó là màn hình hiển thị các phép tính toán và các nút bấm.
Ví vậy, chúng ta cần lấy ra các thẻ đang nắm giữ 2 thành phần giao diện này và gán vào 2 biến display, buttons dùng để xử lý trong các tác vụ tiếp sau đó qua đoạn mã đơn giản sau:
const display = document.querySelector("#display");
const buttons = document.querySelectorAll("button");Tạo vòng lặp để bắt sự kiện khi có các nút bấm được người dùng tương tác cùng một lúc để thực hiện một phép tính toán gì đó. Và chúng ta sẽ sử dụng vòng lặp forEach như sau:
buttons.forEach((item) => {
// Xử lý các sự kiện ở đây
});Bên trong vòng lặp forEach này, chúng ta sẽ tiếp tục bắt từng trường hợp khi người dùng bấm vào từng nút trên bàn phím ứng dụng với sự kiện onclick như cú pháp sau:
buttons.forEach((item) => {
item.onclick = () => {
// Bất các trường hợp nút được bấm ở đây
};
});Bên trong vòng lặp forEach này, chúng ta sẽ tiếp tục bắt từng trường hợp khi người dùng bấm vào từng nút trên bàn phím ứng dụng và hiển thị ra màn hình máy tính bỏ túi cho người dùng thấy thông qua cấu trúc điều kiện if-else như sau:
if (item.id == "clear") {
display.innerText = "";
} else if (item.id == "backspace") {
let string = display.innerText.toString();
display.innerText = string.substr(0,string.length - 1);
} else if (display.innerText != "" && item.id == "equal") {
display.innerText = eval(display.innerText);
} else if (display.innerText == "" && item.id == "equal") {
display.innerText = "Empty!";
setTimeout(() => (display.innerText = ""), 2000);
} else {
display.innerText += item.id;
}
