Trong phần này, chúng ta sẽ thử giải câu đố Html Css Javascript To Android App bằng cách sử dụng ngôn ngữ máy tính. Mã sau đây phục vụ để minh họa điểm này

Nội dung chính Show

Tôi có thể tạo ứng dụng Android bằng HTML CSS và JavaScript không?
Tôi có thể tạo ứng dụng bằng HTML CSS và JavaScript không?
Tôi có thể sử dụng JavaScript để tạo ứng dụng Android không?
Làm cách nào tôi có thể tạo ứng dụng dành cho thiết bị di động bằng HTML và CSS?
Làm cách nào để chuyển đổi HTML sang APK?
JavaScript có thể tạo ứng dụng di động không?
Bạn có thể sử dụng HTML cho các ứng dụng dành cho thiết bị di động không?
Ngôn ngữ nào là tốt nhất để phát triển ứng dụng?
Ứng dụng web lũy tiến là gì?
Cấu trúc HTML của chúng tôi
Tạo kiểu cho ứng dụng của chúng tôi bằng CSS
Phát lại phiên mã nguồn mở
Thiết lập Dexie. js để làm việc với IndexedDB
Thiết lập Hộp làm việc
Làm cho ứng dụng có thể cài đặt được
Thử nghiệm ứng dụng trên thiết bị di động
Sự kết luận
Tôi có thể tạo ứng dụng Android bằng HTML không?
Tôi có thể sử dụng HTML trong Android Studio không?
Bạn có thể biến HTML thành một ứng dụng không?
Bạn có thể xây dựng ứng dụng di động bằng HTML không?

with one click & in a few minutes (apk , app bundle , key store)
https://urlgapp.com/htmlgapp

Chúng tôi có thể hiểu cách khắc phục sự cố Html Css Javascript To Android App nhờ có nhiều ví dụ

Tôi có thể tạo ứng dụng Android bằng HTML CSS và JavaScript không?

Câu trả lời ngắn. Có, bạn có thể phát triển ứng dụng bằng HTML/CSS/Javascript. 22-Jul-2011

Tôi có thể tạo ứng dụng bằng HTML CSS và JavaScript không?

Phát triển ứng dụng gốc từ đầu đòi hỏi các công nghệ cụ thể cho cả hai nền tảng. HTML, CSS và JavaScript là tất cả những gì cần thiết cho PWA. 02-May-2022

Tôi có thể sử dụng JavaScript để tạo ứng dụng Android không?

Các khung JavaScript rất phù hợp để phát triển ứng dụng dành cho thiết bị di động, vì chúng có thể được sử dụng trên một số nền tảng, bao gồm iOS, Android và Windows. 13-Jun-2019

Làm cách nào tôi có thể tạo ứng dụng dành cho thiết bị di động bằng HTML và CSS?

Điều kiện tiên quyết

Bước 1. Tạo một ứng dụng Cordova mới
Bước 2. Thêm nền tảng Android
Bước 3. Thêm plugin lấy thông tin thiết bị
Bước 4. Mở mã trong Visual Studio Code Editor
Bước 5. Chỉnh sửa chỉ mục. html trong thư mục www
Bước 6. Chỉnh sửa chỉ mục. js trong thư mục www
Bước 7. Chỉnh sửa chỉ mục. css trong thư mục www
Bước 8. Chuẩn bị dự án Cordova

Làm cách nào để chuyển đổi HTML sang APK?

Xây dựng APK từ mã HTML trong 5 bước đơn giản

Mở Mẫu ứng dụng HTML. Nhấp vào nút "Tạo ứng dụng ngay"
Chèn mã HTML. Sao chép – dán mã HTML của bạn
Đặt tên cho ứng dụng của bạn. Viết tên ứng dụng của bạn
Tải lên biểu tượng. Gửi biểu trưng của riêng bạn hoặc chọn biểu tượng mặc định
Xuất bản ứng dụng

JavaScript có thể tạo ứng dụng di động không?

