Skip to content

Commit

Permalink
added search bar and price filter in pricing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhavya-taneja
bhavya-taneja committed Jun 6, 2024
1 parent 203b3c4 commit 1b90ffb
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 17 deletions.
Binary file added notFound.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 122 additions & 17 deletions package.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,16 +155,121 @@
</div>




<section class="trip" id="trip">
<div class="section__container trip__container">
<h2 class="section__title">Best trip package</h2>
<p class="section__subtitle">
Explore your suitable and dream places around the world. Here you can
find your right destination.
</p>
Explore your suitable and dream places around the world. Here you can find your right destination.</p>
</b></h2>

<!-- filter html -->
<div class="filter-search">
<select class="price-filter" id="priceFilter" onchange="filterProducts()">
<option value="">All Prices</option>
<option value="400">Below $400</option>
<option value="500">Below $500</option>
<!-- Add more options as needed -->
</select>

<!-- search button html -->
<form onsubmit="search(event)" class="search-bar">
<input type="text" id ="find" placeholder="search places" onkeyup="search()" name="q">
<button type="submit" value="search" ><b>GO!</b></button>
</form>
</div>
<h2 id="noResults" style="display: none;" ><b>NO RESULTS FOUND</b> <img src="notFound.jpg" ></h2>
<!-- search styling -->
<style>
.filter-search {
display: flex;
align-items: center;
}
.price-filter{
display: flex;
margin-left: auto;
position: absolute;
top: 38%;
right: 11%;
transform: translateY(-50%);
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fcfdff;
color: #333;
font-size: 15px;
}
.search-bar{
width: 90%;
height: 50%;
max-width: 100%;
background:rgba(0, 13, 79, 0.696);
display: flex;
align-items: center;
border-radius: 58px;
padding: 10px 10px;
}
.search-bar input{
background: rgb(255, 255, 255);
flex: 1;
border-radius: 60px;
outline: none;
padding: 10px 20px;
font-size: 15px;
color: #0c0c0c;
}
.search-bar button{
border: 0;
border-radius: 40%;
width: 50px;
height: 40px;
color: #0b0a0a;
font-size: small;
background:#ffffffb8;
cursor: pointer;
}
</style>

<!--javascript for functionality of search button-->
<script type="text/javascript">
function search(event){
event.preventDefault();
let filter = document.getElementById('find').value.toUpperCase();
let item = document.querySelectorAll('.trip__card');
let l = document.getElementsByTagName('p');
var found = false;
for(var i = 0; i < l.length; i++){
let a = item[i].getElementsByTagName('p')[0];
let value = a.innerHTML || a.innerText || a.textContent;
if(value.toUpperCase().indexOf(filter) > -1) {
item[i].style.display = "";
found = true;
}
else {
item[i].style.display = "none";
document.getElementById("noResults").style.display = found ? "none" : "block";
}
}
}
</script>
<!-- filter's functionality -->
<script>
function filterProducts() {
var priceFilter = document.getElementById('priceFilter').value;
var products = document.getElementsByClassName('trip__card');

for (var i = 0; i < products.length; i++) {
var productPrice = parseFloat(products[i].querySelector('.price').getAttribute('data-price'));
if (priceFilter === "" || productPrice <= parseFloat(priceFilter)) {
products[i].style.display = "block";
} else {
products[i].style.display = "none";
}
}
}
</script>

<!-- end of search button -->

<div class="trip__grid">

