Cách tạo một máy tính đơn giản bằng HTML, CSS và JavaScript

Chia sẻ kiến thức 12/02/2022

Hãy cùng FUNiX tìm hiểu cách tạo máy tính đơn giản của riêng bạn trong HTML, CSS và JS.

Table of Contents

Cách tốt nhất để học JavaScript là làm các dự án. Nếu bạn muốn trở thành một nhà phát triển web giỏi, bạn cần bắt đầu làm càng sớm càng tốt. Bạn có thể bắt đầu bằng cách xây dựng các dự án cấp độ mới bắt đầu như máy tính đơn giản, đồng hồ kỹ thuật số, đồng hồ bấm giờ, v.v.

Trong bài viết này, bạn sẽ học cách tạo một máy tính đơn giản bằng HTML, CSS và JavaScript. Máy tính này có thể thực hiện các phép toán cơ bản như cộng, trừ, nhân và chia.

Bắt đầu nào.

1. Các thành phần của Máy tính

Máy tính bao gồm các thành phần sau:

Toán tử (Mathematical Operators): Phép cộng (+), Phép trừ (-), Phép nhân (*) và Phép chia (/).

Nút chữ số và thập phân (Digits and Decimal Button): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ,. .

Màn hình hiển thị (Display Screen): Hiển thị biểu thức toán học và kết quả.

Nút Xóa màn hình (Clear Screen Button): Xóa tất cả các giá trị toán học.

Nút tính toán (=) (Calculate button) : Đánh giá biểu thức toán học và trả về kết quả.

2. Cấu trúc thư mục của Dự án Máy tính

Tạo một thư mục gốc chứa các tệp HTML, CSS và JavaScript. Bạn có thể đặt tên tệp bất kỳ thứ gì bạn muốn. Ở đây thư mục gốc được đặt tên là Calculator (Máy tính). Theo quy ước đặt tên tiêu chuẩn, các tệp HTML, CSS và JavaScript được đặt tên tương ứng là index.html, styles.css và script.js.

3. Mã HTML

Mở tệp index.html và dán mã sau:

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title> Simple Calculator using HTML, CSS and JavaScript </title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<table class = "calculator" >

<tr>

<td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>

<td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>

</tr>

<tr>

<td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>

<td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>

<td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>

<td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>

</tr>

<tr>

<td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>

<td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>

<td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>

<td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>

</tr>

<tr>

<td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>

<td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>

<td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>

<td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>

</tr>

<tr>

<td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>

<td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>

<td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>

<td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>

</tr>

</table>

<script type="text/javascript" src="script.js"></script>

</body>

</html>

Cấu trúc của máy tính được tạo bằng thẻ <table>. Thẻ <table> chứa năm hàng đại diện cho năm hàng của máy tính. Mỗi hàng được tạo bằng thẻ <tr>. Mỗi thẻ <tr> chứa các thẻ <td> (Table Data – Dữ liệu Bảng) giữ màn hình hiển thị và các nút của máy tính.

>>> Xem thêm: HTML (Hyper Text Markup Language) là gì? HTML được sử dụng làm gì?

4. Mã CSS

