Skip to content

Commit

Permalink
Feature/changes in about page (#113)
Browse files Browse the repository at this point in the history 
<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
<!--Please include a brief description of the changes-->
1)Added Telephone image which was previously not visible.
2)Instead of pop-up alert message, displayed added to cart message above
the image so that user doesn't have to click ok button (of alert box
)again and again.
3)Added cart count badge so that the user can know how many items have
been added to cart.


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #39 Add functionality to display the 'Added to Cart' message
below the product image.

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [feature Request] ()

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->

![image](https://github.com/user-attachments/assets/65366875-4861-471d-873f-164f1fe00ba5)


https://github.com/user-attachments/assets/4c1bdb69-3130-4108-9f8f-3f4caeb91760





## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [ X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 3, 2024
2 parents db70c1e + 0e01f39 commit b70d49c
Show file tree
Hide file tree
Showing 9 changed files with 371 additions and 177 deletions.
29 changes: 29 additions & 0 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,3 +564,32 @@ input
margin-top: 5px;
}

.added-to-cart {
position: absolute;
margin-top: -30px;
margin-left: 53px;
display: flex;
transition: opacity 0.5s ease, max-height 0.5s ease;
opacity: 0;
}

.check-mark{
width: 17px !important;
height : 17px !important;
font-size: 16.5px;
}

.js-display-added-to-cart {
opacity: 1;
}

#badgeCount {
position: relative;
top: -7px;
right: 1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}
Binary file added Favicon image/check-mark.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.
15 changes: 14 additions & 1 deletion Html-files/Electronic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,18 @@
::-webkit-scrollbar-button {
display: none;
}

#badgeCount {
position: relative;
top: -7px;
right: 1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}

/*Animation sliders*/
.wrapper{
width: 100%;
Expand Down Expand Up @@ -531,7 +543,7 @@
<li><a href="menu.html" style="color: black;">About</a></li>
<li><a href="services.html" style="color: black;">Services</a></li>
<li><a href="contact.html" style="color: black;">Contact us</a></li>
<li><a href="cart.html" style="color: black;">Cart</a></li>
<li><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
</ul>
</nav>
</header>
Expand Down Expand Up @@ -827,5 +839,6 @@ <h2 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h2>
document.querySelector('.slide').prepend(items[items.length - 1])
})
</script>
<script src="cart.js"></script>
</body>
</html>
213 changes: 114 additions & 99 deletions Html-files/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,66 +24,80 @@
rel="stylesheet">
<style>
/*Preloader CSS*/
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(20, 43%, 93%);
/* Light background color */
display: flex;
justify-content: center;
align-items: center;
transition: opacity 2s ease-out, visibility 2s ease-out;
opacity: 1;
visibility: visible;
z-index: 9999;
/* Ensure the preloader is above all other content */
}


/* When hidden, preloader transitions out */
#preloader.hidden {
opacity: 0;
visibility: hidden;
}

#loader {
display: block;
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(304, 14%, 46%);
animation: spin 3s linear infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 37%, 62%);
animation: spin 2s linear infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 93%, 84%);
animation: spin 1.5s linear infinite;
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(20, 43%, 93%); /* Light background color */
display: flex;
justify-content: center;
align-items: center;
transition: opacity 2s ease-out, visibility 2s ease-out;
opacity: 1;
visibility: visible;
z-index: 9999; /* Ensure the preloader is above all other content */
}


/* When hidden, preloader transitions out */
#preloader.hidden {
opacity: 0;
visibility: hidden;
}

#loader {
display: block;
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(304, 14%, 46%);
animation: spin 3s linear infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 37%, 62%);
animation: spin 2s linear infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 93%, 84%);
animation: spin 1.5s linear infinite;
}

#badgeCount {
position: relative;
top: -7px;
right: 1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

