Issue #510

js/script.js

@@ -670,26 +670,6 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 window.onload = function () {
-    const modal = document.getElementById("warningModal");
-    const closeModal = document.getElementById("closeModal");
-    const proceedButton = document.getElementById("proceed");
-
-    modal.style.display = "block";
-
-    closeModal.onclick = function () {
-        modal.style.display = "none";
-    }
-
-    proceedButton.onclick = function () {
-        modal.style.display = "none";
-    }
-
-    window.onclick = function (event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-    }
-
     const words = ["Light Simulator", "Beat Spectrum"];
     let index = 0;
     let direction = "left";
@@ -892,10 +872,61 @@ function effect() {
 
 
 var loader = document.querySelector(".loader");
+
+
+document.addEventListener('DOMContentLoaded', function () {
+var backToTopBtn = document.getElementById("backToTopBtn");
+backToTopBtn.style.display = "none";
+const modal = document.getElementById("warningModal");
+const closeModal = document.getElementById("closeModal");
+const proceedButton = document.getElementById("proceed");
+
+if (!sessionStorage.getItem('loaderCompleted')) {
+
 window.addEventListener('load', () => {
     // var backToTopBtn = document.getElementById("backToTopBtn");
     // backToTopBtn.style.display = "none";
+
     setTimeout(effect, 4000);
+    setTimeout(() => {
+        document.querySelector(".navMain").style.visibility = "visible";
+        // backToTopBtn.style.display = "block";
+    }, 4000);
+
+    //execute only once per session, ie when loaderCompleted is not true
+    modal.style.display = "block";
+
+    //event listeners involved with the modal:
+    closeModal.onclick = function () {
+        modal.style.display = "none";
+    }
+
+    proceedButton.onclick = function () {
+        modal.style.display = "none";
+    }
+
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }       
+    }
+}
+
+
+else{
+    effect();
+    //load content without timeout
+
+    modal.style.display = "none";
+    //warning modal is needed only once in a session
+
+    document.querySelector(".navMain").style.visibility = "visible";
+    //no timeout function needed for nav in absence of loader animation
+
+    // backToTopBtn.style.display = "block";
+}
+
+sessionStorage.setItem('loaderCompleted', 'true');
 })
 
 function changeColor() {
@@ -904,6 +935,28 @@ function changeColor() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
+
+    var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "block";
+    backToTopBtn.addEventListener("click", function () {
+        scrollToTop();
+        scrollToForm();
+    });
+
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+    function scrollToForm() {
+        const formElement = document.getElementById("box");
+        formElement.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+
     // var backToTopBtn = document.getElementById("backToTopBtn");
     // backToTopBtn.style.display = "block";
     // backToTopBtn.addEventListener("click", function () {
@@ -925,6 +978,7 @@ document.addEventListener("DOMContentLoaded", function () {
     //     });
     // }
 
+
     document.querySelector("#reload").addEventListener("click", () => {
         window.location.reload();
     });