Tuy nhiên, đối với các nhà phát triển, có một trở ngại. ứng dụng di động cho Android và Apple hoàn toàn khác nhau. Đó là nơi JavaScript, cụ thể là React Native, xuất hiện. Công cụ dựa trên JS này cho phép các nhà phát triển xây dựng các ứng dụng di động đa nền tảng, thay vì cần viết mã hai ứng dụng hoàn toàn riêng biệt

Bạn có thể sử dụng HTML cho các ứng dụng dành cho thiết bị di động không?

Không có cách duy nhất để tạo ứng dụng di động. Một số ứng dụng được tạo bằng HTML và CSS (sử dụng thư viện để hiển thị ứng dụng này). Những thứ khác được tạo bằng các thành phần giao diện người dùng gốc. Không khác với cách bạn có thể tạo bất kỳ ứng dụng biểu mẫu cũ nào

Ngôn ngữ nào là tốt nhất để phát triển ứng dụng?

Java. Đầu tiên Java là ngôn ngữ chính thức để phát triển ứng dụng Android (nhưng bây giờ nó đã được thay thế bởi Kotlin) và do đó, nó cũng là ngôn ngữ được sử dụng nhiều nhất. Nhiều ứng dụng trong Cửa hàng Play được xây dựng bằng Java và đây cũng là ngôn ngữ được Google hỗ trợ nhiều nhất. 02-Aug-2022

Vì vậy, bạn đã thấy tiêu đề và bạn đang tự hỏi làm thế nào bạn có thể xây dựng một ứng dụng di động thực tế chỉ bằng cách sử dụng kiến thức về các công nghệ web cơ bản mà không cần phải học phát triển Android hoặc IOS? . Bằng cách này, chúng tôi sẽ đạt được một loại ứng dụng được gọi là Ứng dụng web lũy tiến (PWA)

Trong bài viết này, chúng ta sẽ tìm hiểu cách tận dụng sức mạnh của HTML, CSS và Javascript để xây dựng một ứng dụng di động đơn giản. Chúng tôi sẽ không sử dụng các framework như Ionic hoặc React Native. Điều này là do hướng dẫn này tập trung vào việc chỉ ra cách một ứng dụng web cơ bản có thể được tạo ra để cảm nhận và hoạt động giống như một ứng dụng di động gốc có thể được cài đặt và chạy trên thiết bị di động bằng phương pháp đơn giản nhất với ít trừu tượng nhất

Để tiếp tục, chúng ta hãy giới thiệu ngắn gọn về PWAs

Ứng dụng web lũy tiến là gì?

Theo Tài liệu web MDN chính thức

Ứng dụng web lũy tiến (PWA) là các ứng dụng web sử dụng trình chạy dịch vụ, bảng kê khai và các tính năng nền tảng web khác kết hợp với tính năng nâng cao lũy tiến để mang đến cho người dùng trải nghiệm ngang bằng với các ứng dụng gốc

Nói một cách đơn giản, về cơ bản, chúng là các trang web được tạo kiểu giống như các ứng dụng có thể chạy bên trong trình duyệt trang web hoặc được cài đặt trực tiếp trên thiết bị di động và được truy cập như một ứng dụng gốc

Có ba thành phần chính của PWA;

Nhân viên phục vụ. Nhân viên dịch vụ biến trang web thành một ứng dụng bằng cách cho phép trang web tải xuống và lưu trữ các tệp trên thiết bị
Bản kê khai web. Tệp JSON này cung cấp siêu thông tin cơ bản về ứng dụng, chẳng hạn như biểu tượng ứng dụng, màu nền, v.v.
HTTPS an toàn. HTTPS là bắt buộc và làm cho PWA an toàn hơn các ứng dụng web thông thường

PWA có ưu và nhược điểm. Trong số những người trước đây

