Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

#javascript #html #alias
create calculator with javacript
Xin chào các bạn, tron g video này mình sẽ hướng dẫn các bạn tạo máy tính đơn giản để cộng trừ nhân chia với javascript nhá
Link group học code:
Link facebook cá nhân:
Link website:
Link đăng kí kênh để nhận video free:
Đội ngũ Alias chuyên support IT cho các bạn ở đại học FPT Hà Nội – Ngoài ra còn support IT cho các bạn ở đại học Quốc Gia và Bách Khoa…
Channel hướng dẫn các bạn lập trình C, C#, C++, Java, Java desk, Java Web, jsp – servlet, web service, asp.net đồng thời hướng dẫn các bạn các thủ thuật hữu ích giúp cuộc sống đơn giản và dễ dàng hơn.
Nếu nhạc nền bị gặp vấn đề bản quyền. Mong các bạn gửi mail tới [email protected] Mình sẽ trả lời lại trong vòng 2h ạ.
#laptrinh
#code
#java
#c
#javascript
#html
#css

Tag: tai may tinh cong tru nhan chia, alias, lập trình, code, coder, sql server, lập trình c, lập trình java, lập trình web, fpt, fu, đại học fpt, english, japanese, html, css, java, code c, c#, sql

Xem thêm: https://tảimiễnphí.vn/category/cong-nghe

Nguồn: https://tảimiễnphí.vn

Tạo máy tính + - * / trong Javascript - Tạo máy tính căn bản cộng trừ nhân chia bằng Javascript - Sử dụng function trong Javascript

by GokiSoft.com - 20:01 05/09/2022 20,573 Lượt Xem

Short URL: https://gokisoft.com/1622

Viết danh sách các hàm sau :

- hàm cộng, trừ, nhân, chia với 2 tham số đầu vào

- Nhập 2 giá trị đầu vào a, b thông qua prompt và biểu thức tính toán +,-,*,/

- Tính kết quả và in ra màn hình.

Chú ý: để nhập a thông qua hàm prompt chúng ta làm theo cách sau

a = prompt('Nhập giá trị a')

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook


Thông Tin Liên Hệ

Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.

Website: https://ziczacvn.com

SĐT: 096 - 70 25 996

Email:

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

HTML5-T6 javascript function in javascript T2008A C2010G |Khai báo biến & hàm mặc định trong Javascript| js_online C2108L C2108G3 C2110I C2110L C2206L Today_C2206L

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn xây dựng ứng dụng calculator với html, css và js.
Các chức năng chính:

  • Các phép tính cơ bản cộng, trừ, nhân, chia.
  • Dark & light mode
  • Xem lại lịch sử các phép tính.

Mục Đích Bài Viết

Đây không phải là một ứng dụng gì quá mới mẻ cả nhưng khi vào tay mình thì sẽ có cái mới riêng kkkk.
Nhưng mình vẫn muốn chia sẻ để giúp các bạn beginner nắm kĩ hơn các kiến thức về javascript cũng như cảm thấy hứng thú hơn khi vừa được học và làm những pet project.

Bắt Đầu Thôi Nào

Lên Ý Tưởng

Ý tưởng cho project này cũng không có gì quá phức tạp, các bạn tham khảo hình ảnh ở dưới nha.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Cấu Trúc Thư Mục Cho Dự Án

Cấu trúc thư mục cho project này cũng đơn giản thôi hihihi
Ví dụ: Mình sẽ tạo một folder project với tên là Calculator with js. Trong folder đó các bạn tạo cho mình một file index.html, 1 folder css & js để chứa lần lượt các file đó là style.css và script.js

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Bắt Đầu Code Thôi

1. Chức Năng Tính Toán Cơ Bản

1.1 Code HTML

Trong phần html này ta sẽ tạo một .container-grid để bao bọc toàn bộ calculator tiếp theo là một .result dùng để hiển thị kết quả tính toán và cuối cùng là các số và phép tính cần có để tính toán.
Bạn tạo cho mình các event onclick dùng để thực hiện các chức năng tính toán.
Các bạn tham khảo code ở dưới nha mục đích mà mình đưa ảnh lên đây để các bạn tự code theo chớ không phải là copy nó giúp ích rất nhiều trong quá trình học.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

1.2 Code Javascript

Đây là phần mà có thể nói là quan trọng nhất, nếu mà bình thường thì html -> css -> js nhưng hôm nay mình thay đổi một tí thì mình sẽ code js trước.
Mình sẽ code xong các chức năng tính toán cơ bản rồi mới css cho nó nha.
Trước tiên các bạn import file js vào trong file index.html trước cái đã:
<script src="js/script.js"></script>
Trong phần này sẽ gồm các chức năng chi tiết như sau:
Hiển thị chữ số và kết quả phép toán
DEL (xóa các số cuối cùng) và AC (xóa toàn bộ)
Thực hiện các phép tính

1.3 Code CSS

