Skip to content

Fixed Issue#73: Added links to footer items using JavaScript #77

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
iamvetruvian wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixed Issue#73: Added links to footer items using JavaScript #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2384c29
Added a Cart Icon with functionality to add and remove items from cart
iamvetruvian Oct 2, 2024
66f31a3
Added links to footer section using JavaScript
iamvetruvian Oct 3, 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
79 changes: 76 additions & 3 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,17 @@ body.nav-active { overflow: hidden; }
margin-inline: auto;
}

/* Cart anchor styling */
#cart-anchor {
display: flex;
align-items: center;
cursor: pointer;
}

#cart-anchor:hover .span {
color: var(--gold-crayola); /* Similar hover effect as other items */
}

.contact-number::after { bottom: -5px; }

.text-center { text-align: center; }
Expand Down Expand Up @@ -303,6 +314,11 @@ body.nav-active { overflow: hidden; }
padding: 12px 45px;
overflow: hidden;
z-index: 1;


}
.menu-card .add-to-cart {
margin-left: 15px; /* Adds space between price and button */
}

.btn::before {
Expand Down Expand Up @@ -992,9 +1008,28 @@ body.nav-active { overflow: hidden; }

.menu-card {
display: flex;
align-items: flex-start;
gap: 20px;
/* align-items: flex-start; */
/* gap: 20px; */
}
.menu-card {
display: grid;
grid-template-columns: 150px 500px 300px 300px;
grid-template-rows: auto; /* Two equal columns */
/* height: 50px; */
row-gap: 5px;
gap: 20px; /* Gap between the columns */
align-items: center; /* Aligns buttons vertically */
}

/* .menu-card .btn {
width: 150px;
text-align: center;
} */

/* .menu-card .title-wrapper {
margin-bottom: 15px;
} */


.hover\:card .card-banner { background-color: var(--gold-crayola); }

Expand Down Expand Up @@ -2051,4 +2086,42 @@ textarea.input-field {
left: 0;
}

}
}

.footer-list .footer-link {
position: relative;
display: inline-block;
padding-bottom: 2px;
transition: color 0.3s ease-in-out;
}

.footer-list .footer-link::before,
.footer-list .footer-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.4s ease, left 0.4s ease, background-color 0.3s ease-in-out;
}

.footer-list .footer-link::before {
transform: translateY(-4px);
}

.footer-list .footer-link::after {
transform: translateY(4px);
}

.footer-list .footer-link:hover::before,
.footer-list .footer-link:hover::after {
width: 100%;
left: 0;
background-color: #e4c491;
}

.footer-list .footer-link:hover {
color: #e4c491;
}
59 changes: 55 additions & 4 deletions assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,58 @@ const addEventOnElements = function (elements, eventType, callback) {
}
}

let youtube = "https://www.youtube.com";
let instagram = "https://www.instagram.com";
let twitter = "https://www.x.com";
let maps = "https://maps.google.com";
let facebook = 'https://www.facebook.com';

document.querySelector("#twt").setAttribute('href', twitter);
document.querySelector("#utube").setAttribute('href', youtube);
document.querySelector("#map").setAttribute('href', maps);
document.querySelector("#instagram").setAttribute('href', instagram);
document.querySelector("#facebook").setAttribute('href', facebook);

// Select the cart anchor and elements
const cartAnchor = document.getElementById("cart-anchor");
const addToCartButtons = document.querySelectorAll(".add-to-cart");
const removeFromCartButtons = document.querySelectorAll(".remove");

let cartItemCount = 0;

// Function to update cart text
const updateCartDisplay = () => {
if (cartItemCount > 99) {
cartAnchor.querySelector(".span").textContent = "Cart 99+";
} else if (cartItemCount > 0) {
cartAnchor.querySelector(".span").textContent = `Cart ${cartItemCount}`;
} else {
cartAnchor.querySelector(".span").textContent = "Cart";
}
};

// Add event listeners to "Add to Cart" buttons
addToCartButtons.forEach(button => {
button.addEventListener("click", () => {
cartItemCount += 1;
updateCartDisplay();
});
});

// Add event listeners to "Remove" buttons
removeFromCartButtons.forEach(button => {
button.addEventListener("click", () => {
if (cartItemCount > 0) {
cartItemCount -= 1;
updateCartDisplay();
}
});
});

// Initialize the cart display on page load
window.addEventListener("load", updateCartDisplay);




/**
Expand Down Expand Up @@ -51,7 +103,6 @@ const emailElements = document.querySelectorAll("[data-email]");
//click event now
addEventOnElements(emailElements, "click", openMailClient);


/**
* HERO SLIDER
*/
Expand Down Expand Up @@ -113,8 +164,7 @@ addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function
});

addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseout", autoSlide);

window.addEventListener("load", autoSlide);
w.addEventListener("load", autoSlide);