Giá rẻ và phát triển nhanh. PWA ít tốn kém hơn, nhanh hơn và dễ tạo hơn các ứng dụng gốc. Phát triển ứng dụng gốc từ đầu đòi hỏi các công nghệ cụ thể cho cả hai nền tảng. HTML, CSS và JavaScript là tất cả những gì cần thiết cho PWA
Tính khả dụng đa nền tảng. Một trong những lợi thế đầy hứa hẹn của PWAs là chúng có thể được cài đặt và chạy trên nhiều thiết bị trên nhiều hệ điều hành khác nhau
Chức năng ngoại tuyến. Việc không có hoặc không có internet sẽ không ngăn người dùng sử dụng ứng dụng của bạn vì ứng dụng này có thể lưu vào bộ nhớ đệm dữ liệu để xem ngoại tuyến bằng nhân viên dịch vụ
Màn biểu diễn. So với các ứng dụng di động gốc, PWAs nhẹ hơn nhiều, không chiếm nhiều dung lượng bộ nhớ và có thời gian tải nhanh hơn

Về mặt tiêu cực

Mức sử dụng pin cao. Vì PWA là mã web cấp cao được tích hợp sẵn nên điện thoại phải làm việc nhiều hơn để đọc mã;
Truy cập phần cứng di động. PWA không thể truy cập các tính năng phần cứng khác nhau như Bluetooth của thiết bị, cảm biến tiệm cận, v.v.
Phân phối Vì PWA không được phân phối qua cửa hàng ứng dụng nên bạn có thể bỏ lỡ những người dùng chủ yếu duyệt qua cửa hàng ứng dụng

Bạn nên cân nhắc sử dụng/xây dựng Ứng dụng web lũy tiến nếu bạn đáp ứng các tiêu chí sau

Bạn không có ngân sách để xây dựng một ứng dụng chính thức
Bạn cần thúc đẩy đối tượng mục tiêu của mình nhanh hơn
Có khả năng tương thích đa nền tảng là điều cần thiết cho doanh nghiệp của bạn

Chúng tôi sẽ xây dựng ứng dụng di động “Todo List” bằng HTML, CSS và Javascript. Trước tiên, chúng tôi sẽ xây dựng một ứng dụng web trong khi sử dụng IndexedDB cho cơ sở dữ liệu của chúng tôi, hộp làm việc để làm cho nó hoạt động ngoại tuyến và bảng kê khai web để làm cho nó có thể cài đặt được trên các thiết bị. Kết quả cuối cùng sẽ như sau

Chúng tôi bắt đầu bằng cách tạo một thư mục trống có tên Ứng dụng Todo, sau đó tạo ba tệp bên trong có tên là

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

1 và thư mục nội dung (sẽ chứa logo của chúng tôi)

Cấu trúc HTML của chúng tôi

Chuyển đến tệp

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

0 và nhập các dòng mã sau

Copy

7My Todo

Todo PWA

Tasks

Tại đây, chúng tôi đã tạo bố cục trang HTML và liên kết cả

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;



88 width: 100%;
89 margin: 0 auto;
90}
91
92.task-list {
93 padding: 1rem;
94}
95
96.task-list h2 {
97 font-size: 1.5rem;
98 font-weight: 300;
99 color: var(--grey);
100 margin-bottom: 1rem;
101}
102
103#tasks .task {
104 display: flex;
105 justify-content: space-between;
106 background-color: var(--darkest);
107 padding: 1rem;
108 border-radius: 1rem;
109 margin-bottom: 1rem;
110}
111
112.task .content {
113 flex: 1 1 0%;
114}
115
116.task .content .text {
117 color: var(--light);
118 font-size: 1.125rem;
119 width: 100%;
120 display: block;
121 transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125 color: var(--pink);
126}
127
128.task .actions {
129 display: flex;
130 margin: 0 -0.5rem;
131}
132
133.task .actions button {
134 cursor: pointer;
135 margin: 0 0.5rem;
136 font-size: 1.125rem;
137 font-weight: 700;
138 text-transform: uppercase;
139 transition: 0.4s;
140}
141
142.task .actions button:hover {
143 opacity: 0.8;
144}
145
146.task .actions button:active {
147 opacity: 0.6;
148}
149
150.task .actions .edit {
151 background-image: linear-gradient(to right, var(--pink), var(--purple));
152 -webkit-background-clip: text;
153 -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157 color: crimson;
158}

0 và

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

