Hướng dẫn tip calculator html - mẹo máy tính html
Giới Thiệu ChungHô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 chức năng chính: Show Nội dung chính ShowShow
Mục Đích Bài ViếtBắt Đầu Thôi Nào Bắt Đầu Thôi NàoLên Ý TưởngCấu Trúc Thư Mục Cho Dự Án Cấu Trúc Thư Mục Cho Dự ÁnBắt Đầu Code Thôi 1 để chứa lần lượt các file đó là style.css và script.jsBắt Đầu Code Thôi1. Chức Năng Tính Toán Cơ Bản2. Chức Năng Dark & Light Mode3. Chức Năng Xem Lại Lịch Sử Tính Toán Các phép tính cơ bản cộng, trừ, nhân, chia.html -> css -> js nhưng hôm nay mình thay đổi một tí thì mình sẽ code js trước. 5Trong 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ínhDark & light mode Xem lại lịch sử các phép tính. Đâ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. 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.Đầu tiên các bạn cần import cho mình file css vào trước đã nha: 7Bâ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 8 để 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 3 mình chia làm 2 hàng với kích thước tương ứng. Trong đó 0 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 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. 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. 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 =))) 2. Chức Năng Dark & Light Mode2.1 Code HTMLTrong code html này các bạn thêm cho mình một 1 với tên data-theme và value là light vào bên trong thẻ mở 2. Tiếp theo phía dưới 3 bạn thêm cho mình một class là 4. Bên trong heading sẽ là nơi chứa các icon như mình đã lên ý tưởng từ trước.data-theme và value là light vào bên trong thẻ mở 2. Tiếp theo phía dưới 3 bạn thêm cho mình một class là 4. Bên trong heading sẽ là nơi chứa các icon như mình đã lên ý tưởng từ trước. data-theme và value là light vào bên trong thẻ mở 2.Tiếp theo phía dưới 3 bạn thêm cho mình một class là 4. Bên trong heading sẽ là nơi chứa các icon như mình đã lên ý tưởng từ trước. 2.2 Code CSSĐể mà có thể chia được layout cho 4 thì trong class 6 các bạn thêm cho mình một hàng nữa vào thuộc tính grid-template-rows 7 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à 8 để 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.Giao diện của chức năng dark & light modegrid-template-rows 7 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à 8 để 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. grid-template-rows 7Tiế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à 8 để 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. Giao diện của chức năng dark & light mode2.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à 2 element.Và đây là kết quả khi chúng ta hoàn thành chức năng dark & light modechecked 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à 2 element. 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à 2 element. Và đây là kết quả khi chúng ta hoàn thành chức năng dark & light mode 3. Chức Năng Xem Lại Lịch Sử Tính Toán3.1 Code HTMLTrong class 4 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. 83.2 Code JavascriptMì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 í.Chúng ta cùng xem thử nó đã lưu được lịch sử chưa nha hihi 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 í. Chúng ta cùng xem thử nó đã lưu được lịch sử chưa nha hihi3.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ị. 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ị.
Dưới đây là code js để khi click vào icon thì sẽ add class để hiển thị lịch sử 0Và dưới là kết quả khi chúng đã hoàn thành lưu trữ lịch sử 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., các bạn tham khảo code mà mình đã push lên github tại đây nha. Lời KếtVậ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!!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!! |