Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added Popular Categories with full logic #1266

Merged
merged 1 commit into from
Aug 2, 2024
Merged

feat: Added Popular Categories with full logic #1266

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 46 additions & 16 deletions blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,20 @@ <h1>↓</h1>
<!-- Blog posts will be dynamically inserted here -->
</section>
<aside>
<div class="widget semi-transparent-box">
<h3>Categories</h3>
<ul>
<li><a href="#">Backpacker <span>(6)</span></a></li>
<li><a href="#">Hiking <span>(1)</span></a></li>
<li><a href="#">Tips <span>(2)</span></a></li>
<li><a href="#">Tourism <span>(4)</span></a></li>
<li><a href="#">Travel <span>(6)</span></a></li>
<li><a href="#">Travel Tips <span>(7)</span></a></li>
<li><a href="#">Traveling <span>(5)</span></a></li>
<li><a href="#">Uncategorized <span>(1)</span></a></li>
<li><a href="#">World Tour <span>(21)</span></a></li>
<div class="widget semi-transparent-box" id="categories-widget">
<h3>Popular Categories</h3>
<ul id="categories-list">
<!-- Categories will be dynamically inserted here -->
</ul>
</div>

<div class="widget semi-transparent-box">
<h3>Useful Links</h3>
<ul>
<li><a href="#">Travel Insurance Guide</a></li>
<li><a href="#">Packing Essentials Checklist</a></li>
<li><a href="#">Budget Travel Hacks</a></li>
<li><a href="#">Solo Travel Safety Tips</a></li>
<li><a href="./plantrip.html">Plan Your Trip</a></li>
<li><a href="./index.html#hotel">Book Your Hotel</a></li>
<li><a href="./feedback.html">Rate Our Services</a></li>
<li><a href="./index.html#testimonials">Know from Our Past Customers</a></li>
</ul>
</div>
<div class="widget semi-transparent-box">
Expand Down Expand Up @@ -264,6 +257,43 @@ <h4>${post.title}</h4>
});
});

function displayTopCategories() {
const categoriesCount = {};

blogPosts.forEach(post => {
post.tags.forEach(tag => {
if (categoriesCount[tag]) {
categoriesCount[tag]++;
} else {
categoriesCount[tag] = 1;
}
});
});

const sortedCategories = Object.entries(categoriesCount)
.sort((a, b) => b[1] - a[1])
.slice(0, 5);

const categoriesList = document.getElementById('categories-list');
categoriesList.innerHTML = '';

sortedCategories.forEach(([category, count]) => {
const listItem = document.createElement('li');
listItem.innerHTML = `<a href="#" onclick="filterPostsByTag('${category}')">${category} <span>(${count})</span></a>`;
categoriesList.appendChild(listItem);
});
}

// Display posts and top categories when the document is loaded
displayPosts(blogPosts);
displayTopCategories();

// Add event listener for reset filters button
document.getElementById('reset-filters').addEventListener('click', () => {
displayPosts(blogPosts);
});


window.addEventListener('scroll', () => {
const header = document.querySelector('.hero');
if (window.scrollY > 50) {
Expand Down
Loading