1 của chúng tôi. Bây giờ, hãy tiếp tục và thêm một số kiểu dáng

Tạo kiểu cho ứng dụng của chúng tôi bằng CSS

Cập nhật tệp

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

0 bằng mã bên dưới

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Thiết lập Dexie. js để làm việc với IndexedDB

Hãy chuyển sang tệp Javascript của chúng tôi. Nhưng trước tiên, hãy định cấu hình cơ sở dữ liệu IndexedDB của chúng tôi, một cơ sở dữ liệu trong trình duyệt sẽ lưu trữ tất cả các todo của chúng tôi

Ghi chú. Đây không phải là bộ nhớ cục bộ mà là cơ sở dữ liệu thực tế nằm trong trình duyệt

Để tương tác với cơ sở dữ liệu này, chúng tôi sẽ cần cài đặt

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

6, một trình bao bọc xung quanh IndexedDB sẽ giúp chúng tôi quản lý cơ sở dữ liệu của mình một cách dễ dàng. Đi đến dexie. js và tải xuống tệp script. Thêm phần sau vào thẻ đầu của bạn trong

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);



64}
65
66#new-task-submit {
67 color: var(--pink);
68 font-size: 1.25rem;
69 font-weight: 700;
70 background-image: linear-gradient(to right, var(--pink), var(--purple));
71 -webkit-background-clip: text;
72 -webkit-text-fill-color: transparent;
73 cursor: pointer;
74 transition: 0.4s;
75}
76
77#new-task-submit:hover {
78 opacity: 0.8;
79}
80
81#new-task-submit:active {
82 opacity: 0.6;
83}
84
85main {
86 flex: 1 1 0%;
87 max-width: 800px;
88 width: 100%;
89 margin: 0 auto;
90}
91
92.task-list {
93 padding: 1rem;
94}
95
96.task-list h2 {
97 font-size: 1.5rem;
98 font-weight: 300;
99 color: var(--grey);
100 margin-bottom: 1rem;
101}
102
103#tasks .task {
104 display: flex;
105 justify-content: space-between;
106 background-color: var(--darkest);
107 padding: 1rem;
108 border-radius: 1rem;
109 margin-bottom: 1rem;
110}
111
112.task .content {
113 flex: 1 1 0%;
114}
115
116.task .content .text {
117 color: var(--light);
118 font-size: 1.125rem;
119 width: 100%;
120 display: block;
121 transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125 color: var(--pink);
126}
127
128.task .actions {
129 display: flex;
130 margin: 0 -0.5rem;
131}
132
133.task .actions button {
134 cursor: pointer;
135 margin: 0 0.5rem;
136 font-size: 1.125rem;
137 font-weight: 700;
138 text-transform: uppercase;
139 transition: 0.4s;
140}
141
142.task .actions button:hover {
143 opacity: 0.8;
144}
145
146.task .actions button:active {
147 opacity: 0.6;
148}
149
150.task .actions .edit {
151 background-image: linear-gradient(to right, var(--pink), var(--purple));
152 -webkit-background-clip: text;
153 -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157 color: crimson;
158}

Copy

Sau đó, trong tệp

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

1, chúng tôi khởi tạo cơ sở dữ liệu mới bằng cách sử dụng

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Trong mẫu mã trên, chúng tôi đã triển khai các chức năng cơ bản mà ứng dụng của chúng tôi nên có. Chúng tôi có thể thêm, hiển thị và xóa todos khỏi cơ sở dữ liệu của mình. Bây giờ chúng ta đã thiết lập ứng dụng cơ bản, đã đến lúc tập trung vào những gì sẽ làm cho ứng dụng của chúng ta hoạt động giống như một ứng dụng di động thông thường. Đầu tiên, chúng tôi sẽ làm cho ứng dụng của mình có chức năng ngoại tuyến, chức năng này sẽ cho phép ứng dụng hoạt động mà không cần kết nối internet

Thiết lập Hộp làm việc

