Skip to content

Commit

Permalink
feat: search functionality in city restaurant page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanidhiya-khandelwal
sanidhiya-khandelwal committed Dec 22, 2023
1 parent 81d76ea commit 6b5edd0
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 2 deletions.
80 changes: 80 additions & 0 deletions cityFood.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,14 @@ header {
display: none;
}

.dish {
display: flex;
flex-direction: column;
position: relative;
}

.dish-container {
padding: 0.25rem 0;
padding-right: 8rem;
display: flex;
gap: 1rem;
Expand All @@ -110,6 +117,78 @@ header {
font-size: 0.9rem;
}


.search-dish-container {
border-radius: 5px;
background-color: white;
z-index: 3;
position: absolute;
top: 3rem;
height: 88vh;
width: 100%;
padding: 0.6rem 0rem 1rem 0rem;
overflow: scroll;
overflow-x: hidden;
border: 1px solid rgb(207, 207, 207);
box-shadow: rgba(28, 28, 28, 0.08) 0px 2px 8px;
transition: opacity 0.25s ease 0s, top 0.25s ease 0s;
display: none;
}

.search-restaurant-container-img-details {
display: flex;
gap: 1rem;
height: auto;
padding: 0.8rem 0.8rem;
margin-bottom: 1rem;
cursor: pointer;
}

.search-restaurant-container-img-details:hover {
border-radius: 9px;
background-color: rgba(178, 216, 227, 0.176);
}

.search-restaurant-container-img-details img {
border-radius: 5px;
width: 8rem;
object-fit: cover;
}

.search-restaurant-container-details {}

.search-restaurant-rating-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 30%;
padding: 0.2rem;
border-radius: 5px;
background-color: green;
color: white;
font-size: 0.7rem;
margin: 0.3rem 0;
}

.search-restaurant-order-now {
display: flex;
gap: 0.2rem;
align-items: center;
color: red;
margin: 0.6rem 0;
}

.search-restaurant-deliverytime {
color: rgb(130, 130, 130);
}

.notfound-message {
color: rgb(156, 156, 156);
padding: 0.5rem 1rem;
display: none;
}