Expand All @@ -141,4 +191,5 @@ window.addEventListener("mousemove", function (event) {
parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
}

});
});

88 changes: 76 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,16 @@

<span class="span">Number</span>
</a>
<a href="#" class="topbar-item link" id="cart-anchor">
<div class="icon">
<ion-icon name="cart-outline" aria-hidden="true"></ion-icon>
</div>
<span class="span">Cart</span>
</a>

<div class="separator"></div>

<a href="mailto:booking@restaurant.com" class="topbar-item link">
<a href="mailto:booking@restaurant.com" class="topbar-item link">
<div class="icon">
<ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
</div>
Expand Down Expand Up @@ -332,8 +338,8 @@ <h1 class="display-1 hero-title slider-reveal">
<h2 class="headline-1 section-title">We Offer Top Notch</h2>

<p class="section-text">
Enjoy a premium dining experience with exceptional culinary artistry at Grilli.
</p>
Get the best in class dining experience with the most articulate culinary craftsmanship at Grilli. Bon Apétit!
</p>

<ul class="grid-list">

Expand Down Expand Up @@ -431,7 +437,7 @@ <h3 class="title-4 card-title">

<p class="label-2 section-subtitle" id="about-label">Our Story</p>

<h2 class="headline-1 section-title">Every favour tells a story</h2>
<h2 class="headline-1 section-title">Where Every Flavor Tells a Story</h2>

<p class="section-text">
Every dish is prepared articulately with our chef's utmost skills. This has made us one of the few Michelin Star rated hotels across the world. Our finely blended wines are one of the most exquisite and have been featured at the wine spectator awards. Check them out from our drinks section!
Expand Down Expand Up @@ -495,7 +501,7 @@ <h2 class="headline-1 section-title">Every favour tells a story</h2>
<h2 class="headline-1 section-title">Lobster Tortellini</h2>

<p class="section-text">
Lobster Tortellini showcases tender pasta pockets stuffed with juicy lobster, bathed in a creamy, herb-infused sauce with a touch of zesty citrus. This exquisite dish merges Italian culinary artistry with premium seafood for an extraordinary dining indulgence.
Lobster Tortellini features delicate pasta parcels filled with succulent lobster, served in a rich, velvety sauce infused with fresh herbs and a hint of citrus. This luxurious dish blends Italian craftsmanship with the finest seafood for an unforgettable dining experience.
</p>

<div class="wrapper">
Expand Down Expand Up @@ -561,7 +567,14 @@ <h3 class="title-3">
</p>

</div>

<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>
</div>
</li>

Expand All @@ -588,6 +601,14 @@ <h3 class="title-3">
</p>

</div>
<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>

</div>
</li>
Expand Down Expand Up @@ -615,6 +636,14 @@ <h3 class="title-3">
</p>

</div>
<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>

</div>
</li>
Expand Down Expand Up @@ -644,6 +673,14 @@ <h3 class="title-3">
</p>

</div>
<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>

</div>
</li>
Expand Down Expand Up @@ -671,6 +708,14 @@ <h3 class="title-3">
</p>

</div>
<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>

</div>
</li>
Expand Down Expand Up @@ -698,7 +743,14 @@ <h3 class="title-3">
</p>

</div>

<button class="btn btn-primary add-to-cart">
<span class="text text-1">Add to Cart</span>
<span class="text text-2" aria-hidden="true">Add to Cart</span>
</button>
<button class="btn btn-primary remove">
<span class="text text-1">Remove</span>
<span class="text text-2" aria-hidden="true">Remove</span>
</button>
</div>
</li>

Expand Down Expand Up @@ -1150,23 +1202,23 @@ <h3 class="card-title title-2 text-center">
<ul class="footer-list">

<li>
<a class="label-2 footer-link hover-underline">Facebook</a>
<a id="facebook" class="label-2 footer-link hover-underline">Facebook</a>
</li>

<li>
<a class="label-2 footer-link hover-underline">Instagram</a>
<a id="instagram" class="label-2 footer-link hover-underline">Instagram</a>
</li>

<li>
<a class="label-2 footer-link hover-underline">Twitter</a>
<a id="twt" class="label-2 footer-link hover-underline">Twitter</a>
</li>

<li>
<a class="label-2 footer-link hover-underline">Youtube</a>
<a id="utube" class="label-2 footer-link hover-underline">Youtube</a>
</li>

<li>
<a class="label-2 footer-link hover-underline">Google Map</a>
<a id="map" class="label-2 footer-link hover-underline">Google Map</a>
</li>

</ul>
Expand All @@ -1183,6 +1235,18 @@ <h3 class="card-title title-2 text-center">



<!--
- #BACK TO TOP
-->

<a href="" class="back-top-btn active">
<ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
</a>





<!--
- custom js link
-->
Expand Down