//I didn't want to create a CSS/HTML file..
(()=>{
    let style = document.createElement("style");
    style.textContent = `
    #buttons {
        text-align: center;
    }
    
    .button-value {
        border: 2px solid #ff0000;
        padding: 1em 2.2em;
        border-radius: 3em;
        background-color: transparent;
        color: #ff0000;
        cursor: pointer;
    }
    
    .active {
        background-color: #ff3333;
        color: #ffffff;
    }
    
    .hide {
        display: none;
    }
    `;
    document.head.appendChild(style);

    let cc = document.createElement("div");
    cc.id = "products";
    document.body.appendChild(cc);

    let btns = document.createElement("div");
    btns.id = "buttons";
    document.body.appendChild(btns);
})();

let products = {
    data: [
        {
            productName: "Alan Wake Remasterd",
            developer: "Epic Games",
            genre: "",
            pegi: "16",
            platforms: ["Xbox Series X"],
            price: "24.99",
            image: "images/images/xbox/alan-wake-remastered-xbox.jpg",
        },
        {
            productName: "Battlefield 2042",
            developer: "Electronic Arts",
            genre: "",
            pegi: "16",
            platforms: ["Xbox Series X", "PlayStation 5"],
            price: "24.99",
            image: "images/images/xbox/battlefield-2042-xbox.jpg",
        },
    ],
};

//no spaces allowed in class names, filter them out with _
function platformToClassName (platform) {
    return platform.replaceAll(" ", "_");
}

//get the products container
let cardContainer = document.getElementById("products");

//get the filter buttons container
let filterButtonsContainer = document.getElementById("buttons");

//create a filter button given its textContent
function createFilterButton (platform) {
    let platformButton = document.createElement("button");
    platformButton.textContent = platform;
    platformButton.classList.add("button-value");

    platformButton.addEventListener("click", (evt)=>{
        filterProduct(platformButton.textContent);
    });
    filterButtonsContainer.appendChild(platformButton);
}

//create a card in UI
function createProductCard (product) {
    // Create Card
    let card = document.createElement("div");
    // Card should have a category and should stay hidden initialy
    card.classList.add("card", "hide");

    for (let platform of product.platforms) {
        let platformClassName = platformToClassName(platform);
        card.classList.add(platformClassName);
    }
    
    cardContainer.appendChild(card);

    // image div
    let imgContainer = document.createElement("div");
    imgContainer.classList.add("image-container");
    card.appendChild(imgContainer);

    // img tag
    let image = document.createElement("img");
    image.setAttribute("src", product.image);
    imgContainer.appendChild(image);
    
    // Container
    let container = document.createElement("div");
    container.classList.add("container");
    card.appendChild(container);
    
    // Product Name
    let name = document.createElement("h5");
    name.classList.add("product-name");
    name.innerText = product.productName.toUpperCase();
    container.appendChild(name);
    
    // Product Price
    let price = document.createElement("h6");
    price.innerText = "$" + product.price;
    container.appendChild(price);
}

//create a display of products given their object data
function populateProducts (products) {
    let platforms = new Set(); //collection of platforms given the data from products

    for (let i of products.data) {
        //collect the platforms from the product
        for (let platform of i.platforms) {
            platforms.add(platform);
        }
        console.log(i);
        createProductCard(i);
    }

    //create buttons
    createFilterButton("all");

    for (let platform of platforms) {
        createFilterButton(platform);
    }
}

//actually do the operation
populateProducts(products);

// Parameter passed from button (Parameter same as category)
function filterProduct(value) {

    // Select buttons
    let buttons = document.querySelectorAll(".button-value");
    // Loop through them
    for (let button of buttons) {
        
        // Check if value equals innerText
        let VALUE = value.toUpperCase();
        let BUTTON_TEXT = button.textContent.toUpperCase();
        console.log(VALUE, BUTTON_TEXT);

        if (VALUE == BUTTON_TEXT) {
            button.classList.add("active");
        } else {
            button.classList.remove("active");
        }
    }

    //class names can't have spaces, convert it
    value = platformToClassName(value);

    // Select card elements
    let elements = document.querySelectorAll(".card");
    // Loop through them
    for (let element of elements) {
        
        // update which cards are shown based on what filtered value is
        if (value == "all" || element.classList.contains(value)) {
            element.classList.remove("hide");
        } else {
            element.classList.add("hide");
        }

    }
}

这是粘贴到控制台，如果你想尝试一下。