Untitled

avatar
unknown
plain_text
a year ago
1.7 kB
8
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Clothing Store</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <%- include('partials/header') %>

    <section class="filter-section">
        <label for="clothing-type">Select Clothing Type:</label>
        <select id="clothing-type" onchange="filterClothes()">
            <option value="all">All</option>
            <option value="tops">Tops</option>
            <option value="bottoms">Bottoms</option>
            <option value="dresses">Dresses</option>
            <option value="outerwear">Outerwear</option>
            <option value="accessories">Accessories</option>
        </select>
    </section>

    <section class="gallery">
        <% products.forEach(product => { %>
        <div class="clothing-item" data-type="<%= product.type %>">
            <img src="<%= product.image %>" alt="<%= product.name %>">
            <p><%= product.name %></p>
            <p>$<%= product.price %></p>
        </div>
        <% }); %>
    </section>

    <script>
        function filterClothes() {
            const clothingType = document.getElementById("clothing-type").value;
            const clothingItems = document.querySelectorAll(".clothing-item");

            clothingItems.forEach(item => {
                if (clothingType === "all" || item.getAttribute("data-type") === clothingType) {
                    item.style.display = "block";
                } else {
                    item.style.display = "none";
                }
            });
        }
    </script>
</body>
</html>
Editor is loading...
Leave a Comment