Skip to content

Commit 2a46f76

Browse files
Avansh2006Avansh2006
committed
Whishlist added
1 parent d393add commit 2a46f76

File tree

3 files changed

+815
-17
lines changed

3 files changed

+815
-17
lines changed

‎Html-files/menu.html

+80-16
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,27 @@
316316
.fa-brands.fa-x-twitter:hover {
317317
color: #181e20 !important;
318318
}
319+
.wishBtn{
320+
font-family: var(--ff-poppins);padding: 10px 20px;
321+
background-color: rgb(196, 74, 74);
322+
color: white;
323+
border: none;
324+
border-radius: 5px;
325+
cursor: pointer;
326+
margin-top: 5px;
327+
}
328+
.menu_items .items {
329+
background-color: #f2f2f2;
330+
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
331+
border: 1px solid rgb(186, 186, 201);
332+
margin: 50px 10px;
333+
height: 416px;
334+
width: 230px;
335+
border-radius: 10px;
336+
text-align: center;
337+
font-family: "Bree Serif", serif;
338+
/* transition: 0.5s ease-in-out; */
339+
}
319340
</style>
320341
</head>
321342

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

430-
<div class="star-rating">
451+
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
431452
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
432453
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
433454
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -446,7 +467,7 @@ <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
446467
<p style="font-family: Garamond;">$10.20</p>
447468
<button class="butt add-to-cart-button" data-product-id="1.02" data-product-name="Radio"
448469
data-product-price="10.20" style="font-family:var(--ff-philosopher);">Order Now</button>
449-
<div class="star-rating">
470+
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
450471
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
451472
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
452473
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -466,7 +487,7 @@ <h3 style="font-family: var(--ff-philosopher);">Television</h3>
466487
<p style="font-family: Garamond;">$10.20</p>
467488
<button class="butt add-to-cart-button" data-product-id="1.03" data-product-name="Television"
468489
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
469-
<div class="star-rating">
490+
<button class="wishBtn" >Add to Wishlist</button><div class="star-rating">
470491
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
471492
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
472493
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -485,6 +506,7 @@ <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
485506
<p style="font-family: Garamond;">$10.20</p>
486507
<button class="butt add-to-cart-button" data-product-id="1.04" data-product-name="Movie Screen Carpet"
487508
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
509+
<button class="wishBtn">Add to Wishlist</button>
488510
<div class="star-rating">
489511
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
490512
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
@@ -507,7 +529,7 @@ <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
507529
<p style="font-family: Garamond;">$10.20</p>
508530
<button class="butt add-to-cart-button" data-product-id="1.05" data-product-name="Toys"
509531
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
510-
<div class="star-rating">
532+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
511533
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
512534
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
513535
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -526,7 +548,7 @@ <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
526548
<p style="font-family: Garamond;">$10.20</p>
527549
<button class="butt add-to-cart-button" data-product-id="1.06" data-product-name="Puppet Show"
528550
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
529-
<div class="star-rating">
551+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
530552
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
531553
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
532554
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -545,7 +567,7 @@ <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
545567
<p style="font-family: Garamond;">$10.20</p>
546568
<button class="butt add-to-cart-button" data-product-id="1.07" data-product-name="Marbles"
547569
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
548-
<div class="star-rating">
570+
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
549571
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
550572
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
551573
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -564,7 +586,7 @@ <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
564586
<p style="font-family: Garamond;">$10.20</p>
565587
<button class="butt add-to-cart-button" data-product-id="1.08" data-product-name="Drinks"
566588
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
567-
<div class="star-rating">
589+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
568590
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
569591
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
570592
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -595,7 +617,7 @@ <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
595617
<p style="font-family: Garamond;">$5.10</p>
596618
<button class="butt add-to-cart-button" data-product-id="2.01" data-product-name="Telephone"
597619
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
598-
<div class="star-rating">
620+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
599621
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
600622
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
601623
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -614,7 +636,7 @@ <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
614636
<p style="font-family: Garamond;">$5.10</p>
615637
<button class="butt add-to-cart-button" data-product-id="2.02" data-product-name="Pager"
616638
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
617-
<div class="star-rating">
639+
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
618640
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
619641
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
620642
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -633,7 +655,7 @@ <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
633655
<p style="font-family: Garamond;">$5.10</p>
634656
<button class="butt add-to-cart-button" data-product-id="Snacks" data-product-name="Camera"
635657
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
636-
<div class="star-rating">
658+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
637659
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
638660
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
639661
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -653,7 +675,7 @@ <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
653675
<button class="butt add-to-cart-button" data-product-id="2.04" data-product-name="Type Writer"
654676
style="font-family: Garamond;" data-product-price="5.10"
655677
style="font-family: var(--ff-philosopher);">Order Now</button>
656-
<div class="star-rating">
678+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
657679
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
658680
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
659681
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -677,7 +699,7 @@ <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
677699
<p style="font-family: Garamond;">$15.80</p>
678700
<button class="butt add-to-cart-button" data-product-id="3.01" data-product-name="Cross Bow"
679701
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
680-
<div class="star-rating">
702+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
681703
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
682704
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
683705
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -696,7 +718,7 @@ <h3 style="font-family: var(--ff-philosopher); font-size: 25px">Catapult</h3>
696718
<p style="font-family: Garamond;">$15.80</p>
697719
<button class="butt add-to-cart-button" data-product-id="3.02" data-product-name="Catapult"
698720
style="font-family: var(--ff-philosopher);" data-product-price="15.80">Order Now</button>
699-
<div class="star-rating">
721+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
700722
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
701723
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
702724
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -715,7 +737,7 @@ <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
715737
<p style="font-family: Garamond;">$15.80</p>
716738
<button class="butt add-to-cart-button" data-product-id="3.03" data-product-name="Sedan Chair"
717739
data-product-price="15.80" style="font-family: var(--ff-philosopher);">Order Now</button>
718-
<div class="star-rating">
740+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
719741
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
720742
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
721743
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -733,7 +755,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
733755
<p style="font-family: Garamond;">$15.80</p>
734756
<button class="butt add-to-cart-button" data-product-id="3.04" data-product-name="Palsnkin"
735757
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
736-
<div class="star-rating">
758+
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
737759
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
738760
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
739761
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
@@ -989,7 +1011,49 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow
9891011
<script src="cart.js"></script>
9901012
<div class="gtranslate_wrapper"></div>
9911013
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
992-
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
1014+
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer>
1015+
</script>
1016+
<script>
1017+
document.addEventListener('DOMContentLoaded', function () {
1018+
let WishlistButtons = document.querySelectorAll('.wishBtn');
1019+
1020+
WishlistButtons.forEach(function (Wish) {
1021+
Wish.addEventListener('click', function (event) {
1022+
if (event.target.classList.contains('wishBtn')) {
1023+
var item = event.target.closest('.items');
1024+
var itemName = item.querySelector('h3').textContent;
1025+
var itemPrice = item.querySelector('p').textContent;
1026+
1027+
// Retrieve existing wishlist items from localStorage
1028+
var Wishlists = JSON.parse(localStorage.getItem('Wishlists')) || [];
1029+
1030+
// Check if the item already exists in the wishlist
1031+
var itemExists = Wishlists.some(function (wishlistItem) {
1032+
return wishlistItem.name === itemName;
1033+
});
1034+
1035+
if (itemExists) {
1036+
// If the item exists, show a prompt that it already exists
1037+
alert("This item is already in your wishlist.");
1038+
} else {
1039+
// If the item doesn't exist, add it to the wishlist
1040+
var newWish = { name: itemName, price: itemPrice };
1041+
Wishlists.push(newWish);
1042+
1043+
// Save updated wishlist back to localStorage
1044+
localStorage.setItem('Wishlists', JSON.stringify(Wishlists));
1045+
1046+
alert("Item added to Wishlist successfully");
1047+
1048+
// Redirect to the wishlist page
1049+
window.location.href = "wishlist.html";
1050+
}
1051+
}
1052+
});
1053+
});
1054+
});
1055+
1056+
</script>
9931057
</body>
9941058

9951059
</html>

0 commit comments

Comments
 (0)