1. Hình thức thẻ tín dụng
Hình dạng thẻ tín dụng thú vị với các tương tác vi mô mượt mà và thú vị. Bao gồm định dạng số, xác minh và phát hiện loại thẻ tự động. Nó được xây dựng trên Vue.js và cũng hoàn toàn đáp ứng. (Bạn có thể thấy .)
Bạn sẽ học được gì:
- Xử lý và xác nhận biểu mẫu
- Xử lý các sự kiện (ví dụ: khi các trường thay đổi)
- Hiểu cách hiển thị và đặt các thành phần trên trang, đặc biệt là thông tin thẻ tín dụng xuất hiện ở đầu biểu mẫu
Bài viết được dịch với sự hỗ trợ của EDISON Software, công ty và .
2. Biểu đồ
Biểu đồ là một biểu đồ hoặc đồ thị biểu thị dữ liệu phân loại bằng các thanh hình chữ nhật có chiều cao hoặc chiều dài tỷ lệ thuận với các giá trị mà chúng biểu thị.
Chúng có thể được áp dụng theo chiều dọc hoặc chiều ngang. Biểu đồ thanh dọc đôi khi được gọi là biểu đồ đường.
Bạn sẽ học được gì:
- Hiển thị dữ liệu theo cách có cấu trúc và dễ hiểu
- Ngoài ra: Tìm hiểu cách sử dụng phần tử
canvasvà cách vẽ các phần tử với nó
bạn có thể tìm thấy dữ liệu dân số thế giới. Chúng được sắp xếp theo năm.
3. Hoạt hình trái tim Twitter
Trở lại năm 2016, Twitter đã giới thiệu hoạt ảnh tuyệt vời này cho các dòng tweet của mình. Kể từ năm 2019, nó vẫn có vẻ là một phần, vậy tại sao bạn không tự tạo một cái?
Bạn sẽ học được gì:
- Làm việc với thuộc tính CSS
keyframes - Thao tác và tạo hoạt ảnh cho các phần tử HTML
- Kết hợp JavaScript, HTML và CSS
4. Kho GitHub có chức năng tìm kiếm
Không có gì lạ mắt ở đây—kho GitHub chỉ là một danh sách được tôn vinh.
Mục tiêu là hiển thị các kho lưu trữ và cho phép người dùng lọc chúng. Sử dụng để có được kho lưu trữ cho mỗi người dùng.
Trang hồ sơ GitHub -
Bạn sẽ học được gì:
- Nhận dữ liệu từ API
- Hiển thị dữ liệu từ API
- Lọc và hiển thị dữ liệu liên quan cho mỗi tìm kiếm
- Tùy chọn: Nếu bạn muốn thử thách, hãy sử dụng , được xây dựng bằng GraphQL. .
5. Trò chuyện kiểu Reddit
Trò chuyện là một cách giao tiếp phổ biến do tính đơn giản và dễ sử dụng của chúng. Nhưng điều gì thực sự thúc đẩy các phòng chat hiện đại? WebSockets!
Bạn sẽ học được gì:
- Sử dụng WebSockets, giao tiếp và cập nhật dữ liệu theo thời gian thực
- Làm việc với các cấp độ truy cập của người dùng (ví dụ: chủ sở hữu kênh trò chuyện có vai trò
admin, và những người khác trong phòng -user) - Xử lý và xác thực biểu mẫu - hãy nhớ rằng cửa sổ trò chuyện để gửi tin nhắn là
input - Tạo và tham gia các cuộc trò chuyện khác nhau
- Làm việc với tin nhắn cá nhân. Người dùng có thể trò chuyện riêng tư với những người dùng khác. Về cơ bản, bạn sẽ thiết lập kết nối WebSocket giữa hai người dùng.
6. Điều hướng kiểu sọc
Điều làm cho điều hướng này trở nên độc đáo là vùng chứa cửa sổ bật lên biến đổi để phù hợp với nội dung. Quá trình chuyển đổi này có vẻ sang trọng hơn so với hành vi truyền thống là mở và đóng một cửa sổ bật lên mới.
Bạn sẽ học được gì:
- Kết hợp hoạt ảnh CSS với hiệu ứng chuyển tiếp
- Làm mờ nội dung và áp dụng lớp hoạt động cho phần tử nổi
Hãy thử tự mình làm trước, nhưng nếu bạn cần trợ giúp, hãy xem phần này .
Nguồn: www.habr.com