Account pane finished

ProjectSourceCode/src/resources/css/login-and-registration/account.css

@@ -50,10 +50,32 @@
 }
 
 
-.account-delete-favorite-team-button-container {
+/* Delete Button CSS */
+
+#account-delete-favorite-team-button-container {
     margin-left: auto; /* Align the container all the way to the right */
+    display: inline-block;
+    position: relative;
 }
 
-#account-delete-favorite-team-account-button {
+#account-delete-favorite-team-button-hover {
-    width: 20px;
+    display: none; /* Initially hide the hover image */
-}
+}
+
+#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button {
+    display: none; /* Hide the default image when hovered over */
+}
+
+#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button-hover {
+    display: inline-block; /* Display the hover image when hovered over */
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+#account-delete-favorite-team-button,
+#account-delete-favorite-team-button-hover {
+    width: 15px;
+    cursor: pointer;
+    width: 18px;
+    height: auto;
+    
+}

ProjectSourceCode/src/resources/js/navigation-bar/user/delete-account-favorite-club.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover");
+    deleteButtons.forEach(function(deleteButton) {
+        deleteButton.addEventListener("click", function() {
+            var userID = deleteButton.getAttribute("userID");
+            var teamID = deleteButton.getAttribute("teamID");
+            
+            if (deleteButton.src.includes("/delete-club-hover.png")) {
+                removeAccountFavoriteTeam(userID, teamID);
+            }
+        });
+    });
+});
+
+async function removeAccountFavoriteTeam(userID, teamID) {
+    try {
+        const response = await fetch('/favteam/remove', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                userID: userID,
+                teamID: teamID
+            })
+        });
+        
+        if (response.status === 200) {
+            console.log('Favorite team removed successfully.');
+            location.reload(); // Refresh the page
+        }
+
+    } catch (error) {
+        console.error('Error removing favorite team:', error);
+    }
+}

ProjectSourceCode/src/views/partials/footer.hbs

@@ -6,6 +6,7 @@
         <!-- Navigation Bar Scripts -->
         <script src="/js/navigation-bar/navigation-bar-follow.js"></script>
         <script src="/js/navigation-bar/user/login-and-register-page-linking.js"></script>
+        <script src="/js/navigation-bar/user/delete-account-favorite-club.js"></script>
 
         <!-- Homepage Scripts -->
         <script src="/routes/league-pages/redirect-to-league-url.js"></script>

ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs

@@ -13,17 +13,19 @@
             <a id="account-favorite-teams-header">Favorite Teams:</a>
 
             {{#each fav_teams}}
-                <div class="account-favorite-teams-card">
+            <div class="account-favorite-teams-card">
-                    <div class="account-favorite-teams-card-logo-container">
+                <div id="account-favorite-teams-card-logo-container">
-                        <img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
+                    <img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
-                    </div>
-
-                    <span id="account-favorite-teams-card-title">{{this.teamname}}</span>
-
-                    <div class="account-delete-favorite-team-button-container">
-                        <img id="account-delete-favorite-team-account-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
-                    </div>
                 </div>
+
+                <span id="account-favorite-teams-card-title">{{this.teamname}}</span>
+
+                <div id="account-delete-favorite-team-button-container">
+                    <!-- Add a different image for hover effect -->
+                    <img id="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
+                    <img id="account-delete-favorite-team-button-hover" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID={{this.userid}} teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
+                </div>
+            </div>
             {{/each}}
         </div>