@keyframes spin {
Expand Down Expand Up @@ -247,44 +261,45 @@
<body>
<div id="preloader">
<div id="loader"></div>
</div>
<div class="circle-container">
<div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>
<div class="head_container" style="background-color: transparent;font-family: Georgia;">
<header>
<nav class="navbar">
<ul id="header-items">
<li><a href="../Home.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
<li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
<li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
<li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
<li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart</a></li>
</ul>
</nav>
</header>

<div class="mainhead">
<h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
</div>
<div class="circle-container">
<div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>
<div class="head_container" style="background-color: transparent;font-family: Georgia;">
<header>
<nav class="navbar">
<ul id="header-items">
<li><a href="../index.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
<li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
<li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
<li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
<li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart <span class="badge-count" id="badgeCount"></span></a></li>
</ul>
</nav>
</header>

<div class="mainhead">
<h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
</div>
</div>
</div>

Expand Down Expand Up @@ -418,7 +433,7 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
</div>
</div>
</footer>
<script src="cart.js">
<script src="cart.js"></script>

</script>

Expand Down
70 changes: 42 additions & 28 deletions Html-files/cart.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
//CODE FOR TABLE OF ADD TO CART
document.addEventListener('DOMContentLoaded', () => {
loadCartFromLocalStorage();

document.getElementById('cart-items').addEventListener('click', (event) => {
if (event.target.classList.contains('increase-quantity')) {
updateQuantity(event.target, 1);
} else if (event.target.classList.contains('decrease-quantity')) {
updateQuantity(event.target, -1);
}
});
updateBadgeCount() ; // update badge on load
if (document.getElementById('cart-items')){
document.getElementById('cart-items').addEventListener('click', (event) => {
if (event.target.classList.contains('increase-quantity')) {
updateQuantity(event.target, 1);
} else if (event.target.classList.contains('decrease-quantity')) {
updateQuantity(event.target, -1);
}
});
}
});

function loadCartFromLocalStorage() {
const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = ''; // Clear existing items
if(cartItemsContainer){
cartItemsContainer.innerHTML = ''; // Clear existing items

cartItems.forEach(item => {
const cartItemRow = document.createElement('tr');
cartItemRow.className = 'cart-item';
cartItemRow.setAttribute('data-product-id', item.id);
cartItemRow.setAttribute('data-product-price', item.price);
cartItemRow.innerHTML = `
<td>${item.name}</td>
<td>$${item.price.toFixed(2)}</td>
<td class="quantity">${item.quantity}</td>
<td>
<button class="decrease-quantity">-</button>
<button class="increase-quantity">+</button>
</td>
`;
cartItemsContainer.appendChild(cartItemRow);
});
cartItems.forEach(item => {
const cartItemRow = document.createElement('tr');
cartItemRow.className = 'cart-item';
cartItemRow.setAttribute('data-product-id', item.id);
cartItemRow.setAttribute('data-product-price', item.price);
cartItemRow.innerHTML = `
<td>${item.name}</td>
<td>$${item.price.toFixed(2)}</td>
<td class="quantity">${item.quantity}</td>
<td>
<button class="decrease-quantity">-</button>
<button class="increase-quantity">+</button>
</td>
`;
cartItemsContainer.appendChild(cartItemRow);
});

updateTotal();
updateTotal();
}
}

function updateQuantity(button, change) {
Expand Down Expand Up @@ -70,6 +74,7 @@ function saveCartToLocalStorage() {
});
});
localStorage.setItem('cartItems', JSON.stringify(cartItems));
updateBadgeCount(); // update badge count after saving
}
//CODE FOR COUPON RECEIVED ON CLICKING ORDER NOW
// Function to generate a random coupon code
Expand All @@ -88,7 +93,16 @@ const applyFirstTimeDiscount = () => {
couponCode = generateCouponCode();
localStorage.setItem('couponCode', couponCode);
}
document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
if(document.getElementById('couponCode')){
document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
}

}
window.onload = applyFirstTimeDiscount;

function updateBadgeCount() {
const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
const totalQuantity = cartItems.reduce((total, item) => total + item.quantity, 0);
document.getElementById('badgeCount').innerText = totalQuantity;
}
Loading

0 comments on commit b70d49c

Please sign in to comment.