-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCategories.html
137 lines (125 loc) · 4.65 KB
/
Categories.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Categories</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Book Categories</h1>
</header>
<br>
<br>
<!-- Filter Section -->
<div class="container">
<div class="row filter-section">
<div class="col-md-4">
<!-- Category Filter -->
<select class="form-control" id="categoryFilter">
<option value="">All Categories</option>
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
<option value="romance">Romance</option>
<option value="fantasy">Fantasy</option>
<option value="mystry">Mystry</option>
<!-- Add more categories as needed -->
</select>
</div>
<div class="col-md-4">
<!-- Sorting Options -->
<select class="form-control" id="sortingOptions">
<option value="relevance">Relevance</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
<option value="date-new">Publication Date: Newest First</option>
<option value="date-old">Publication Date: Oldest First</option>
</select>
</div>
</div>
</div>
<!-- Book Cards Section -->
<div class="container">
<div class="row" id="bookCards">
<!-- Book cards will be dynamically added here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Sample book data (Replace with your actual book data)
const books = [
{ title: "Rich Dad Poor Dad", category: "fiction", price: 99, publicationDate: "1997" },
{ title: "The Art OF thinking", category: "non-fiction", price: 79, publicationDate: "7 September 2019" },
{ title: "Iki Gai", category: "romance", price: 59, publicationDate: "29 August 2017" },
{ title: "The Adventures of Tom Sawyer", category: "fantasy", price: 199, publicationDate: "June 1876" },
{ title: "When-it-Rains", category: "mystery", price: 69, publicationDate: "10 October 2013" },
// Add more book objects as needed
];
// Function to render book cards based on filters and sorting
function renderBooks(categoryFilter, sortingOption) {
let filteredBooks = books;
// Apply category filter
if (categoryFilter) {
filteredBooks = filteredBooks.filter(book => book.category === categoryFilter);
}
// Apply sorting
switch (sortingOption) {
case "price-low":
filteredBooks.sort((a, b) => a.price - b.price);
break;
case "price-high":
filteredBooks.sort((a, b) => b.price - a.price);
break;
case "date-new":
filteredBooks.sort((a, b) => new Date(b.publicationDate) - new Date(a.publicationDate));
break;
case "date-old":
filteredBooks.sort((a, b) => new Date(a.publicationDate) - new Date(b.publicationDate));
break;
// Default is relevance or no sorting
}
// Render book cards
const bookCardsContainer = $("#bookCards");
bookCardsContainer.empty();
filteredBooks.forEach(book => {
const card = `
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${book.title}</h5>
<p class="card-text">Category: ${book.category}</p>
<p class="card-text">Price: $${book.price}</p>
<p class="card-text">Publication Date: ${book.publicationDate}</p>
</div>
</div>
</div>
`;
bookCardsContainer.append(card);
});
}
// Event listeners for filters and sorting options
$("#categoryFilter, #sortingOptions").change(function() {
const categoryFilter = $("#categoryFilter").val();
const sortingOption = $("#sortingOptions").val();
renderBooks(categoryFilter, sortingOption);
});
// Initial render
renderBooks(null, "relevance");
</script>
</div>
</body>
</html>