Merge pull request #383 from Blackie360/bookmarker

Add a simple book marker manager
panditakshay402 · Oct 23, 2024 · 14b3331 · 14b3331
2 parents 33efa72 + 7ab5097
commit 14b3331
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/JavaScript/bookmark_manager/index.html b/JavaScript/bookmark_manager/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bookmark Manager</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
+
+  <div class="w-full max-w-xl p-8 bg-gray-800 rounded-lg shadow-md">
+    <h1 class="text-3xl font-bold text-center mb-8">Bookmark Manager</h1>
+
+    <form id="bookmarkForm" class="flex gap-2 mb-4">
+      <input 
+        type="url" 
+        id="bookmarkUrl" 
+        class="w-full p-2 rounded bg-gray-700 text-white" 
+        placeholder="Enter Bookmark URL" 
+        required />
+      <button 
+        type="submit" 
+        class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-white font-semibold">
+        Add
+      </button>
+    </form>
+
+    <div id="bookmarkList" class="space-y-2">
+      <!-- Bookmarks will appear here -->
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/JavaScript/bookmark_manager/script.js b/JavaScript/bookmark_manager/script.js
@@ -0,0 +1,44 @@
+// Select elements
+const bookmarkForm = document.getElementById('bookmarkForm');
+const bookmarkUrl = document.getElementById('bookmarkUrl');
+const bookmarkList = document.getElementById('bookmarkList');
+
+// Retrieve bookmarks from localStorage
+let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
+
+// Function to display bookmarks
+function displayBookmarks() {
+  bookmarkList.innerHTML = '';
+  bookmarks.forEach((bookmark, index) => {
+    bookmarkList.innerHTML += `
+      <div class="flex justify-between items-center p-2 bg-gray-700 rounded">
+        <a href="${bookmark}" target="_blank" class="text-blue-400 hover:underline">${bookmark}</a>
+        <button onclick="deleteBookmark(${index})" class="text-red-500 hover:text-red-700">Delete</button>
+      </div>
+    `;
+  });
+}
+
+// Function to add a new bookmark
+bookmarkForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const url = bookmarkUrl.value;
+
+  // Add bookmark and save to localStorage
+  bookmarks.push(url);
+  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+
+  // Clear input and update the list
+  bookmarkUrl.value = '';
+  displayBookmarks();
+});
+
+// Function to delete a bookmark
+function deleteBookmark(index) {
+  bookmarks.splice(index, 1);
+  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+  displayBookmarks();
+}
+
+// Display bookmarks on page load
+displayBookmarks();