Skip to content

Commit

Permalink
merge fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmbitiousCoder-07
AmbitiousCoder-07 committed Jun 15, 2024
1 parent 50127e2 commit c8e86e9
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 58 deletions.
70 changes: 70 additions & 0 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,77 @@ body {
box-shadow: 0px 5px 5px rgba(177, 0, 0, 0.429);
}

.filter_container {
text-align: center;
margin: 20px 0;
color: aliceblue;
background-color: transparent;
}

.filter_container h2 {
font-size: 24px;
margin-bottom: 20px;
}

.filter_container .filters {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

.filter_container label {
font-size: 16px;
margin-right: 10px;
}

.filter_container select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}

.filter_container select:hover,
.filter_container select:focus {
border-color: #dc3545;
}

.filter_container button {
padding: 10px 20px;
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.filter_container button:hover {
background-color: #dc3545;
}

@media (max-width: 768px) {
.filter_container .filters {
flex-direction: column;
align-items: stretch;
}

.filter_container label,
.filter_container select,
.filter_container button {
width: 100%;
margin-bottom: 10px;
}

.filter_container button {
margin-top: 10px;
}
}



Expand Down
37 changes: 37 additions & 0 deletions Html-files/MenuAPI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,3 +208,40 @@ function cartBtn() {
}

cartBtn();

function filterMenu() {
const priceFilter = document.getElementById('filter-price').value;

const menuItems = document.querySelectorAll('.menu-items .item');

menuItems.forEach(item => {
const itemName = item.querySelector('h3').innerText;
const itemPrice = parseFloat(item.querySelector('p').innerText.replace('$', ''));
let priceMatch = false;

switch (priceFilter) {
case 'all':
priceMatch = true;
break;
case '0-5':
priceMatch = itemPrice >= 0 && itemPrice <= 5;
break;
case '5-10':
priceMatch = itemPrice > 5 && itemPrice <= 10;
break;
case '10-15':
priceMatch = itemPrice > 10 && itemPrice <= 15;
break;
case '15-20':
priceMatch = itemPrice > 15 && itemPrice <= 20;
break;
}

if (priceMatch) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
}

53 changes: 1 addition & 52 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,7 @@ <h1 class="m-0">OUR MENU</h1>

<section class="filter_container">
<div class="filters">
<label for="filter-category">Category:</label>
<select id="filter-category">
<option value="all">All</option>
<option value="Snacks">Snacks</option>
<option value="Dessert">Dessert</option>
<option value="Juices">Juices</option>
<option value="Indian Thali">Indian Thali</option>
</select>


<label for="filter-price">Price Range:</label>
<select id="filter-price">
<option value="all">All</option>
Expand All @@ -114,10 +106,6 @@ <h1 class="m-0">OUR MENU</h1>
<div class="col-12 col-sm-6 col-md-3 col-xl-1 mx-auto">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
</div>
<button class="butt add-to-cart-button" data-product-id="1.01" data-product-name="Indian Thali"
data-product-price="10.20">Add to Cart</button>


</div>
<div class="col-12 col-md-9">
<div class="menu-items">
Expand Down Expand Up @@ -269,45 +257,6 @@ <h4>Follow Us</h4>
);
</script>
<script src="top.js"></script>
<script>
function filterMenu() {
const categoryFilter = document.getElementById('filter-category').value;
const priceFilter = document.getElementById('filter-price').value;

const menuItems = document.querySelectorAll('.menu_items .items');

menuItems.forEach(item => {
const itemName = item.querySelector('h3').innerText;
const itemPrice = parseFloat(item.querySelector('p').innerText.replace('$', ''));
let categoryMatch = categoryFilter === 'all' || itemName.includes(categoryFilter);
let priceMatch = false;

switch (priceFilter) {
case 'all':
priceMatch = true;
break;
case '0-5':
priceMatch = itemPrice >= 0 && itemPrice <= 5;
break;
case '5-10':
priceMatch = itemPrice > 5 && itemPrice <= 10;
break;
case '10-15':
priceMatch = itemPrice > 10 && itemPrice <= 15;
break;
case '15-20':
priceMatch = itemPrice > 15 && itemPrice <= 20;
break;
}

if (categoryMatch && priceMatch) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
}
</script>

</body>

Expand Down
4 changes: 1 addition & 3 deletions Html-files/menu.js → Html-files/menuStars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,4 @@ document.addEventListener('DOMContentLoaded', () => {
starButton.classList.remove('greyed');
});
}
});


});
Binary file modified Images/foodie.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions effect.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* #icons-container {
display: none;
} */
.food-icon {
width: 50px;
height: 50px;
position: absolute;
pointer-events: none; /* Ensure the icon does not block mouse events */
transform: translate(-0%, -0%) scale(1);
transition: transform 1.2s, opacity 1s;
opacity: 1;
z-index: 1000;
}
.food-icon.active {
transform: translate(-50%, 120%) scale(0);
opacity: 0;
}
#food-icon {
width: 50px;
height: 50px;
position: absolute;
pointer-events: none; /* Ensure the icon does not block mouse events */
display: none; /* Hide initially */
}
53 changes: 53 additions & 0 deletions effect.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
document.addEventListener('DOMContentLoaded', () => {
const foodIcon = document.getElementById('food-icon');

document.addEventListener('mousemove', (e) => {
foodIcon.style.left = `${e.pageX - 20}px`;
foodIcon.style.top = `${e.pageY - 13}px`;
foodIcon.style.display = 'block'; // Show the icon when the mouse moves
});

document.addEventListener('mouseout', () => {
foodIcon.style.display = 'none'; // Hide the icon when the mouse leaves the document
});
});
document.addEventListener('DOMContentLoaded', () => {
const foodIcons = Array.from(document.getElementsByClassName('food-icon'));
let isAnimating = false;

document.addEventListener('mousemove', (e) => {
if (isAnimating) return;

const randomIndex = Math.floor(Math.random() * foodIcons.length);
const selectedIcon = foodIcons[randomIndex].cloneNode(true);
document.body.appendChild(selectedIcon);

let x = e.clientX;
let y = e.clientY;
let scrollLeft = window.pageXOffset;
let scrollTop = window.pageYOffset;
let relativeX = x + scrollLeft;
let relativeY = y + scrollTop;

selectedIcon.style.left = `${relativeX}px`;
selectedIcon.style.top = `${relativeY}px`;

// Trigger the animation by adding the class after a short delay
setTimeout(() => {
selectedIcon.classList.add('active');
}, 10);

isAnimating = true;

// Allow new animation after 0.5 seconds
setTimeout(() => {
isAnimating = false;
}, 80);

// Remove the icon element after the animation ends
selectedIcon.addEventListener('transitionend', () => {
selectedIcon.remove();
});
});
});

3 changes: 0 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,9 +444,6 @@ body{

/* APP DOWNLOAD SECTION */
.app_download {
display: flex;
flex-direction: column;
align-items: center;
background-color: brown;
height: fit-content;
color: white;
Expand Down

0 comments on commit c8e86e9

Please sign in to comment.