QuizApp là một ứng dụng đố vui mã nguồn mở và miễn phí cho phép bạn chơi các câu đố được tùy chỉnh hoàn toàn ngay trong trình duyệt
được xây dựng với
- Phản ứng
- Giao diện người dùng ngữ nghĩa
- Mở API cơ sở dữ liệu bên lề
Phát triển
Để có một bản sao mã cục bộ, hãy sao chép nó bằng git
git clone //github.com/SafdarJamal/quiz-app.git
cd quiz-app
Cài đặt phụ thuộc
npm install
Bây giờ, bạn có thể khởi động một máy chủ web cục bộ bằng cách chạy
npm start
Và sau đó mở http. //máy chủ cục bộ. 3000 để xem nó trong trình duyệt
Tập lệnh có sẵn
Trong dự án này, bạn có thể chạy các tập lệnh sau
ScriptDescriptionnpm startChạy ứng dụng ở chế độ phát triển. npm testKhởi chạy trình chạy thử ở chế độ đồng hồ tương tác. npm run buildXây dựng ứng dụng để sản xuất vào thư mụcbuild. npm run ejectLệnh này sẽ xóa phần phụ thuộc bản dựng duy nhất khỏi dự án của bạnTín dụng
QuizApp được xây dựng và duy trì bởi Safdar Jamal
Giấy phép
Mã phát hành theo giấy phép MIT
Bạn muốn cải thiện các kỹ năng Phát triển Web cốt lõi của mình? . Dưới đây là một số chủ đề chúng tôi sẽ đề cập
Lưu điểm cao trong Bộ nhớ cục bộ
Tạo một thanh tiến trình
Tạo biểu tượng bộ tải quay
Tự động tạo HTML trong JavaScript
Tìm nạp các câu hỏi nhỏ từ Open Trivia DB API
JavaScript - Hàm mảng [nối, ánh xạ, sắp xếp], Bộ nhớ cục bộ, Tìm nạp API
Các tính năng JavaScript ES6 - Hàm mũi tên, Toán tử trải rộng, Const và Let, Văn bản mẫu
Đơn vị CSS - Flexbox, Hoạt ảnh và REM
Giới thiệu khóa học và tài nguyên
Chào mừng bạn đến với "Xây dựng ứng dụng đố vui bằng HTML, CSS và JS". Tôi rất vui vì bạn đã quyết định chủ động cải thiện các kỹ năng Phát triển Web cốt lõi của mình
Trong khóa học này, chúng ta sẽ sử dụng các kỹ năng HTML, CSS và JavaScript cơ bản để xây dựng một ứng dụng đố vui. Ứng dụng này sẽ có thể tải các câu hỏi từ API của bên thứ 3, theo dõi và hiển thị điểm số cao, v.v. Bạn sẽ học cách sử dụng Bộ nhớ cục bộ, tạo hoạt ảnh, sử dụng các tính năng JavaScript ES6 hiện đại, v.v.
Tài nguyên
- Mã nguồn khóa học
- Bản tin Học Xây dựng Dạy
- Học Xây Dựng Dạy Kênh YouTube
1. Tạo và tạo kiểu cho Trang chủ
Trong video này, chúng ta sẽ tạo trang chủ cùng với một đoạn CSS cần thiết. Trang chủ sẽ bao gồm một vài liên kết cho các trang Trò chơi và Điểm cao. Chúng tôi cũng sẽ tạo các lớp CSS trợ giúp cho Flexbox, các nút và các phần tử ẩn
Tôi khuyến khích tất cả các bạn hãy xem đoạn mã Emmet để tạo HTML và CSS
Tài nguyên
- Emmet trong Mã Visual Studio
- Hiểu các đơn vị REM
- Hướng dẫn đầy đủ về Flexbox
2. Tạo và tạo kiểu trang trò chơi
Trong video này, chúng tôi sẽ tạo Trang trò chơi và hiển thị thông tin câu hỏi và câu trả lời tĩnh. Cuối cùng, chúng tôi sẽ tải các câu hỏi từ một API, nhưng hiện tại, chúng tôi sẽ mã hóa cứng một câu hỏi để thiết lập kiểu dáng
3. Hiển thị câu hỏi và câu trả lời được mã hóa cứng
Trong video này, chúng tôi sẽ tải các câu hỏi từ một mảng được mã hóa cứng và lặp qua các câu hỏi có sẵn khi người dùng trả lời chúng. Chúng tôi sẽ sử dụng các thuộc tính dữ liệu tùy chỉnh, toán tử trải rộng ES6 và các hàm mũi tên JavaScript
Tài nguyên
- Tạo đoạn mã trong Visual Studio Code
- Sử dụng thuộc tính dữ liệu
- Bộ chọn truy vấn tài liệu
- Nhận tài liệu theo ID
- Toán tử lây lan
- Hàm mũi tên
4. Hiển thị phản hồi cho câu trả lời đúng/không chính xác
Trong video này, chúng tôi kiểm tra độ chính xác của câu trả lời của người dùng và hiển thị phản hồi cho người dùng trước khi tải câu hỏi tiếp theo
Tài nguyên
- Bootstrap 4 màu
- Bằng ba so với gấp đôi
5. Tạo Head's Up Display [HUD]
Trong video này, chúng tôi sẽ tạo Màn hình hiển thị cảnh báo [HUD] cho ứng dụng bài kiểm tra của chúng tôi. Điều này sẽ hiển thị điểm của người dùng và số câu hỏi hiện tại
Tài nguyên
- Văn bản mẫu ES6
6. Tạo một thanh tiến trình
Trong video này, chúng tôi sẽ đưa HUD của mình tiến thêm một bước bằng cách tạo thanh tiến trình trực quan để theo dõi tiến trình của người dùng thông qua các câu hỏi
7. Tạo và tạo kiểu trang cuối
Trong video này, chúng tôi sẽ tạo trang Kết thúc nơi chúng tôi sẽ hiển thị điểm số đạt được của người dùng. Màn hình này sẽ cung cấp một biểu mẫu để lưu điểm và liên kết để chơi lại hoặc về nhà
Tài nguyên
- Lưu trữ cục bộ
8. Lưu điểm cao trong bộ nhớ cục bộ
Trong video này, chúng tôi sẽ lưu và duy trì một mảng điểm cao trong Bộ nhớ cục bộ. Để làm điều này, chúng ta sẽ cần JSON. stringify[] và JSON. parse[] để chuyển mảng điểm cao của bạn thành chuỗi và ngược lại
Tài nguyên
- Lưu trữ cục bộ
9. Tải và hiển thị Điểm cao từ Bộ nhớ cục bộ
Trong video này, chúng ta sẽ tạo trang Điểm cao. Chúng tôi sẽ phải tải điểm số cao từ Bộ nhớ cục bộ, lặp qua chúng và hiển thị chúng trên màn hình
Tài nguyên
- Phân tích cú pháp JSON và xâu chuỗi
- Sắp xếp mảng
- Bản đồ mảng
- tham gia mảng
10. Tìm nạp API để tải câu hỏi từ tệp JSON cục bộ
Trong video này, chúng ta sẽ chuyển các câu hỏi mẫu của mình từ một mảng được mã hóa cứng sang một mảng bên ngoài. tập tin json. Điều này sẽ giúp dọn dẹp Trò chơi của chúng tôi. js và tự thiết lập để yêu cầu các câu hỏi từ API trong video tiếp theo
Tài nguyên
- Cách sử dụng API tìm nạp
- lời hứa
11. Tìm nạp API để tải câu hỏi từ Open Trivia API
Trong video này, chúng ta sẽ sử dụng Tìm nạp để yêu cầu danh sách câu hỏi từ Open Trivia DB API
Tài nguyên
- Cách sử dụng API tìm nạp
- Mở câu đố DB
- Bản đồ mảng
- mảng cho mỗi
12. Tạo một bộ tải quay
Trong video này, chúng tôi sẽ tạo một trình tải quay đơn giản trong CSS sẽ được hiển thị cho đến khi chúng tôi hoàn tất yêu cầu/tải câu hỏi từ API
Tài nguyên
- Tạo Trình tải CSS
13. Đóng cửa
Cảm ơn bạn rất nhiều vì đã tham gia khóa học này. Tôi thực sự hy vọng rằng bạn thích nó và bạn đã cải thiện các kỹ năng Phát triển Web cốt lõi của mình