Skip to content

Commit

Permalink
Filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Oct 16, 2024
1 parent ce3b037 commit 2cb39ca
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 33 deletions.
59 changes: 47 additions & 12 deletions favorite.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,29 @@
body {
font-family: "Noto Kufi Arabic", sans-serif;
}
.filter-btn {
position: relative;
background-color: transparent;
transition: color 0.3s;
}

.filter-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: #C10D10;
transition: width 0.4s ease-in-out;
}

.filter-btn.active::after {
width: 100%;
right: 0;
left: auto;
}

</style>
<body >
<!-- Start Navbar -->
Expand All @@ -32,18 +55,19 @@
<div class="container mx-auto p-5">
<h2 class="text-[#2B2F4E] font-bold sm:text-[40px] text-2xl mt-5"> ♥️ قائمة المفضلة</h2>
<div class="flex flex-col gap-3 lg:flex-row lg:gap-5 mb-6"></div>
<button class="filter-btn bg-[#C10D10] font-semibold md:py-2 md:px-4 py-1 px-1 border text-white rounded lg:w-[113px]">
الكل
</button>
<button class="filter-btn bg-transparent text-black font-semibold md:py-2 md:px-4 py-1 px-1 border border-[#C10D10] rounded lg:w-[140px]">
إعلانات
</button>
<button class="filter-btn bg-transparent text-black font-semibold md:py-2 md:px-4 py-1 px-1 border border-[#C10D10] rounded lg:w-[180px]">
مزودي الخدمة
</button>
<button class="filter-btn bg-transparent text-black font-semibold md:py-2 md:px-4 py-1 px-1 border border-[#C10D10] rounded lg:w-[138px]">
خدمات
</button>
<button class="filter-btn active text-black font-semibold md:py-2 md:px-4 py-1 px-1 rounded w-auto">
الكل
</button>
<button class="filter-btn text-black font-semibold md:py-2 md:px-4 py-1 px-1 rounded w-auto">
إعلانات
</button>
<button class="filter-btn text-black font-semibold md:py-2 md:px-4 py-1 px-1 rounded w-auto">
مزودي الخدمة
</button>
<button class="filter-btn text-black font-semibold md:py-2 md:px-4 py-1 px-1 rounded w-auto">
خدمات
</button>

<!--
<div id="cardContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 relative mt-5">
<div class="card relative" data-category="ads">
Expand Down Expand Up @@ -202,5 +226,16 @@ <h2 class="sm:text-[39.19px] text-2xl font-medium text-[#111827]">قائمة ا
<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->

<script>
const buttons = document.querySelectorAll('.filter-btn');

buttons.forEach(button => {
button.addEventListener('click', () => {
buttons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
});
});
</script>
</body>
</html>
31 changes: 28 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,29 @@
body {
font-family: "Noto Kufi Arabic", sans-serif;
}
.filter-btn {
position: relative;
background-color: transparent;
transition: color 0.3s;
}

.filter-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #C10D10;
transition: width 0.4s ease-in-out;
}

.filter-btn.active::after {
width: 100%;
right: 0;
left: auto;
}

.gradient-border {
border-width: 3px;
border-style: solid;
Expand Down Expand Up @@ -71,13 +94,15 @@ <h2 class=" sm:text-2xl text-sm font-bold px-2 md:px-0 text-right xl:text-3xl lt
<div class="container mx-auto mt-4 px-4 mb-8">
<!-- Buttons -->
<div class="flex gap-3 flex-row lg:gap-5 mb-6">
<button onclick="filterCards('all')" class="filter-btn bg-[#C10D10] font-semibold py-2 px-4 border text-white rounded w-full text-[12px] md:text-base sm:text-[15px] lg:w-[200px]">
<button onclick="filterCards('all')" class="filter-btn active font-semibold py-2 px-4 text-black rounded text-[12px] md:text-base sm:text-[15px] w-auto">
الكل
<div class="w-6 h-2 text-[#C10D10]"></div>

</button>
<button onclick="filterCards('ads')" class="filter-btn bg-transparent text-black font-semibold py-2 px-4 border border-[#C10D10] rounded w-full text-[12px] md:text-base sm:text-[15px] lg:w-[200px]">
<button onclick="filterCards('ads')" class="filter-btn bg-transparent text-black font-semibold py-2 px-4 rounded text-[12px] md:text-base sm:text-[15px] w-auto">
أبرز الإعلانات التجارية
</button>
<button onclick="filterCards('personal')" class="filter-btn bg-transparent text-black font-semibold py-2 px-4 border border-[#C10D10] rounded w-full text-[12px] md:text-base sm:text-[15px] lg:w-[200px]">
<button onclick="filterCards('personal')" class="filter-btn bg-transparent text-black font-semibold py-2 px-4 rounded text-[12px] md:text-base sm:text-[15px] w-auto">
أبرز الإعلانات الشخصية
</button>
</div>
Expand Down
35 changes: 17 additions & 18 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,28 +45,27 @@ document.addEventListener("DOMContentLoaded", function() {

// Swap Buttons in Index
function filterCards(category) {
const cards = document.querySelectorAll('.card');
const buttons = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.card');
const buttons = document.querySelectorAll('.filter-btn');

buttons.forEach(btn => {
if (btn.textContent.trim() === getButtonText(category)) {
btn.classList.remove('bg-transparent', 'text-black', 'border-[#C10D10]');
btn.classList.add('bg-[#C10D10]', 'text-white');
} else {
btn.classList.remove('bg-[#C10D10]', 'text-white');
btn.classList.add('bg-transparent', 'text-black', 'border-[#C10D10]');
}
});
buttons.forEach(btn => {
if (btn.textContent.trim() === getButtonText(category)) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});

cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
}


function getButtonText(category) {
switch(category) {
case 'all': return 'الكل';
Expand Down

0 comments on commit 2cb39ca

Please sign in to comment.