Skip to content

Commit

Permalink
Whishlist added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Avansh2006
Avansh2006 committed Oct 24, 2024
1 parent d393add commit 2a46f76
Show file tree
Hide file tree
Showing 3 changed files with 815 additions and 17 deletions.
96 changes: 80 additions & 16 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,27 @@
.fa-brands.fa-x-twitter:hover {
color: #181e20 !important;
}
.wishBtn{
font-family: var(--ff-poppins);padding: 10px 20px;
background-color: rgb(196, 74, 74);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
}
.menu_items .items {
background-color: #f2f2f2;
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
border: 1px solid rgb(186, 186, 201);
margin: 50px 10px;
height: 416px;
width: 230px;
border-radius: 10px;
text-align: center;
font-family: "Bree Serif", serif;
/* transition: 0.5s ease-in-out; */
}
</style>
</head>

Expand Down Expand Up @@ -427,7 +448,7 @@ <h3 style="font-family: var(--ff-philosopher);">Phonograph</h3>
<button class="butt add-to-cart-button" data-product-id="1.01" data-product-name="Phonograph"
data-product-price="10.20" style="font-family:var(--ff-philosopher);">Order Now</button>

<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -446,7 +467,7 @@ <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.02" data-product-name="Radio"
data-product-price="10.20" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -466,7 +487,7 @@ <h3 style="font-family: var(--ff-philosopher);">Television</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.03" data-product-name="Television"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn" >Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -485,6 +506,7 @@ <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.04" data-product-name="Movie Screen Carpet"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<button class="wishBtn">Add to Wishlist</button>
<div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
Expand All @@ -507,7 +529,7 @@ <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.05" data-product-name="Toys"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -526,7 +548,7 @@ <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.06" data-product-name="Puppet Show"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -545,7 +567,7 @@ <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.07" data-product-name="Marbles"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -564,7 +586,7 @@ <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.08" data-product-name="Drinks"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand Down Expand Up @@ -595,7 +617,7 @@ <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.01" data-product-name="Telephone"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -614,7 +636,7 @@ <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.02" data-product-name="Pager"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -633,7 +655,7 @@ <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="Snacks" data-product-name="Camera"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -653,7 +675,7 @@ <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
<button class="butt add-to-cart-button" data-product-id="2.04" data-product-name="Type Writer"
style="font-family: Garamond;" data-product-price="5.10"
style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -677,7 +699,7 @@ <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.01" data-product-name="Cross Bow"
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -696,7 +718,7 @@ <h3 style="font-family: var(--ff-philosopher); font-size: 25px">Catapult</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.02" data-product-name="Catapult"
style="font-family: var(--ff-philosopher);" data-product-price="15.80">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -715,7 +737,7 @@ <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.03" data-product-name="Sedan Chair"
data-product-price="15.80" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -733,7 +755,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.04" data-product-name="Palsnkin"
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand Down Expand Up @@ -989,7 +1011,49 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow
<script src="cart.js"></script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer>
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
let WishlistButtons = document.querySelectorAll('.wishBtn');

WishlistButtons.forEach(function (Wish) {
Wish.addEventListener('click', function (event) {
if (event.target.classList.contains('wishBtn')) {
var item = event.target.closest('.items');
var itemName = item.querySelector('h3').textContent;
var itemPrice = item.querySelector('p').textContent;

// Retrieve existing wishlist items from localStorage
var Wishlists = JSON.parse(localStorage.getItem('Wishlists')) || [];

// Check if the item already exists in the wishlist
var itemExists = Wishlists.some(function (wishlistItem) {
return wishlistItem.name === itemName;
});

if (itemExists) {
// If the item exists, show a prompt that it already exists
alert("This item is already in your wishlist.");
} else {
// If the item doesn't exist, add it to the wishlist
var newWish = { name: itemName, price: itemPrice };
Wishlists.push(newWish);

// Save updated wishlist back to localStorage
localStorage.setItem('Wishlists', JSON.stringify(Wishlists));

alert("Item added to Wishlist successfully");

// Redirect to the wishlist page
window.location.href = "wishlist.html";
}
}
});
});
});

</script>
</body>

</html>
Loading

0 comments on commit 2a46f76

Please sign in to comment.