To add sorting functionality based on both **date** and **category name**, we will:
1. Include a `data-date` attribute on each grid item representing the date (in a format that is easy to compare, such as `YYYY-MM-DD`).
2. Include a `data-category` attribute on each grid item representing the category name.
We'll then add additional buttons for sorting by date and category, and modify the JavaScript to handle these new sorting options.
Here’s the updated HTML, CSS, and JavaScript:
```html
Sortable Grid Layout with Image Holders
```
### Key Additions:
1. **`data-date` and `data-category` Attributes**:
- Each grid item now has a `data-date` attribute for storing the item's date (in `YYYY-MM-DD` format).
- A `data-category` attribute is added to store the category name.
2. **New Sorting Buttons**:
- `Sort by Date (Oldest First)` and `Sort by Date (Newest First)` buttons are added to allow sorting by the date attribute.
- `Sort by Category (A-Z)` and `Sort by Category (Z-A)` buttons are added to allow sorting by the category attribute.
3. **JavaScript Sorting Functions**:
- `sortByDate(order)`: Sorts the grid items by their `data-date` attribute.
- `sortByCategory(order)`: Sorts the
Sortable Grid Layout with Image Holders
Item 1
Date: 2023-01-15
Category: Technology
Item 2
Date: 2022-12-05
Category: Lifestyle
Item 3
Date: 2023-07-22
Category: Health
Item 4
Date: 2023-03-08
Category: Sports
Item 5
Date: 2022-11-10
Category: Education