Định dạng có điều kiện JavaScript

        [{"id":"dc3147d7-d3fb-4bc1-b1b3-142c0633e6d3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca5ca1be-6d75-4ad1-880e-1589e3d52695","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ea870089-5ea1-499a-bb0c-29cf378ead8d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d304d34f-f329-4f3b-b45e-2acb478427f8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a79d24d-b853-4a51-a1e4-361feab06c57","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5d31b3db-69bb-4388-9a57-450a63e44456","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"95e6d892-7bcd-4f6a-a152-504dec37c741","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ec137f4b-3069-487f-bb0c-69f40fe6805d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9a2b2f20-5f3d-43a4-90d0-6f517fd3eebc","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"8d43dc09-ddd1-4c42-8b02-90765c4c705b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a0c3d1e1-4a95-4eaf-808e-93242f2f9aee","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"bd44c5b0-cd6b-443c-95dc-b8d8054fe1d7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fd5ccaa1-50b7-4c33-9ec5-c1eb48317119","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ea61139a-0ecf-45ba-83c3-c2f8b20a4126","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca986d5e-dfda-46e9-84f3-f44e4248ab94","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]}]
        

Tuần này, tôi đã hoàn thành dự án Học phần 3 tại Trường Flatiron. Mục tiêu là tạo một ứng dụng trang đơn bằng HTML, CSS và JavaScript. Chức năng của ứng dụng cần bao gồm đầy đủ CRUD (tạo, đọc, cập nhật và xóa). Cảm hứng của tôi cho dự án đến từ chín năm làm việc trong ngành nhà hàng. Trong suốt sự nghiệp của mình, tôi nhận thức sâu sắc và quan tâm đến lượng thực phẩm đang bị lãng phí. Vì vậy, tôi quyết định xây dựng một ứng dụng có thể theo dõi và lãng phí thực phẩm của từng người dùng để đưa ra ánh sáng một vấn đề thường bị bỏ qua. Tôi gọi nó là thức ăn thừa. Sau khi người dùng nhập tên thực phẩm họ đang theo dõi, ngày hết hạn, số lượng, giá trị tiền tệ của thực phẩm và loại thực phẩm, Thức ăn thừa sẽ tạo một thẻ chất thải thực phẩm hiển thị thông tin đã nhập. Thay vì hiển thị ngày hết hạn, tôi đã viết một hàm chênh lệch ngày để tính số ngày cho đến khi hết hạn

Nhiệm vụ của tôi là tạo ra một chức năng sẽ mất vài ngày để hết hạn từ thẻ dưới dạng tham số và tự động hiển thị màu tiêu đề của thẻ để phản ánh sự gần gũi của nó với ngày hết hạn. Sau khi hàm chênh lệch ngày tính toán số ngày sẽ hết hạn, giá trị được chuyển đến hàm kết xuất màu thẻ động. Chức năng định dạng màu sau đó sẽ áp dụng định dạng CSS thích hợp để phản ánh sự sắp hết hạn. Mục tiêu của tôi là cung cấp các tín hiệu trực quan giúp người dùng đánh giá tình trạng hiện tại của các mặt hàng thực phẩm của họ mà không cần phải tìm hiểu dữ liệu của từng thẻ riêng lẻ

Đơn hàng đầu tiên của doanh nghiệp để hoàn thành chức năng kết xuất động là xây dựng chức năng sẽ xử lý ngày thành giá trị hết hạn và áp dụng màu CSS chính xác cho tiêu đề của thẻ rác

function dynamicCardColors(element, daysToExpiration) {    splitDay = daysToExpiration.textContent.split(‘ ‘)[0]
    daysInt = parseInt(splitDay)    if (daysInt <= 3) {
        element.classList.add(‘waste-card-header-red’)
        element.classList.add(‘food-name’)    } else if (daysInt >= 4 && daysInt < 7) {
        element.classList.add(‘waste-card-header-yellow’)
        element.classList.add(‘food-name’)    } else {
        element.classList.add(‘waste-card-header-green’)
        element.classList.add(‘food-name’)
    }
}

Hai tham số của hàm bao gồm một phần tử và daysToExpiration. Phần tử được truyền vào hàm là phần tử chúng ta muốn áp dụng định dạng CSS cho. Số ngày sắp hết hạn được tính bằng cách sử dụng hàm chênh lệch ngày, sau đó được chuyển dưới dạng đối số vào hàm màu thẻ động. Vì tôi đang lấy daysToExpiration từ chính thẻ, nên ngày cần được phân tích cú pháp và chuyển trở lại thành số nguyên để các câu lệnh có điều kiện đánh giá chính xác. Sau khi câu lệnh điều kiện đánh giá số ngày hết hạn tương ứng, bước tiếp theo trong mã sẽ áp dụng kiểu dáng CSS thích hợp cho thẻ

.waste-card-header-red {
    border: 2px solid;
    margin-bottom: 2em;
    padding: .25em;
    background-color: rgba(231, 78, 78, 0.911);
    border-radius: .25em;
}.waste-card-header-yellow {
    border: 2px solid;
    margin-bottom: 2em;
    padding: .25em;
    background-color: rgba(240, 195, 50, 0.911);
    border-radius: .25em;
}.waste-card-header-green {
    border: 2px solid;
    margin-bottom: 2em;
    padding: .25em;
    background-color: rgba(77, 199, 72, 0.911);
    border-radius: .25em;
}

Và cứ như vậy, các thẻ chất thải tự động cập nhật để hiển thị màu phù hợp liên quan đến daysToExpiration. Bởi vì tôi đã áp dụng chức năng màu thẻ động khi thẻ đang hiển thị, khi thẻ thải gần đến ngày hết hạn, định dạng có điều kiện được áp dụng và cập nhật động khi ngày đến gần. khá gọn gàng

Bản chất động của thẻ rác chỉ có thể đạt được thông qua việc sử dụng các hàm JavaScript và CSS. JavaScript cung cấp chức năng cho các thẻ trong khi CSS tập trung vào kiểu dáng và hình thức của chúng. Khi CSS và JavaScript hoạt động cùng nhau, các nhà phát triển có thể thực hiện tất cả các loại “ma thuật”, thậm chí đưa một công cụ theo dõi chất thải thực phẩm đơn giản vào cuộc sống

Bạn có thể sử dụng hàm IF ở định dạng có điều kiện không?

Làm cách nào để sử dụng định dạng có điều kiện trong CSS?

Công thức cho định dạng có điều kiện là gì?