Google workbox là công cụ sẽ tạo ra service worker, giúp ứng dụng của chúng ta hoạt động mà không cần kết nối internet. Trước tiên, hãy cài đặt hộp làm việc trên toàn cầu trên máy của chúng tôi. Chạy

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Sau đó, để định cấu hình hộp làm việc của chúng tôi, hãy chạy

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{



39 text-align: center;
40}
41#new-task-form {
42 display: flex;
43}
44
45input, button {
46 appearance: none;
47 border: none;
48 outline: none;
49 background: none;
50}
51
52#new-task-input {
53 flex: 1 1 0%;
54 background-color: var(--darker);
55 padding: 1rem;
56 border-radius: 1rem;
57 margin-right: 1rem;
58 color: var(--light);
59 font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63 color: var(--grey);
64}
65
66#new-task-submit {
67 color: var(--pink);
68 font-size: 1.25rem;
69 font-weight: 700;
70 background-image: linear-gradient(to right, var(--pink), var(--purple));
71 -webkit-background-clip: text;
72 -webkit-text-fill-color: transparent;
73 cursor: pointer;
74 transition: 0.4s;
75}
76
77#new-task-submit:hover {
78 opacity: 0.8;
79}
80
81#new-task-submit:active {
82 opacity: 0.6;
83}
84
85main {
86 flex: 1 1 0%;
87 max-width: 800px;
88 width: 100%;
89 margin: 0 auto;
90}
91
92.task-list {
93 padding: 1rem;
94}
95
96.task-list h2 {
97 font-size: 1.5rem;
98 font-weight: 300;
99 color: var(--grey);
100 margin-bottom: 1rem;
101}
102
103#tasks .task {
104 display: flex;
105 justify-content: space-between;
106 background-color: var(--darkest);
107 padding: 1rem;
108 border-radius: 1rem;
109 margin-bottom: 1rem;
110}
111
112.task .content {
113 flex: 1 1 0%;
114}
115
116.task .content .text {
117 color: var(--light);
118 font-size: 1.125rem;
119 width: 100%;
120 display: block;
121 transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125 color: var(--pink);
126}
127
128.task .actions {
129 display: flex;
130 margin: 0 -0.5rem;
131}
132
133.task .actions button {
134 cursor: pointer;
135 margin: 0 0.5rem;
136 font-size: 1.125rem;
137 font-weight: 700;
138 text-transform: uppercase;
139 transition: 0.4s;
140}
141
142.task .actions button:hover {
143 opacity: 0.8;
144}
145
146.task .actions button:active {
147 opacity: 0.6;
148}
149
150.task .actions .edit {
151 background-image: linear-gradient(to right, var(--pink), var(--purple));
152 -webkit-background-clip: text;
153 -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157 color: crimson;
158}

Trong bảng điều khiển, bạn sẽ được yêu cầu đăng ký đường dẫn gốc của ứng dụng của mình. Chọn Nhập đường dẫn thủ công, sau đó sử dụng. / làm đường dẫn gốc

Sau đó, chọn bộ đệm tất cả các tệp. Ngoài ra, đồng ý lưu cho nhân viên dịch vụ và cấu hình, và cuối cùng chọn không cho tùy chọn cuối cùng

Sau đó, chúng ta sẽ thấy rằng một tệp có tên

Copy

0 đã được tạo. Ngay sau đó, hãy chạy lệnh này để tạo nhân viên dịch vụ

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Bây giờ hãy thêm đoạn mã dưới đây vào thẻ đầu của tệp HTML. Nó sẽ đăng ký nhân viên dịch vụ khi cửa sổ được tải

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Truy cập trình duyệt của bạn, nhấp chuột phải và nhấp vào kiểm tra, sau đó điều hướng đến các ứng dụng và tìm nhân viên dịch vụ. Bạn sẽ thấy rằng nhân viên dịch vụ đã chạy

Trước khi chúng tôi tiếp tục, hãy đẩy mã của bạn vào repo GitHub của bạn và lưu trữ nó. Đối với bài viết này, tôi đang lưu trữ với các trang GitHub

Làm cho ứng dụng có thể cài đặt được

