Update static/js/script.js

static/js/script.js

@@ -1,129 +1,129 @@
-document.addEventListener("DOMContentLoaded", function () {
-    fetch("navbar.html")
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById("navbar-container").innerHTML = data;
-        })
-        .catch(error => console.error("Error loading the navbar:", error));
-});
-
-async function searchWord() {
-    let word = document.getElementById("wordInput").value.trim();
-    let resultDiv = document.getElementById("result");
-
-    if (word === "") {
-        resultDiv.innerHTML = "<p style='color: red;'>❌ Please enter a word!</p>";
-        return;
-    }
-
-    let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
-
-    try {
-        let response = await fetch(url);
-        let data = await response.json();
-
-        if (data.title) {
-            resultDiv.innerHTML = `<p style="color: red;">❌ Word not found!</p>`;
-        } else {
-            let definition = data[0].meanings[0]?.definitions[0]?.definition || "No definition found.";
-            let phonetics = data[0].phonetics[0]?.text || "No phonetics available.";
-            let audio = data[0].phonetics[0]?.audio || "";
-
-            resultDiv.innerHTML = `
-                <h2>${word}</h2>
-                <p><strong>Definition:</strong> ${definition}</p>
-                <p><strong>Phonetics:</strong> ${phonetics}</p>
-                ${audio ? `<audio controls><source src="${audio}" type="audio/mpeg"></audio>` : ""}
-            `;
-        }
-    } catch (error) {
-        resultDiv.innerHTML = "<p style='color: red;'>⚠️ Error fetching data. Please try again.</p>";
-    }
-}
-
-const YOUTUBE_API_KEY = "AIzaSyBnWZp2Bc_lv1duMO0r3D4THx5tBhISeXg"; // Replace with your actual API Key
-
-function fetchContent() {
-    let query = document.getElementById("searchQuery").value;
-    if (!query) {
-        alert("Please enter a topic.");
-        return;
-    }
-
-    // Wikipedia API
-    $("#wikiContent").html("Loading...");
-    $.getJSON(`https://en.wikipedia.org/api/rest_v1/page/summary/${query}`, function(data) {
-        $("#wikiContent").html(data.extract ? data.extract : "No summary available.");
-    }).fail(function() {
-        $("#wikiContent").html("Error fetching data.");
-    });
-
-    // JavaTpoint
-    $("#javatpointContent").html("Loading...");
-    let javaTpointLink = `https://www.javatpoint.com/${query.replace(/ /g, '-')}`;
-    $("#javatpointContent").html(`<a href='${javaTpointLink}' target='_blank'>View on JavaTpoint</a>`);
-
-
-    // YouTube API with SafeSearch and keyword filtering
-    $("#youtubeContent").html("Loading...");
-    $.getJSON(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query} tutorial|lecture|course&type=video&maxResults=5&safeSearch=strict&key=${YOUTUBE_API_KEY}`, function(data) {
-        let videos = "";
-        data.items.forEach(item => {
-            let videoId = item.id.videoId;
-            let title = item.snippet.title;
-            let thumbnail = item.snippet.thumbnails.medium.url;
-            let videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
-            
-            videos += `
-                <div class="card mb-2">
-                    <img src="${thumbnail}" alt="${title}" class="video-thumbnail" onclick="playVideo('${videoId}', this)">
-                    <div class="card-body">
-                        <p class="card-text">${title}</p>
-                        <a href="${videoUrl}" target="_blank" class="btn btn-sm btn-danger">Open in YouTube</a>
-                    </div>
-                </div>
-            `;
-        });
-        $("#youtubeContent").html(videos || "No videos found.");
-    }).fail(function() {
-        $("#youtubeContent").html("Error fetching videos.");
-    });
-}
-
-function playVideo(videoId, element) {
-    let videoFrame = `<iframe width='100%' height='300' src='https://www.youtube.com/embed/${videoId}' frameborder='0' allowfullscreen></iframe>`;
-    let parentCard = element.closest(".card");
-    parentCard.innerHTML = videoFrame;
-}
-
-function searchBox() {
-    var query = document.getElementById("searchInput").value.toLowerCase();
-    var pages = {
-        "home": "index.html",
-        "ai": "ai.html",
-        "about": "about.html",
-        "contact": "contact.html",
-        "services": "services.html",
-        "library": "library.html"
-    };
-
-    if (query in pages) {
-        window.location.href = pages[query];
-    } else {
-        alert("Page not found. Try searching: Home, AI, About, Contact, Services, Library.");
-    }
-    return false; // Prevent form submission
-}
-
-// Function to load the footer dynamically
-function loadFooter() {
-    fetch("footer.html")
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById("footer-container").innerHTML = data;
-        })
-        .catch(error => console.error("Error loading the footer:", error));
-}
-
-// Call the function after the page loads
-document.addEventListener("DOMContentLoaded", loadFooter);
+document.addEventListener("DOMContentLoaded", function () {
+    fetch("/static/components/navbar.html")
+        .then(response => response.text())
+        .then(data => {
+            document.getElementById("navbar-container").innerHTML = data;
+        })
+        .catch(error => console.error("Error loading the navbar:", error));
+});
+
+async function searchWord() {
+    let word = document.getElementById("wordInput").value.trim();
+    let resultDiv = document.getElementById("result");
+
+    if (word === "") {
+        resultDiv.innerHTML = "<p style='color: red;'>❌ Please enter a word!</p>";
+        return;
+    }
+
+    let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
+
+    try {
+        let response = await fetch(url);
+        let data = await response.json();
+
+        if (data.title) {
+            resultDiv.innerHTML = `<p style="color: red;">❌ Word not found!</p>`;
+        } else {
+            let definition = data[0].meanings[0]?.definitions[0]?.definition || "No definition found.";
+            let phonetics = data[0].phonetics[0]?.text || "No phonetics available.";
+            let audio = data[0].phonetics[0]?.audio || "";
+
+            resultDiv.innerHTML = `
+                <h2>${word}</h2>
+                <p><strong>Definition:</strong> ${definition}</p>
+                <p><strong>Phonetics:</strong> ${phonetics}</p>
+                ${audio ? `<audio controls><source src="${audio}" type="audio/mpeg"></audio>` : ""}
+            `;
+        }
+    } catch (error) {
+        resultDiv.innerHTML = "<p style='color: red;'>⚠️ Error fetching data. Please try again.</p>";
+    }
+}
+
+const YOUTUBE_API_KEY = "AIzaSyBnWZp2Bc_lv1duMO0r3D4THx5tBhISeXg"; // Replace with your actual API Key
+
+function fetchContent() {
+    let query = document.getElementById("searchQuery").value;
+    if (!query) {
+        alert("Please enter a topic.");
+        return;
+    }
+
+    // Wikipedia API
+    $("#wikiContent").html("Loading...");
+    $.getJSON(`https://en.wikipedia.org/api/rest_v1/page/summary/${query}`, function(data) {
+        $("#wikiContent").html(data.extract ? data.extract : "No summary available.");
+    }).fail(function() {
+        $("#wikiContent").html("Error fetching data.");
+    });
+
+    // JavaTpoint
+    $("#javatpointContent").html("Loading...");
+    let javaTpointLink = `https://www.javatpoint.com/${query.replace(/ /g, '-')}`;
+    $("#javatpointContent").html(`<a href='${javaTpointLink}' target='_blank'>View on JavaTpoint</a>`);
+
+
+    // YouTube API with SafeSearch and keyword filtering
+    $("#youtubeContent").html("Loading...");
+    $.getJSON(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query} tutorial|lecture|course&type=video&maxResults=5&safeSearch=strict&key=${YOUTUBE_API_KEY}`, function(data) {
+        let videos = "";
+        data.items.forEach(item => {
+            let videoId = item.id.videoId;
+            let title = item.snippet.title;
+            let thumbnail = item.snippet.thumbnails.medium.url;
+            let videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
+            
+            videos += `
+                <div class="card mb-2">
+                    <img src="${thumbnail}" alt="${title}" class="video-thumbnail" onclick="playVideo('${videoId}', this)">
+                    <div class="card-body">
+                        <p class="card-text">${title}</p>
+                        <a href="${videoUrl}" target="_blank" class="btn btn-sm btn-danger">Open in YouTube</a>
+                    </div>
+                </div>
+            `;
+        });
+        $("#youtubeContent").html(videos || "No videos found.");
+    }).fail(function() {
+        $("#youtubeContent").html("Error fetching videos.");
+    });
+}
+
+function playVideo(videoId, element) {
+    let videoFrame = `<iframe width='100%' height='300' src='https://www.youtube.com/embed/${videoId}' frameborder='0' allowfullscreen></iframe>`;
+    let parentCard = element.closest(".card");
+    parentCard.innerHTML = videoFrame;
+}
+
+function searchBox() {
+    var query = document.getElementById("searchInput").value.toLowerCase();
+    var pages = {
+        "home": "index.html",
+        "ai": "ai.html",
+        "about": "about.html",
+        "contact": "contact.html",
+        "services": "services.html",
+        "library": "library.html"
+    };
+
+    if (query in pages) {
+        window.location.href = pages[query];
+    } else {
+        alert("Page not found. Try searching: Home, AI, About, Contact, Services, Library.");
+    }
+    return false; // Prevent form submission
+}
+
+// Function to load the footer dynamically
+function loadFooter() {
+    fetch("/static/components/footer.html")
+        .then(response => response.text())
+        .then(data => {
+            document.getElementById("footer-container").innerHTML = data;
+        })
+        .catch(error => console.error("Error loading the footer:", error));
+}
+
+// Call the function after the page loads
+document.addEventListener("DOMContentLoaded", loadFooter);