Untitled
unknown
plain_text
4 months ago
1.7 kB
1
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>
Leave a Comment