Hướng dẫn design a simple webpage for implementing a simple calculator using html, css javascript - thiết kế một trang web đơn giản để triển khai một máy tính đơn giản bằng html, css javascript

Cách tốt nhất để học JavaScript là xây dựng các dự án. Nếu bạn muốn trở thành một nhà phát triển web tốt, bạn cần bắt đầu tạo các dự án 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ố hoặc đồng hồ bấm giờ.

Bạn có thể tạo một máy tính đơn giản bằng cách sử dụng các công nghệ web lõi: HTML, CSS và JavaScript. Máy tính này có thể thực hiện các hoạt động toán học cơ bản như bổ sung, trừ, nhân và chia.

Các tính năng của máy tính

Trong dự án này, bạn sẽ phát triển một máy tính sẽ có các tính năng sau:

  1. Nó sẽ thực hiện các hoạt động số học cơ bản như bổ sung, trừ, chia và nhân.
  2. Nó sẽ thực hiện các hoạt động thập phân.
  3. Máy tính sẽ hiển thị Infinity nếu bạn cố gắng chia bất kỳ số nào cho 0.Infinity if you try to divide any number by zero.
  4. Nó sẽ không hiển thị bất kỳ kết quả nào trong trường hợp biểu thức không hợp lệ. Ví dụ, 5 ++ 9 sẽ không hiển thị bất cứ điều gì.
  5. Xóa tính năng màn hình để xóa màn hình hiển thị bất cứ lúc nào bạn muốn.

Mã được sử dụng trong dự án này có sẵn trong kho GitHub và miễn phí để bạn sử dụng theo giấy phép MIT. Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem bản demo này.

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ử toán học: Bổ sung (+), phép trừ (-), phép nhân (*) và chia (/).: Addition (+), Subtraction (-), Multiplication (*), and Division (/).

Các chữ số và nút thập phân: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,. .: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

Màn hình hiển thị: Nó hiển thị biểu thức toán học và kết quả.: It displays the mathematical expression and the result.

Nút màn hình rõ ràng: Nó xóa tất cả các giá trị toán học.: It clears all mathematical values.

Nút tính toán (=): Nó đánh giá biểu thức toán học và trả về kết quả.: It evaluates the mathematical expression and returns the result.

A calculator's basic components divided into the display and the key inputs.

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 cho các tệp bất cứ thứ gì bạn muốn. Ở đây thư mục gốc được đặt tên là 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 là index.html, styles.css và script.js tương ứng.Calculator. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

Folder structure of the calculator project

Mã HTML

Mở tệp index.html và dán mã HTML sau đây cho máy tính:index.html file and paste the following HTML code for the calculator:

<!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>

<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>

<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>

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

</body>

</html>

Dự án này sử dụng một thẻ để tạo cấu trúc tổng thể của máy tính. Thẻ chứa năm hàng đại diện cho năm phần ngang của máy tính. Mỗi hàng có một thẻ tương ứng. Mỗi thẻ chứa các thẻ giữ màn hình hiển thị và các nút của máy tính.

tag to create the overall structure of the calculator. The
tag contains five rows which represent five horizontal sections of the calculator. Each row has a corresponding tag. Each tag contains
tags which hold the display screen and buttons of the calculator.

Calculator Rows

Mã CSS

Mở tệp Styles.css và dán mã CSS sau đây cho máy tính:styles.css file and paste the following CSS code for the calculator:

@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%;
}
#btn {
background-color: #fb0066;
}
input[type=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;
}
input:active[type=button] {
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;
}

Các CSS trên tạo kiểu máy tính. Bộ chọn .Class trong CSS chọn các phần tử với một thuộc tính lớp cụ thể. Bộ chọn lớp .Calculator và .Display-Box Kiểu cấu trúc bảng và màn hình hiển thị của máy tính tương ứng. @Import Nhập các gia đình phông chữ Orbitron từ phông chữ Google..class selector in CSS selects elements with a specific class attribute. The .calculator and .display-box class selectors style the table structure and the display screen of the calculator respectively. @import imports the Orbitron font-family from Google fonts.

Mã JavaScript

Mở tệp script.js và thêm chức năng vào máy tính đơn giản bằng mã JavaScript sau:script.js file and add functionality to the simple calculator using the following JavaScript code:

// 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 returns result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

Hiểu mã JavaScript

Các hàm ClearScreen (), Display () và Tính toán () thêm chức năng cho máy tính. clearScreen(), display(), and calculate() functions add functionality to the Calculator.

Xóa các giá trị

Hàm ClearScreen () truy cập DOM bằ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. Bạn có thể sử dụng bộ chọn Dom để nhắm mục tiêu các thành phần khác nhau của một trang. clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string. You can use DOM selectors to target various components of a page.

function clearScreen() {
document.getElementById("result").value = "";
}

Hiển thị các giá trị

Hàm hiển thị () truy cập vào DOM bằng ID của kết quả và nối giá trị của nút nhấp vào kết quả.display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.

function display(value) {
document.getElementById("result").value += value;
}

Đánh giá biểu thức

Hàm tính toán () truy cập DOM bằng ID của kết quả và đánh giá biểu thức bằng hàm eval (). Giá trị được đánh giá của biểu thức một lần nữa được gán cho kết quả. calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.

Hàm JavaScript Eval () đánh giá một biểu thức mà bạn truyền cho nó. Nó trả về kết quả của biểu thức đó.eval() function evaluates an expression that you pass to it. It returns the result of that expression.

function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

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

Bạn có thể cải thiện kỹ năng mã hóa của mình 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 sẽ quay lại mã hóa sau một thời gian nghỉ. Tạo các ứng dụng hoạt động đầy đủ, thậm chí các ứng dụng đơn giản, có thể tăng cường sự tự tin của bạn.

Bạn có thể thử nhiều dự án đơn giản từ các trò chơi (cờ vua, tic-tac-toe, kéo giấy đá) đến các tiện ích đơn giản (danh sách việc cần làm, chuyển đổi trọng lượng, đồng hồ đếm ngược).

Nhận được bàn tay của bạn bẩn với các dự án này và trở thành một nhà phát triển tốt hơn.

Làm thế nào bạn sẽ tạo một máy tính đơn giản bằng cách sử dụng HTML CSS và JavaScript?

Bạn có thể sử dụng bộ chọn Dom để nhắm mục tiêu các thành phần khác nhau của một trang ...
hàm ClearScreen () {document.getEuityById ("result"). value = "";}.
Hiển thị hàm (Giá trị) {Document.GetEuityById ("Kết quả"). Giá trị += giá trị;}.
hàm tính toán () {var p = document.getEuityById ("result"). giá trị;var q = eval (p) ;.

Chúng ta có thể tạo máy tính bằng HTML và CSS không?

Để thiết kế máy tính cơ bản, chúng tôi sẽ sử dụng HTML, CSS và JavaScript.HTML được sử dụng để thiết kế cấu trúc cơ bản của máy tính.Các kiểu CSS được sử dụng để áp dụng các kiểu trên máy tính và JavaScript được sử dụng để thêm chức năng tính toán.. HTML is used to design the basic structure of the calculator. CSS styles are used to apply styles on the calculator and JavaScript is used to add the calculation functionality.

Làm thế nào một máy tính khoa học sử dụng HTML?

.
.
.
.
.
.