<div class="trip__card">
Expand All @@ -173,7 +278,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Santorini ,Aegean Sea</p>
<div class="rating"><i class="ri-star-fill"></i> 4.2</div>
<div class="booking__price">
<div class="price"><span>From</span> $300</div>
<div class="price" id="filter" data-price="300"><span>From</span> $300</div>
<a href="./dedicated-destinations/santorini-aegean-sea/start.html"><button class="book__now">Book
Now</button></a>
</div>
Expand All @@ -185,7 +290,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Machu Picchu ,Peru</p>
<div class="rating"><i class="ri-star-fill"></i> 4.5</div>
<div class="booking__price">
<div class="price"><span>From</span> $450</div>
<div class="price"id="filter" data-price="450"><span>From</span> $450</div>
<a href="./dedicated-destinations/machu-picchu-peru/Machu_start.html"><button class="book__now">Book
Now</button></a>
</div>
Expand All @@ -197,7 +302,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Grand Canyon National Park ,Arizona</p>
<div class="rating"><i class="ri-star-fill"></i> 4.7</div>
<div class="booking__price">
<div class="price"><span>From</span> $400</div>
<div class="price" id="filter" data-price="400"><span>From</span> $400</div>
<a href="./dedicated-destinations/grand-canyon-national-park-arizona/Grand_start.html"><button
class="book__now">Book Now</button></a>
</div>
Expand All @@ -209,7 +314,7 @@ <h2 class="section__title">Best trip package</h2>
<p>London</p>
<div class="rating"><i class="ri-star-fill"></i> 4.2</div>
<div class="booking__price">
<div class="price"><span>From</span> $300</div>
<div class="price" id="filter" data-price="300"><span>From</span> $300</div>
<a href="./dedicated-destinations/london/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -220,7 +325,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Dubai</p>
<div class="rating"><i class="ri-star-fill"></i> 4.5</div>
<div class="booking__price">
<div class="price"><span>From</span> $450</div>
<div class="price"id="filter" data-price="450"><span>From</span> $450</div>
<a href="./dedicated-destinations/dubai/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -231,7 +336,7 @@ <h2 class="section__title">Best trip package</h2>
<p>New York</p>
<div class="rating"><i class="ri-star-fill"></i> 4.7</div>
<div class="booking__price">
<div class="price"><span>From</span> $400</div>
<div class="price" id="filter" data-price="400"><span>From</span> $400</div>
<a href="./dedicated-destinations/new-york/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -243,7 +348,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Paris</p>
<div class="rating"><i class="ri-star-fill"></i> 4.2</div>
<div class="booking__price">
<div class="price"><span>From</span> $300</div>
<div class="price" id="filter" data-price="300"><span>From</span> $300</div>
<a href="./dedicated-destinations/paris/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -254,7 +359,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Goa</p>
<div class="rating"><i class="ri-star-fill"></i> 4.5</div>
<div class="booking__price">
<div class="price"><span>From</span> $450</div>
<div class="price" id="filter" data-price="450"><span>From</span> $450</div>
<a href="./dedicated-destinations/goa/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -265,7 +370,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Kashmir</p>
<div class="rating"><i class="ri-star-fill"></i> 4.7</div>
<div class="booking__price">
<div class="price"><span>From</span> $400</div>
<div class="price" id="filter" data-price="400"><span>From</span> $400</div>
<a href="./dedicated-destinations/kashmir/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -276,7 +381,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Maldives</p>
<div class="rating"><i class="ri-star-fill"></i> 4.2</div>
<div class="booking__price">
<div class="price"><span>From</span> $300</div>
<div class="price" id="filter" data-price="300"><span>From</span> $300</div>
<a href="./dedicated-destinations/maldives/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -287,7 +392,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Bali</p>
<div class="rating"><i class="ri-star-fill"></i> 4.5</div>
<div class="booking__price">
<div class="price"><span>From</span> $450</div>
<div class="price" id="filter" data-price="450"><span>From</span> $450</div>
<a href="./dedicated-destinations/bali/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand All @@ -299,7 +404,7 @@ <h2 class="section__title">Best trip package</h2>
<p>Brazil</p>
<div class="rating"><i class="ri-star-fill"></i> 4.7</div>
<div class="booking__price">
<div class="price"><span>From</span> $400</div>
<div class="price" id="filter" data-price="400"><span>From</span> $400</div>
<a href="./dedicated-destinations/brazil/start.html"><button class="book__now">Book Now</button></a>
</div>
</div>
Expand Down

0 comments on commit 1b90ffb

Please sign in to comment.