Skip to content

On scrolling to Home, About, Menu and Review section we get those in the navbar highlighted respectively #689

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

Open
HetuKariya wants to merge 4 commits into
base: main
Choose a base branch
from
Open

On scrolling to Home, About, Menu and Review section we get those in the navbar highlighted respectively #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d8c4f2
Duplicate Icecreams Removed
Oct 18, 2024
be8c1fe
Merge branch 'main' of https://github.com/HetuKariya/basic-icecream-w…
Oct 19, 2024
80f021d
Merge branch 'main' of https://github.com/HetuKariya/basic-icecream-w…
Oct 19, 2024
7574881
Scroll Down Effect added to Home, About, Menu and Review in Navbar
Oct 20, 2024
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
70 changes: 51 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,41 @@
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>


<script>
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll("section");
const navLinks = document.querySelectorAll(".navbar .nav-link");

const observerOptions = {
threshold: 0.27, // Adjust to detect when 60% of the section is visible
};

const observer = new IntersectionObserver(function (entries) {
entries.forEach(entry => {
const activeSectionId = entry.target.getAttribute("id");

if (entry.isIntersecting) {
// When the section is in view, add the active class to the corresponding nav link
const activeLink = document.querySelector(`.navbar a[href="#${activeSectionId}"]`);
if (activeLink) {
activeLink.classList.add("active");
}
} else {
// When the section is not in view, remove the active class from the corresponding nav link
const inactiveLink = document.querySelector(`.navbar a[href="#${activeSectionId}"]`);
if (inactiveLink) {
inactiveLink.classList.remove("active");
}
}
});
}, observerOptions);

sections.forEach(section => {
observer.observe(section);
});
});
</script>

<style>
.chatbot-container {
Expand Down Expand Up @@ -322,11 +356,11 @@ <h1 class="site-title">ArcticDelights</h1>
<nav class="navbar">


<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#home" class="nav-link">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#menu" class="nav-link">Menu</a>
<a href="offers.html">Offers</a>
<a href="#review-section">Review</a>
<a href="#review-section" class="nav-link">Reviews</a>
<a href="blog.html">Blogs</a>
<a href="contact.html">Contact Us</a>
<a href="#" id="my-order-btn">My Orders</a>
Expand All @@ -338,7 +372,6 @@ <h1 class="site-title">ArcticDelights</h1>
<div class = "fas fa-heart" id = "wishlist-btn"></div>
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-shopping-cart" id="cart-btn"><span id="cart-count">(0)</span></div>

</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
Expand Down Expand Up @@ -815,13 +848,13 @@ <h3 id="pro-name">Very Very Peachy</h3>
<div class="box" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200"
data-aos-anchor-placement="top-bottom">
<div class="picture">
<img src="https://images.unsplash.com/photo-1559340160-146586a4f9b6" alt="">
<img src="images/download (8).jpeg" alt="">

<h3 id="pro-name">Orange Pops</h3>
<h3 id="pro-name">Vanilla</h3>

<div class="flip">Refreshing frozen delights bursting with zesty orange flavor, offering a sunny, sweet, and tangy treat that’s perfect for cooling off on a hot day!</div>
<div class="flip">Vanilla ice cream is a classic, creamy flavor made from vanilla beans. It’s smooth, versatile, and pairs well with various toppings and desserts.</div>
</div>
<div class="price"> $12.99 <span>20.99</span></div>
<div class="price"> $13.99 <span>15.99</span></div>
<button id="inbox" onclick="addToCart('Orange Pops', 12.99)">Add to Cart</button><br>
<div class="noofitems">
<button class="plus-minus" onclick="decreaseQuantity('Orange Pops')">-</button>
Expand All @@ -837,14 +870,14 @@ <h3 id="pro-name">Orange Pops</h3>
<div class="box" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200"
data-aos-anchor-placement="top-bottom">
<div class="picture">
<img src="https://images.unsplash.com/photo-1594305178909-03ab72b8205e" alt="">
<img src="/images/download (7).jpeg" alt="">

<h3 id="pro-name">Choco-Hazel Pops</h3>
<h3 id="pro-name">Chocolate</h3>

<div class="flip">Indulgent frozen treats infused with rich chocolate and crunchy hazelnuts, creating a decadent and nutty flavor experience that melts delightfully in every bite!</div>
<div class="flip">Chocolate ice cream is rich, smooth, and indulgent, made with cocoa or melted chocolate. It's a classic, loved for its deep, sweet flavor.</div>
</div>

<div class="price"> $18.99 <span>20.99</span></div>
<div class="price"> $16.99 <span>20.99</span></div>
<button id="inbox" onclick="addToCart('Choco-Hazel Pops', 18.99)">Add to Cart</button><br>
<div class="noofitems">
<button class="plus-minus" onclick="decreaseQuantity('Choco-Hazel Pops')">-</button>
Expand All @@ -860,15 +893,14 @@ <h3 id="pro-name">Choco-Hazel Pops</h3>
<div class="box" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200"
data-aos-anchor-placement="top-bottom">
<div class="picture">
<img src="https://images.unsplash.com/photo-1499638472904-ea5c6178a300" alt="">
<img src="images/download (3).jpeg" alt="">

<h3 id="pro-name">Very Very Peachy</h3>
<div class="price"> $16.99 <span>20.99</span></div>
<h3 id="pro-name">Superman Icecream</h3>
<div class="price"> $18.99 <span>21.99</span></div>

<div class="flip">A refreshing and juicy delight packed with the sweet, sunny flavor of ripe peaches, delivering a taste of summer in every delicious bite!</div>
<div class="flip">Superman ice cream is a colorful, fun treat with vibrant swirls of red, blue, and yellow. It often has fruity or vanilla bubblegum-like flavors.</div>
</div>

<div class="price"> $15.99 <span>20.99</span></div>
<button id="inbox" onclick="addToCart('Very Very Peachy',15.99)">Add to Cart</button><br>
<div class="noofitems">
<button class="plus-minus" onclick="decreaseQuantity('Very Very Peachy')">-</button>
Expand Down
1 change: 1 addition & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
searchForm.classList.remove('active');
cartItem.classList.remove('active');
};

function filterItems() {
const selectedPrice = priceFilter.value;
const searchFlavor = flavorFilter.value.toLowerCase();
Expand Down
30 changes: 16 additions & 14 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,15 @@ button:hover {
color: var(--text-color);
}

.nav-link {
font-weight: normal;
transition: font-weight 0.3s ease;
}

.nav-link.active {
font-weight: bold;
}

/*wishlist styles */

.wishlist-container {
Expand Down Expand Up @@ -487,25 +496,19 @@ button:hover {

.header .search-form {
position: absolute;
top: calc(100% + 1rem);
/* Adjusted to position below header */
top: calc(100% + 1rem); /* Adjusted to position below header */
right: 7%;
background-color: var(--background-color);
width: 20rem;
/* Adjusted width for better fit */
width: 20rem; /* Adjusted width for better fit */
height: auto;
display: none;
/* Initially hidden */
display: none; /* Initially hidden */
padding: 1rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
/* Added box shadow */
z-index: 100;
/* Ensure it's above other content */
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); /* Added box shadow */
z-index: 100; /* Ensure it's above other content */
}

.header .search-form.active {
display: flex;
/* Show when active */
display: flex; /* Show when active */
}

.header .search-form input {
Expand All @@ -521,8 +524,7 @@ button:hover {
cursor: pointer;
font-size: 2.2rem;
color: var(--text-color);
margin-left: 1rem;
/* Adjusted margin */
margin-left: 1rem; /* Adjusted margin */
}

.header .search-form label:hover {
Expand Down