Như các bạn đã thấy ở trên khi chúng ta chưa css cho nó thì nhìn khá là củ chuối đúng không nào, vậy bây giờ chúng ta bắt đầu css thôi nào.
Đầu tiên các bạn cần import cho mình file css vào trước đã nha:
<link rel="stylesheet" href="css/style.css" />
Bây giờ cái mà quan trọng nhất ở đây là việc chia layout như nào cho hợp lý. Thì mình sẽ sử dụng CSS Grid để chia layout cho nó (mình có viết một bài về grid tại đây các bạn tham khảo nha.)
Mình sẽ chia layout như sau các bạn xem ảnh ở dưới nha:
Với .container-grid mình chia làm 2 hàng với kích thước tương ứng. Trong đó .calculate mình sẽ chia ra làm 2 cột với mỗi cột lần lượt là 3 cột / 4 hàng và 2 cột / 4 hàng

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Và dưới đây là toàn bộ code CSS
Các bạn có thể tham khảo và cũng như tự mình code tùy theo khả năng sáng tạo của mình nha.
Như các bạn đã thấy ở dưới thì mình có khai báo một số thuộc tính như: màu font, màu nền,... trong html với mục đích dễ dàng tái sử dụng và thay đổi bonus thêm thì khi viết như thế thì khi code chức năng dark & light mode sẽ dễ dàng hơn.
Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Còn đây là kết quả khi chúng ta đã hoàn thành xong chức năng tính toán cơ bản, nhìn cũng ra gì phết đấy hihi =)))
Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

2. Chức Năng Dark & Light Mode

2.1 Code HTML

Trong code html này các bạn thêm cho mình một data-attribute với tên data-theme và value là light vào bên trong thẻ mở <html>.
Tiếp theo phía dưới .grid-container bạn thêm cho mình một class là heading. Bên trong heading sẽ là nơi chứa các icon như mình đã lên ý tưởng từ trước.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

2.2 Code CSS

Để mà có thể chia được layout cho heading thì trong class grid-container các bạn thêm cho mình một hàng nữa vào thuộc tính grid-template-rows
grid-template-rows: .5fr 1fr 5fr;
Tiếp theo mình chỉ cần thêm một số thuộc tính như: màu nền, màu chữ vào thẻ attribute selector đó là html[data-theme='dark'] để có thể làm thay đổi được chế độ dark & light cho các element. Và dưới đây là code css cho chứ năng này các bạn tham khảo nha.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Giao diện của chức năng dark & light mode
Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

2.3 Code Javascript

Trong phần này các bạn chỉ cần bắt sự kiện checked thì nó sẽ setAttribute tương ứng là được.
Mình sẽ giải thích rõ hơn một chút đó là mình sẽ gọi hàm checkbox rồi add event change cho nó. Data-attribute mặc định là light khi checked thì sẽ change thành dark, documentElement ở đây nó sẽ trả là là <html> element.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Và đây là kết quả khi chúng ta hoàn thành chức năng dark & light mode
Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

3. Chức Năng Xem Lại Lịch Sử Tính Toán

3.1 Code HTML

Trong class heading các bạn thêm cho mình một đoạn code nhỏ để chứa icon history và kết quả lưu history.

            <span>
                <i class="fas fa-history">
                    <div id="history"></div>
                </i>
            </span>
3.2 Code Javascript

Mình sẽ sử dụng object và array để làm công đoạn lưu trữ lịch sử tính toán nay, thì chắc các bạn cũng đã hình dung ra được là mình sẽ làm như nào rồi nhờ.
Mình sẽ nói sơ qua một chút nha, trước hết mình sẽ tạo một array empty để lưu các biểu thức và kết quả tính toán. Sau đó ta chỉ get và render ra view là được rồi, các bạn xem ảnh ở dưới mình có giải thích chi tiết hơn í.

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Chúng ta cùng xem thử nó đã lưu được lịch sử chưa nha hihi
Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

3.3 Code CSS

Như các bạn đã thấy ở trên khi ta lưu lịch sử thì bị vỡ layout ngay vậy bây giờ chúng ta làm như nào nhờ?
Oke mình đã có bây giờ ta chỉ cần ẩn lịch sử đó đi và chỉ khi nào click vào icon history thì mới hiển thị.

#history {
    display: none;
    position: absolute;
    z-index: 9999;
    background: #5d4196;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem;
    margin-top: .5rem;

}

// class hiển thị history
.indexHistory {
    display: block !important;
}

Dưới đây là code js để khi click vào icon thì sẽ add class để hiển thị lịch sử

// Index History
let indexHistory = document.getElementsByClassName("fa-history")
indexHistory[0].addEventListener("click", function () {
    logHistory.classList.toggle("indexHistory")
})

Và dưới là kết quả khi chúng đã hoàn thành lưu trữ lịch sử <3

Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript

Vậy là xong rồi nha, các bạn tham khảo code mà mình đã push lên github tại đây nha.

Lời Kết

Vậy là xong bài Xây Dựng Ứng Dụng Calculator Với Javascript. Mình mong muốn bài này sẽ giúp các bạn beginer hiểu, nắm rõ hơn và có cảm giác thú vị hơn khi học js.
Các bạn nhớ like và theo dõi fanpage Thanh Long Dev để nhận những thông báo về bài viết mới nhất nha.
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.
Chúc Các Bạn Thành Công!!

Tải thêm tài liệu liên quan đến bài viết Làm máy tính(calculator) cộng trừ nhân chia đơn giản với javascript