Updated bookmarks page with structured content

ANSHIKA-26 · Oct 20, 2024 · b416a3c · b416a3c
1 parent c678ba0
commit b416a3c
Show file tree

Hide file tree

Showing 3 changed files with 337 additions and 15 deletions.
diff --git a/blog.html b/blog.html
@@ -20,9 +20,6 @@
   <link rel="stylesheet" href="style.css">
 
 
-</head>
-
-
 </head>
 
 <body>
@@ -168,7 +165,7 @@ <h2>Forgot Password</h2>
       </script>
 
       <!-- Updated CSS Styles -->
-      <style>
+      <style>    
         .form-popup {
             display: none;
             position: fixed;
@@ -314,15 +311,43 @@ <h2>Forgot Password</h2>
                 break;
         }
     }
-    </script>
-
-
+    document.addEventListener("DOMContentLoaded", function() {
+      const bookmarkBtn = document.getElementById("bookmark");
+      const bookmarkText = document.getElementById("bookmark-text");
+      const articleTitle = document.querySelector(".title h2").innerText;
+      loadBookmarks();
+
+      bookmarkBtn.addEventListener("click", function(event) {
+          event.preventDefault();
+          let bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];
+
+          if (bookmarkText.textContent === "Bookmark") {
+              if (!bookmarks.includes(articleTitle)) {
+                  bookmarks.push(articleTitle);
+                  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+                  bookmarkText.textContent = "Bookmarked";
+                  alert("Article bookmarked!");
+              }
+          } else {
+              const confirmRemove = confirm("Do you want to remove this bookmark?");
+              if (confirmRemove) {
+                  bookmarks = bookmarks.filter(item => item !== articleTitle);
+                  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+                  bookmarkText.textContent = "Bookmark"; 
+                  alert("Bookmark removed!");
+              }
+          }
+      });
+
+      function loadBookmarks() {
+          let bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];
+          if (bookmarks.includes(articleTitle)) {
+              bookmarkText.textContent = "Bookmarked"; 
+          }
+      }
+  });
+    </script>   
     <script src="signup.js"></script> <!-- Link to your JavaScript file -->
-
-
-
-
-
 
       <div class="theme-switch-wrapper">
         <label class="theme-switch" for="checkbox">
@@ -341,7 +366,6 @@ <h2>Forgot Password</h2>
 </nav>
 
   <!--header-->
-
     <!--mainn-->
     <main id="site-main" style="margin-top: 8rem;">
       <!--post content-->
@@ -353,6 +377,7 @@ <h2>Forgot Password</h2>
               <div class="heading text-center">
                 <div class="Category">
                   <a href="#" class="nav-link" id="travel">Travel</a></div>
+                  <a href="bookmarks.html" class="nav-link" style="float: right; margin-left: auto; color: #f9b0b0;">My Reading List</a>
                   <div class="title">
                     <h2 class="text-title text-dark display-1"looking for feedback></h2>
                   </div>
@@ -366,6 +391,10 @@ <h2 class="text-title text-dark display-1"looking for feedback></h2>
                     <a href="#" class="link display-2 text-secondary px-1">
                       <i class="fa-solid fa-comments" style="color:  #f9b0b0;" id="fa"></i>3
                     </a>
+                    <a href="#" class="link display-2 text-secondary px-1 bookmark-btn" id="bookmark">
+                      <i class="fa-solid fa-bookmark" style="color: #f9b0b0;" id="bookmark-icon"></i>
+                      <span id="bookmark-text" style="color: white;">Bookmark</span>
+                  </a>                  
                   </div>
 
 
@@ -1130,7 +1159,6 @@ <h5 class="commenter-name">${comment.name}</h5>
     <i class="fas fa-arrow-up"></i>
   </div>
 
-  <!-- footer -->
   <!-- footer -->
   <footer id="footer">
     <div class="footer-container">