Chúng tôi đi đến nhiệm vụ cuối cùng của khóa học này.
Trong nhiệm vụ thứ tư này,
bạn sẽ làm việc với bootstraps,
hỗ trợ jQuery và cũng có một chút Sass.
Việc phân công này bao gồm bốn nhiệm vụ.
Nhiệm vụ đầu tiên của bạn là xóa tất cả các
thuộc tính dữ liệu từ cả liên kết đăng nhập ở đây và dự trữ bảng ở đây.
Bây giờ, trong nhiệm vụ này,
chúng ta sẽ kích hoạt các mô hình bằng cách sử dụng mã JavaScript.
Vì vậy, để làm điều đó,
trước tiên chúng ta sẽ loại bỏ các thuộc tính dữ liệu,
cả từ mô hình dự trữ và mô hình đăng nhập như là nhiệm vụ đầu tiên của chúng tôi trong nhiệm vụ này.
Nhiệm vụ thứ hai của bạn là thêm
mã JavaScript thích hợp bằng cách sử dụng các phương pháp mô hình,
phương pháp JavaScript có sẵn,
sao cho khi mẫu bảng dự trữ được nhấp,
thì mô hình dự trữ tương ứng sẽ được hiển thị như đã thấy ở đây.
Vì vậy, chúng ta thấy rằng điều này hiển thị và ẩn của mô hình
được kích hoạt hoàn toàn bằng cách sử dụng các phương pháp JavaScript của mô hình đó.
Nhiệm vụ thứ ba của bạn là, một lần nữa,
chèn mã thích hợp vào kịch bản sao cho khi bạn nhấp vào liên kết đăng nhập ở đây,
mô hình đăng nhập sẽ được hiển thị.
Bây giờ, để điều này hoạt động,
bạn cần phải cung cấp các ID thích hợp cho cả nút bảng dự trữ và
liên kết đăng nhập để chúng sau đó có thể được tham chiếu trong mã JavaScript của bạn.
Vì vậy, đó là một gợi ý cho bạn,
làm thế nào bạn có thể tiếp tục và tiến hành thực hiện điều này.
Việc sử dụng các phương pháp JavaScript nên khá đơn giản.
Liên kết đến tài liệu bootstrap mô tả
các phương pháp JavaScript có sẵn trong
phần tài nguyên bổ sung của nhiệm vụ này.
Như bạn có thể đã nhận ra rằng các mô hình này bây giờ trông nhiều màu sắc hơn.
Vì vậy, đây là mô hình bảng dự trữ,
và đây là mô hình đăng nhập.
Vì vậy, như là một phần của nhiệm vụ thứ tư của nhiệm vụ này,
bạn sẽ thêm vào một số mã SCSS vào phong cách bắt đầu tập tin SCSS,
như vậy mà các màu sắc được thiết lập một cách thích hợp.
Vì vậy, ở đây, bạn thấy rằng tiêu đề mô
hình có màu tối nền và văn bản ở đây được hiển thị trong màu trắng.
Và cũng có thể, lớp đặc biệt này
bằng cách sử dụng một lớp lồng nhau ở đây trong mã SCSS của
bạn, bạn có thể xác định điều này cũng để sử dụng một màu phẳng hoặc trắng ở đây.
Sau đó, cơ thể mô hình chính nó sử dụng màu nền nhạt.
Vì vậy, chèn mã SCSS thích hợp vào phong cách của bạn bắt đầu
tập tin SCSS để cho phép điều này để làm việc cho các mô hình dự trữ của tiêu đề và cơ
thể, vì vậy bạn có thể thấy rằng cùng một nền màu tối được áp dụng cho tiêu đề và
nền màu nhạt được áp dụng cho cơ thể của mô hình của bạn.
Và sau khi hoàn thành nhiệm vụ này,
bạn có thể muốn làm một bình luận tốt để lưu các thay đổi của bạn với phân công tin nhắn bốn.