update

Deeptanu2005 · Jun 2, 2024 · a39bdb8 · a39bdb8
1 parent 12c4f96
commit a39bdb8
Show file tree

Hide file tree

Showing 4 changed files with 293 additions and 105 deletions.
diff --git a/appFunctions.js b/appFunctions.js
@@ -0,0 +1,50 @@
+const tutorialButton = document.getElementById("tutorial-button");
+const videoOverlay = document.getElementById("video-overlay");
+
+
+// Function to show video overlay
+function showVideo() {
+    tutorialButton.style.display = "none";
+    videoOverlay.style.display = "flex";
+}
+
+// Function to close video overlay
+function closeVideo() {
+    tutorialButton.style.display = "block";
+    videoOverlay.style.display = "none";
+}
+
+// Show the video overlay on the first visit
+document.addEventListener("DOMContentLoaded", function() {
+    const alreadyVisited = localStorage.getItem("visited");
+    if (!alreadyVisited) {
+        showVideo();
+        localStorage.setItem("visited", true);
+    }
+});
+
+// Get input fields and the "Add Link" button
+const newLinkInput = document.getElementById("new-link");
+const newNameInput = document.getElementById("new-name");
+const newCategoryInput = document.getElementById("new-category");
+const addButton = document.getElementById("add-button");
+
+// Add input event listeners to check when all fields are filled
+newLinkInput.addEventListener("input", checkFields);
+newNameInput.addEventListener("input", checkFields);
+newCategoryInput.addEventListener("input", checkFields);
+
+// Function to check if all fields are filled and apply glow effect to the "Add Link" button
+function checkFields() {
+    if (newLinkInput.value.trim() !== "" && newNameInput.value.trim() !== "" && newCategoryInput.value.trim() !== "") {
+        addButton.classList.add("glow");
+    } else {
+        addButton.classList.remove("glow");
+    }
+}
+
+addButton.addEventListener("click", function() {
+    addButton.classList.remove("glow");
+});
+
+
diff --git a/index.html b/index.html
@@ -73,6 +73,9 @@
 <body>
     <div class="container">
         <header>
+             <!-- Tutorial Button -->
+             <button id="tutorial-button" onclick="showVideo()">Watch Tutorial</button>
+
             <h1>Your Pinned Links</h1>
             <div class="search-bar">
                 <input type="text" id="search" placeholder="Search links...">
@@ -85,7 +88,7 @@ <h1>Your Pinned Links</h1>
                     <option value="educational">Educational</option>
                     <option value="professional">Professional</option>
                 </select>
-                <button onclick="addLink()">Add Link</button>
+                <button id="add-button" onclick="addLink()">Add Link</button>
             </div>
         </header>
         <main>
@@ -107,6 +110,15 @@ <h2>Professional Websites</h2>
         <p>Developed by <a href="https://github.com/Deeptanu2005">Deeptanu Sen</a></p>
         <p>GitHub Repository: <a href="https://github.com/Deeptanu2005/Pinned-Links-Manager">Pinned Links Manager</a></p>
     </footer>
+
+    <!-- Video Overlay -->
+    <div id="video-overlay" class="overlay" style="display: none;">
+        <button onclick="closeVideo()" class="close-button">X</button>
+        <iframe id="tutorial-video" src="https://www.youtube.com/embed/TJANThy2PxI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    </div>
+
+    <!-- JavaScript files -->
+    <script src="appFunctions.js" defer></script>
     <script src="script.js"></script>
 
     <!-- Buy Me a Coffee widget, replace with your own credentials -->

diff --git a/script.js b/script.js
@@ -77,7 +77,6 @@ function createLinkHTML(link) {
   favoriteButton.classList.add("favorite-button");
   favoriteButton.style.marginLeft = "10px";
 
-
   removeLinkButton.style.padding = "8px";
   removeLinkButton.style.backgroundColor = "transparent";
   removeLinkButton.style.border = "none";
@@ -97,7 +96,7 @@ function createLinkHTML(link) {
   if (favorites.some((fav) => fav.url === link.url)) {
     favoriteButton.style.display = "none";
     favoriteButton.classList.add("active");
-    
+
     removeLinkButton.style.marginLeft = "auto";
   } else {
     favoriteButton.textContent = "Add to Favorites";
@@ -134,6 +133,8 @@ function addLink() {
     newNameInput.value = "";
     newCategoryInput.value = "";
     renderLinks();
+
+
   } else {
     alert("Please fill all fields: URL, Name, and Category.");
   }
@@ -176,4 +177,3 @@ document.getElementById("search").addEventListener("input", function () {
 });
 
 renderLinks();
-