Mở tệp styles.css và dán mã sau:

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {

padding: 10px;

border-radius: 1em;

height: 380px;

width: 400px;

margin: auto;

background-color: #191b28;

box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.display-box {

font-family: 'Orbitron', sans-serif;

background-color: #dcdbe1;

border: solid black 0.5px;

color: black;

border-radius: 5px;

width: 100%;

height: 65%;

}

.button {

font-family: 'Orbitron', sans-serif;

background-color: #64278f;

color: white;

border: solid black 0.5px;

width: 100%;

border-radius: 5px;

height: 70%;

outline: none;

}

.button:active {

background: #e5e5e5;

-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;

-moz-box-shadow: inset 0px 0px 5px #c1c1c1;

box-shadow: inset 0px 0px 5px #c1c1c1;

}

CSS trên được sử dụng để tạo kiểu cho máy tính. Selector (bộ chọn) .class được sử dụng để chọn các phần tử có thuộc tính lớp cụ thể. Các class selector .calculator , .display-box và .button được sử dụng để định kiểu cấu trúc bảng, màn hình hiển thị và các nút tương ứng của máy tính. @import được sử dụng để nhập họ phông chữ Orbitron từ phông chữ Google.

>>> Xem thêm: Cách thay đổi kích thước phông chữ HTML trong CSS

5. Mã JavaScript

Mở tệp script.js và dán mã sau:

// This function clear all the values

function clearScreen() {

document.getElementById("result").value = "";

}

// This function display values

function display(value) {

document.getElementById("result").value += value;

}

// This function evaluates the expression and return result

function calculate() {

var p = document.getElementById("result").value;

var q = eval(p);

document.getElementById("result").value = q;

}

>>> Xem thêm: Cách tạo thanh menu di động bằng HTML, CSS và JavaScript

6. Hiểu mã JavaScript

Các hàm clearScreen(), display(), và calculate() được sử dụng để thêm chức năng vào Máy tính.

6.1 Xóa giá trị

Hàm clearScreen() truy cập DOM bằng cách sử dụng id của kết quả và xóa giá trị của nó bằng cách gán cho nó một chuỗi trống.

function clearScreen() {

document.getElementById("result").value = "";

}

6.2 Hiển thị giá trị

Hàm display() truy cập DOM bằng cách sử dụng id của kết quả và thêm giá trị của nút được nhấp vào kết quả.

function display(value) {

document.getElementById("result").value += value;

}

6.3 Đánh giá Biểu thức (expression)

Hàm calculate() truy cập DOM bằng cách sử dụng id của kết quả và đánh giá biểu thức bằng cách sử dụng hàm eval(). Giá trị đã đánh giá của biểu thức lại được gán cho kết quả.

Lưu ý: Hàm eval () được sử dụng trong JavaScript để đánh giá biểu thức được truyền cho nó dưới dạng tham số. Nó trả về kết quả được đánh giá của biểu thức toán học.

function calculate() {

var p = document.getElementById("result").value;

var q = eval(p);

document.getElementById("result").value = q;

}

Nếu bạn muốn xem toàn bộ mã nguồn được sử dụng trong bài viết này, đây là kho lưu trữ GitHub. Ngoài ra, nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn cũng có thể xem qua GitHub.

7. Phát triển các dự án lập trình thú vị

Bạn có thể nâng cao kỹ năng kỹ thuật của mình lên cấp độ tiếp theo bằng cách phát triển các dự án. Cho dù bạn là người mới bắt đầu hay bạn đang bắt đầu quay lại với việc viết mã sau một thời gian nghỉ ngơi, việc phát triển các dự án có thể tăng sự tự tin của bạn lên rất nhiều.

Cách tạo đồng hồ kỹ thuật số bằng HTML, CSS và JavaScript

>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:

>>> Xem thêm chuỗi bài viết liên quan:

FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy

Cách tạo Mẫu F và Z bằng HTML và CSS

Tạo biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScript

Cách tạo đồng hồ kỹ thuật số bằng HTML, CSS và JavaScript

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/build-a-simple-calculator-using-html-css-javascript/

ĐĂNG KÝ TƯ VẤN HỌC LẬP TRÌNH TẠI FUNiX

Bình luận (
0
)

Bài liên quan

Report Thị trường IT Việt Nam 2024 – 2025: Cơ hội, Thách thức và Động lực

9X Đà Nẵng thành mentor FUNiX vì ấn tượng mô hình học trực tuyến

Xu hướng chọn học gia sư trực tuyến của phụ huynh Việt

Trường Ban Mai đồng hành FUNiX ở chuỗi sự kiện hướng nghiệp

Chủ động thời gian - không gian học lập trình nhúng (Nguồn: Internet)

Báo cáo Việc làm và mức lương ngành công nghệ thông tin năm 2024

Chi tiết cách lập trình PHP bằng phần mềm Dreamweaver CC (Nguồn ảnh: Internet)

Tự học lập trình PHP có khó không? Ưu & Nhược điểm của phương pháp tự học

Lập trình viên PHP là gì? X kiến thức & kỹ năng cần nắm vững để ra nghề nhanh

Trí tuệ nhân tạo phim: Loại hình phim & Cách ứng dụng AI khi làm phim

Bài liên quan

Report Thị trường IT Việt Nam 2024 – 2025: Cơ hội, Thách thức và Động lực

Nguyễn Cúc 01/10/2024

Hồ Chí Minh, Việt Nam – TopDev hân hạnh công bố Báo cáo Thị trường IT Việt Nam năm 2024 – 2025 với chủ đề “Vietnam IT & Tech Talent Landscape”, một bản phân tích toàn diện về bối cảnh công nghệ...

9X Đà Nẵng thành mentor FUNiX vì ấn tượng mô hình học trực tuyến

Nguyễn Quỳnh Anh 10/06/2024

Nhiệt huyết trong công việc, anh Vương Dũng (29 tuổi, Đà Nẵng) là người "truyền lửa" giúp các học viên có thêm động lực trong học tập suốt hai năm qua.

Xu hướng chọn học gia sư trực tuyến của phụ huynh Việt

Nguyễn Quỳnh Anh 27/04/2024

Nhiều phụ huynh lựa chọn hình thức học gia sư trực tuyến cho con với ưu điểm như tiết kiệm thời gian và chi phí, linh hoạt lịch học, đảm bảo chất lượng với sĩ số 1-1.

Cách tạo một máy tính đơn giản bằng HTML, CSS và JavaScript

Hãy cùng FUNiX tìm hiểu cách tạo máy tính đơn giản của riêng bạn trong HTML, CSS và JS.

1. Các thành phần của Máy tính

2. Cấu trúc thư mục của Dự án Máy tính

3. Mã HTML

4. Mã CSS

5. Mã JavaScript