Giống như ứng dụng đếm ngày yêu trên điện thoại, nhưng chuyên nghiệp hơn chúng sẽ đếm được ngày yêu trên website trực tuyến của các bạn
Trang web này được thiết kế đơn giản, sang trọng theo phong cách Material design của Google. Màu sắc được chọn lựa kỹ lưỡng và phối hợp hài hòa. Trang web này mình viết với HTML5, CSS3 và JavaScript mà thôi !! Bạn chỉ cần tải về và chỉnh sửa nội dung lại và sau đó Upload lên host để sử dụng là được.
Mục lục bài viết
Điểm nổi bật của trang web đếm ngày yêu nhau
- Trang web được thiết kế hiện đại, sang trọng.
- Màu sắc được phối sẵn hài hòa và dịu mắt các bạn nữ.
- Viết bằng HTML5, CSS3 và JavaScript nên dễ dàng chỉnh sửa và thay đổi nội dung.
- Tự co dãn và tương thích với hầu hết các loại màn hình của các thiết bị.
Hướng dẫn cách chỉnh sửa nội dung trang web
Bạn cần download source code (mã nguồn) trang web đếm ngày yêu ở dưới
Sau khi tải về thì bạn tiến hành ấn chuột phải vào thư mục và chọn Extract Here để giải nén. Giải nén File ra bạn sẽ nhận được 01 Folder có tên là beenTogether2019. Mở Folder đó ra bạn sẽ nhìn thấy những File giống như hình dưới đây.
Chỉnh sửa nội dung hình ảnh
Hãy mở Folder img và thay thế 02 hình ảnh đại diện bên trong thành hình ảnh của bạn và người yêu bạn
Tuy nhiên, để đỡ mất công chỉnh sửa code thì bạn cứ đặt tên ảnh như ban đầu nhé !!
- thong.jpg là ảnh của bạn nam
- trang.jpg là ảnh của bạn nữ
Chỉnh sửa nội dung trang web
Các bạn mở file index.html ra và chỉnh sửa thông tin
Ngoài ra trong thẻ <img src="img/thong.jpg" class="avatar"> và <img src="img/trang.jpg" class="avatar">chính là đường dẫn đến file ảnh đại diện. Nếu ảnh đại diện không hiển thị thì bạn kiểm tra lại phần này xem đã đúng tên ảnh đại diện của bạn trong thư mục img chưa nhé !!
Thiết lập ngày hẹn hò
Cuối cùng việc chúng ta cần làm đó là thiết lập lại ngày bắt đầu hẹn hò của hai người. Mở file main.js lên bằng vscode để chỉnh sửa. Bạn sẽ nhìn thấy nội dung của File main.js giống như ảnh dưới đây.
Hãy tìm dòng var startDate = new Date(2018, 10, 1);và thay thế 3 số trong ngoặc đơn thành ngày hẹn hò của bạn. Ví dụ mình hẹn hò ngày 01/11/2018 thì mình sẽ thay thế như sau:
- 2018: Là năm bắt đầu hẹn họ – cái này đúng rồi nên mình giữ nguyên.
- 10: Mình hẹn hò tháng 11 nhưng khi thay thế thì mình điền 10.
Vì trong JavaScript phải trừ số tháng lại 1 đơn vị. - 1: Ngày hẹn hò của bạn.
Sau khi chỉnh sửa xong thì save lại và Upload lên host là được.
Video Hướng Dẫn
]]>
