From d66e1908b4a5b864ef66e81c9400253c212074ef Mon Sep 17 00:00:00 2001
From: Shivasingh15 <shivasinghrajput2004@gmail.com>
Date: Thu, 10 Oct 2024 01:56:13 +0530
Subject: [PATCH] New feature added like button

---
 index.html | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  |  12 ++++++
 2 files changed, 130 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ae4165ad..445cd707 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,20 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                 <div class="btn-section">
                 <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                 <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                <button onclick="Toggle1()"id="btnh1" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar1 = document.getElementById('btnh1');
+                    function Toggle1(){
+                        if (btnvar1.style.color =="red") {
+                            btnvar1.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar1.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/controller1.png" class="controller" alt="Controller">
@@ -112,8 +125,21 @@ <h3>Controllers for Xbox One and Series X</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle2()" id="btnh2" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
-            </div>
+                <script>
+                    var btnvar2 = document.getElementById('btnh2');
+                    function Toggle2(){
+                        if (btnvar2.style.color =="red") {
+                            btnvar2.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar2.style.color="red"
+                        }
+                    }
+                </script>
+            </div>>
             <div class="col-2">
                 <img src="images/newcontroller3.png" class="controller" alt="Controller"> <!-- replaced old blurry image with enhanced image -->
                 <div class="color-box"></div>
@@ -143,7 +169,20 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle3()" id="btnh3" class="btn"><i class="fa-solid fa-heart"></i></i></button>
                 </div>
+                <script>
+                    var btnvar3 = document.getElementById('btnh3');
+                    function Toggle3(){
+                        if (btnvar3.style.color =="red") {
+                            btnvar3.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar3.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/controller2.png" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
@@ -174,7 +213,20 @@ <h3>VR Headset from Meta</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle4()"id="btnh4" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar4 = document.getElementById('btnh4');
+                    function Toggle4(){
+                        if (btnvar4.style.color =="red") {
+                            btnvar4.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar4.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/metaquest.jpg" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
@@ -205,7 +257,20 @@ <h3>VR Headset from Apple</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle5()" id="btnh5" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar5 = document.getElementById('btnh5');
+                    function Toggle5(){
+                        if (btnvar5.style.color =="red") {
+                            btnvar5.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar5.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/visionpro.png" class="controller" alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
@@ -236,7 +301,20 @@ <h3>High Performance Gaming Mouse</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle6()" id="btnh6" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar6 = document.getElementById('btnh6');
+                    function Toggle6(){
+                        if (btnvar6.style.color =="red") {
+                            btnvar6.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar6.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/mouse.png" class="controller" alt="Gaming Mouse">
@@ -267,7 +345,20 @@ <h3>Mechanical Gaming Keyboard</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle7()" id="btnh7" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar7 = document.getElementById('btnh7');
+                    function Toggle7(){
+                        if (btnvar7.style.color =="red") {
+                            btnvar7.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar7.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/keyboard.png" class="controller" alt="Gaming Keyboard">
@@ -298,7 +389,20 @@ <h3>Wireless Gaming Headset</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle8()" id="btnh8" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar8 = document.getElementById('btnh8');
+                    function Toggle8(){
+                        if (btnvar8.style.color =="red") {
+                            btnvar8.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar8.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/headset.png" class="controller" alt="Gaming Headset">
@@ -329,7 +433,20 @@ <h3>Ergonomic Gaming Chair</h3>
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button onclick="Toggle9()"id="btnh9" class="btn"><i class="fa-solid fa-heart"></i></button>
                 </div>
+                <script>
+                    var btnvar9 = document.getElementById('btnh9');
+                    function Toggle9(){
+                        if (btnvar9.style.color =="red") {
+                            btnvar9.style.color ="grey"
+
+                        }
+                        else{
+                            btnvar9.style.color="red"
+                        }
+                    }
+                </script>
             </div>
             <div class="col-2">
                 <img src="images/newchair.png" class="controller" alt="Gaming Chair">
diff --git a/style.css b/style.css
index 58aedfd6..bcb745c2 100644
--- a/style.css
+++ b/style.css
@@ -381,6 +381,18 @@ button:hover img {
     gap: 15px;
 }
 
+.btn{
+    background: transparent;
+    border: none;
+    margin: 10px;
+    font-size: 40px;
+    outline: none;
+    color: gray;
+}
+
+.btn i:hover{
+    cursor : pointer;
+}
 .col-1::after {
     content: '';
     width: 10px;