Chúng tôi phải thêm một bảng kê khai web vào ứng dụng của mình để đạt được điều này. Đây là tệp JSON sẽ lưu trữ các chi tiết cần thiết về ứng dụng của chúng tôi, chẳng hạn như logo, tên ứng dụng, mô tả, v.v. Chuyển đến thư mục gốc của thư mục ứng dụng và tạo

Copy

1. Sau đó thêm mã này dưới đây

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

Sau đó, thêm liên kết đến tệp kê khai vào phần đầu của tệp

Copy 1:root {
2    --dark: #05152E;
3    --darker: #1F2937;
4    --darkest: #001E3C;
5    --grey: #6B7280;
6    --pink: #EC4899;
7    --purple: #8B5CF6;
8    --light: #EEE;
9}
10
11* {
12    margin: 0;
13    box-sizing: border-box;
14    font-family: "Fira sans", sans-serif;
15}
16
17body {
18    display: flex;
19    flex-direction: column;
20    min-height: 100vh;
21    color: #FFF;
22    background-color: var(--dark);
23}
24
25header {
26    padding: 2rem 1rem;
27    max-width: 800px;
28    width: 100%;
29    margin: 0 auto;
30}
31
32header h1{ 
33    font-size: 2.5rem;
34    font-weight: 300;
35    color: white;
36    margin-bottom: 1rem;
37}
38h1{
39    text-align: center;
40}
41#new-task-form {
42    display: flex;
43}
44
45input, button {
46    appearance: none;
47    border: none;
48    outline: none;
49    background: none;
50}
51
52#new-task-input {
53    flex: 1 1 0%;
54    background-color: var(--darker);
55    padding: 1rem;
56    border-radius: 1rem;
57    margin-right: 1rem;
58    color: var(--light);
59    font-size: 1.25rem;
60}
61
62#new-task-input::placeholder {
63    color: var(--grey);
64}
65
66#new-task-submit {
67    color: var(--pink);
68    font-size: 1.25rem;
69    font-weight: 700;
70    background-image: linear-gradient(to right, var(--pink), var(--purple));
71    -webkit-background-clip: text;
72    -webkit-text-fill-color: transparent;
73    cursor: pointer;
74    transition: 0.4s;
75}
76
77#new-task-submit:hover {
78    opacity: 0.8;
79}
80
81#new-task-submit:active {
82    opacity: 0.6;
83}
84
85main {
86    flex: 1 1 0%;
87    max-width: 800px;
88    width: 100%;
89    margin: 0 auto;
90}
91
92.task-list {
93    padding: 1rem;
94}
95
96.task-list h2 {
97    font-size: 1.5rem;
98    font-weight: 300;
99    color: var(--grey);
100    margin-bottom: 1rem;
101}
102
103#tasks .task {
104    display: flex;
105    justify-content: space-between;
106    background-color: var(--darkest);
107    padding: 1rem;
108    border-radius: 1rem;
109    margin-bottom: 1rem;
110}
111
112.task .content {
113    flex: 1 1 0%;
114}
115
116.task .content .text {
117    color: var(--light);
118    font-size: 1.125rem;
119    width: 100%;
120    display: block;
121    transition: 0.4s;
122}
123
124.task .content .text:not(:read-only) {
125    color: var(--pink);
126}
127
128.task .actions {
129    display: flex;
130    margin: 0 -0.5rem;
131}
132
133.task .actions button {
134    cursor: pointer;
135    margin: 0 0.5rem;
136    font-size: 1.125rem;
137    font-weight: 700;
138    text-transform: uppercase;
139    transition: 0.4s;
140}
141
142.task .actions button:hover {
143    opacity: 0.8;
144}
145
146.task .actions button:active {
147    opacity: 0.6;
148}
149
150.task .actions .edit {
151    background-image: linear-gradient(to right, var(--pink), var(--purple));
152    -webkit-background-clip: text;
153    -webkit-text-fill-color: transparent;
154}
155
156.task .actions .delete {
157    color: crimson;
158}

0 của chúng tôi. Bây giờ hãy đẩy những thay đổi này vào repo của bạn