.right-header {
display: flex;
justify-content: space-around;
Expand Down Expand Up @@ -687,6 +766,7 @@ header {

}


.discount-container {
position: absolute;
bottom: 100px;
Expand Down
18 changes: 18 additions & 0 deletions cityFood.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,24 @@
<img src="./assets/icons/search (2).png" alt="search-icon">
<input type="text" placeholder="Search for restaurant, cuisine or a dish" class="search-input">
</div>
<div class="search-dish-container">
<!-- <div class="search-restaurant-container-img-details">
<img src="./assets/food/karchi.avif" alt="" class="search-restaurant-img">
<div class="search-restaurant-container-details">
<p class="search-restaurant-heading">Bikanervala</p>
<div class="search-restaurant-rating-container">
<b class="search-restaurant-rating">4.3</b>
<p class="search-star-icon" style="margin: 0px 0px 3px 2px;">☆</p>
</div>
<div class="search-restaurant-order-now">
<p class="order-now">Order now</p>
<img src="./assets/icons/red-right-arrow.png" alt="" style="width: 1.1rem;">
</div>
<p class="search-restaurant-deliverytime">Delivery in 45 mins</p>
</div>
</div> -->
</div>
</div>
</div>
</div>
Expand Down
102 changes: 101 additions & 1 deletion cityFood.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6312,4 +6312,104 @@ deliveryContainerSM.addEventListener('click', () => {
diningOutContainerSM.addEventListener('click', () => {
diningOutContainerSM.style.borderTop = "2px solid red";
deliveryContainerSM.style.borderTop = "2px solid white";
})
})


// search functionality

var searchInput = document.querySelector('.search-input');
var searchDishContainer = document.querySelector('.search-dish-container');

searchInput.addEventListener('input', function () {
searchDishContainer.innerHTML = '';

var searchedRestaurants = deliveryRestaurants.filter((item) =>
(item.restaurantName.toLowerCase().includes(searchInput.value.toLowerCase()) ||
item.cuisine.toLowerCase().includes(searchInput.value.toLowerCase())) &&
searchInput.value.length > 0)

if (searchedRestaurants.length == 0 && searchInput.value.length != 0) {
searchDishContainer.style.display = 'block';
searchDishContainer.style.overflowY = 'hidden'
searchDishContainer.style.color = 'rgb(156, 156, 156)';
searchDishContainer.style.padding = '1.3rem 1rem';
searchDishContainer.innerHTML = 'Oops! <br><p style="font-size:0.8rem; margin-top:0.2rem">We could not understand what you mean,try rephrasing the query.</p>'
searchDishContainer.style.height = 'auto';

}
else {
searchedRestaurants.forEach((item, idx) => {
searchDishContainer.style.display = 'block';
searchDishContainer.style.height = '88vh';
searchDishContainer.style.backgroundColor = 'white';
displayRestaurantOnSearch(item, idx);
});

if (searchInput.value.length === 0) {
searchDishContainer.style.display = 'none';
}
}
});


function displayRestaurantOnSearch(item, idx) {
var searchDishContainer = document.querySelector('.search-dish-container');

var searchRestaurantContainerImgDetails = document.createElement('div');
searchRestaurantContainerImgDetails.classList.add('search-restaurant-container-img-details');

var searchRestaurantImg = document.createElement('img');
searchRestaurantImg.classList.add('search-restaurant-img');
searchRestaurantImg.src = item.img;
searchRestaurantContainerImgDetails.appendChild(searchRestaurantImg);

var searchRestaurantContainerDetails = document.createElement('div');
searchRestaurantContainerDetails.classList.add('search-restaurant-container-details');

//restaurant name
var searchRestaurantHeading = document.createElement('p');
searchRestaurantHeading.classList.add('search-restaurant-heading');
searchRestaurantHeading.textContent = item.restaurantName;
searchRestaurantContainerDetails.appendChild(searchRestaurantHeading);

// rating
var searchRestaurantRatingContainer = document.createElement('div');
searchRestaurantRatingContainer.classList.add('search-restaurant-rating-container');


let restaurantRating = document.createElement('b');
restaurantRating.classList.add('search-restaurant-rating');
restaurantRating.textContent = item.rating;
searchRestaurantRatingContainer.appendChild(restaurantRating)

let starIcon = document.createElement('p');
starIcon.classList.add('search-star-icon')
starIcon.innerHTML = '&#9734';
starIcon.style.margin = '0 0 3px 2px';
searchRestaurantRatingContainer.appendChild(starIcon)

searchRestaurantContainerDetails.appendChild(searchRestaurantRatingContainer);

let searchRestaurantOrderNow = document.createElement('div');
searchRestaurantOrderNow.classList.add('search-restaurant-order-now');
let orderNow = document.createElement('p');
orderNow.classList.add('order-now');
orderNow.textContent = 'Order Now';
searchRestaurantOrderNow.appendChild(orderNow);

let redRightArrow = document.createElement('img');
redRightArrow.src = './assets/icons/red-right-arrow.png';
redRightArrow.style.width = '1.1rem';
searchRestaurantOrderNow.appendChild(redRightArrow);
searchRestaurantContainerDetails.appendChild(searchRestaurantOrderNow);

let searchRestaurantDeliverytime = document.createElement('p');
searchRestaurantDeliverytime.classList.add('search-restaurant-deliverytime');
searchRestaurantDeliverytime.textContent = 'Delivery in ' + item.delieveryTime;
searchRestaurantContainerDetails.appendChild(searchRestaurantDeliverytime);


searchRestaurantContainerImgDetails.appendChild(searchRestaurantContainerDetails);

searchDishContainer.appendChild(searchRestaurantContainerImgDetails);
}
3 changes: 2 additions & 1 deletion restrauntDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,13 +241,13 @@ document.addEventListener('DOMContentLoaded', function () {
cuisineCountHTML.classList.add('cuisine-count');

cuisineCountHTML.textContent = ' ' + '(' + key + ')';

var cusineNameHTML = document.createElement('p');
cusineNameHTML.classList.add('cuisine-name', 'cuisine-name-small-screen');
cusineNameHTML.textContent = value1;
cusineNameHTML.setAttribute('id', value1 + '1');
cusineNameHTML.appendChild(cuisineCountHTML);
orderOnlineOptions.append(cusineNameHTML);
// console.log('cusineNameHTML', cusineNameHTML);

//scroll into view

Expand All @@ -265,6 +265,7 @@ document.addEventListener('DOMContentLoaded', function () {

cusineNameHTML.addEventListener('click', () => {
var cuisineNames = document.querySelectorAll('.cuisine-name');
console.log('cuisineNames', cuisineNames);
cuisineNames.forEach(function (item) {
if (screenWidth <= 900) {
item.style.fontWeight = '100';
Expand Down

0 comments on commit 6b5edd0

Please sign in to comment.