Thử nghiệm ứng dụng trên thiết bị di động

Cuối cùng, chúng tôi đã hoàn thành ứng dụng Di động của mình chỉ bằng cách sử dụng HTML, CSS và Javascript. Hãy tiếp tục và truy cập URL được lưu trữ của bạn và cài đặt ứng dụng của bạn trên thiết bị di động của bạn

Cách tạo ứng dụng html trong studio android

Sự kết luận

chúc mừng. về làm cho nó ở đây. Bạn đã học cách thiết lập ứng dụng dành cho thiết bị di động bằng kiến thức về công nghệ web cơ bản và tổng quan về PWAs. Bạn có thể tiến xa hơn và mở rộng kiến thức của mình bằng cách sử dụng các khung khác để giúp bạn thêm nhiều khả năng hơn vào ứng dụng của mình

Tôi có thể tạo ứng dụng Android bằng HTML không?

Câu trả lời ngắn. Có, bạn có thể phát triển ứng dụng bằng HTML/CSS/Javascript . Tham gia hai Hướng dẫn về WebView và gọi cho tôi vào buổi sáng. Câu trả lời dài. Nếu bạn muốn viết ứng dụng cho Android sử dụng HTML/CSS/Javascript, ít nhất bạn sẽ phải tạo trình bao bọc WebView gốc.

Tôi có thể sử dụng HTML trong Android Studio không?

Bước 1. Để thêm một tệp HTML cục bộ vào dự án Android của bạn, phải có một thư mục nội dung trong đó . Để tạo thư mục nội dung trong studio Android, trước tiên hãy mở dự án của bạn ở chế độ Android như trong hình bên dưới. Bước 2. Truy cập ứng dụng > nhấp chuột phải > Mới > Thư mục > Thư mục nội dung và tạo thư mục nội dung.

Bạn có thể biến HTML thành một ứng dụng không?

Bất kỳ Ứng dụng nào được tạo bằng HTML/JS/CSS có thể hoạt động trên thiết bị cục bộ của bạn đều có thể được sử dụng làm Ứng dụng độc lập cho Android và iOS . Chỉ cần tải tệp dự án của bạn lên dưới tệp zip và nhấn nút Tạo ứng dụng, Trình tạo ứng dụng sẽ thêm tệp của bạn vào Ứng dụng WebView với tất cả các Tính năng bổ sung.

Bạn có thể xây dựng ứng dụng di động bằng HTML không?

Việc phát triển ứng dụng gốc từ đầu cần có các công nghệ cụ thể cho cả hai nền tảng. HTML, CSS và JavaScript là tất cả những gì cần thiết cho một PWA .

programming html

Cách tạo ứng dụng html trong studio android

Tôi có thể tạo ứng dụng Android bằng HTML CSS và JavaScript không?

Tôi có thể tạo ứng dụng bằng HTML CSS và JavaScript không?

Tôi có thể sử dụng JavaScript để tạo ứng dụng Android không?

Làm cách nào tôi có thể tạo ứng dụng dành cho thiết bị di động bằng HTML và CSS?

Làm cách nào để chuyển đổi HTML sang APK?

JavaScript có thể tạo ứng dụng di động không?

Bạn có thể sử dụng HTML cho các ứng dụng dành cho thiết bị di động không?

Ngôn ngữ nào là tốt nhất để phát triển ứng dụng?

Ứng dụng web lũy tiến là gì?

Cấu trúc HTML của chúng tôi

Tasks

Tạo kiểu cho ứng dụng của chúng tôi bằng CSS

Phát lại phiên mã nguồn mở

Thiết lập Dexie. js để làm việc với IndexedDB

Thiết lập Hộp làm việc

Làm cho ứng dụng có thể cài đặt được

Thử nghiệm ứng dụng trên thiết bị di động

Sự kết luận

Tôi có thể tạo ứng dụng Android bằng HTML không?

Tôi có thể sử dụng HTML trong Android Studio không?

Bạn có thể biến HTML thành một ứng dụng không?

Bạn có thể xây dựng ứng dụng di động bằng HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội