From ab83503e08ba076aaedc1a38a4ca28d01131ac63 Mon Sep 17 00:00:00 2001
From: R2-Star <ridhimab1947@gmail.com>
Date: Sat, 14 Dec 2024 18:53:45 +0530
Subject: [PATCH 1/2] Add scroll to top feature

---
 index.html |  5 +++++
 script.js  | 20 ++++++++++++++++++++
 style.css  | 29 +++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+)

diff --git a/index.html b/index.html
index 98b81ba..7b73948 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
     <link rel="stylesheet" href="./style.css">
+    <script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
     <title>Eventica</title>
 </head>
 
@@ -67,6 +68,10 @@ <h2 class="section-title">Upcoming Events</h2>
                 </div>
             </div>
         </section>
+        
+        <a href="#" class="to-top">
+            <i class="fas fa-chevron-up"></i>
+        </a>
     </main>
 
     <footer class="footer">
diff --git a/script.js b/script.js
index 462c554..6dbd2e7 100644
--- a/script.js
+++ b/script.js
@@ -26,6 +26,26 @@ function isEventPast(eventDate) {
     return eventDateObj < todayUTC;
 }
 
+// Scroll to top button
+const toTop = document.querySelector(".to-top");
+
+window.addEventListener("scroll", checkHeight)
+function checkHeight() {
+    if(window.scrollY > 100) {
+        toTop.classList.add("active");
+    }
+    else {
+        toTop.classList.remove("active");
+    }
+}
+
+toTop.addEventListener("click", function() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});
+
 // Function to create event cards
 function createEventCard(event, isPastEvent = false) {
     const buttonText = isPastEvent ? 'View Details' : 'Register';
diff --git a/style.css b/style.css
index 7807dc4..f9e9585 100644
--- a/style.css
+++ b/style.css
@@ -272,6 +272,35 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+.to-top {
+    background: white;
+    position: fixed;
+    bottom: 16px;
+    right: 32px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #1f1f1f;
+    text-decoration: none;
+    opacity: 0;
+    pointer-events:none;
+    transition: all .4s;
+}
+
+.to-top.active {
+    bottom: 32px;
+    pointer-events: auto;
+    opacity: 1; 
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
 /* Events Section Css */
 
 .events {

From 66676cdfba5a76541f8069c74c8fb04ab0dd4e76 Mon Sep 17 00:00:00 2001
From: Rakesh Roshan <roshanrakesh7362@gmail.com>
Date: Sun, 15 Dec 2024 01:43:55 +0530
Subject: [PATCH 2/2] Few changes

---
 assets/about/about.html           |  7 +++-
 assets/contact/contact.html       |  5 +++
 assets/pastevents/pastevents.html |  5 +++
 index.html                        |  9 ++---
 script.js                         | 56 ++++++++++++++++++++-----------
 style.css                         | 13 ++++---
 6 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/assets/about/about.html b/assets/about/about.html
index e003cac..ec57c0d 100644
--- a/assets/about/about.html
+++ b/assets/about/about.html
@@ -78,9 +78,14 @@ <h3 class="feature-title">Up-to-date Calendar</h3>
                     </div>
                 </div>
             </div>
-        </section>        
+        </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index a06478d..c3571fb 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -68,6 +68,11 @@ <h1 class="section-title">Contact Us</h1>
         </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>
diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
index 1917c67..88b8df4 100644
--- a/assets/pastevents/pastevents.html
+++ b/assets/pastevents/pastevents.html
@@ -56,6 +56,11 @@ <h1 class="section-title">Past Events</h1>
         </section>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>
diff --git a/index.html b/index.html
index 7b73948..b3797d4 100644
--- a/index.html
+++ b/index.html
@@ -68,12 +68,13 @@ <h2 class="section-title">Upcoming Events</h2>
                 </div>
             </div>
         </section>
-        
-        <a href="#" class="to-top">
-            <i class="fas fa-chevron-up"></i>
-        </a>
     </main>
 
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
     <footer class="footer">
         <div class="container">
             <p>Created By Rakesh Roshan ❤️ | &copy; 2024: All Rights Reserved</p>
diff --git a/script.js b/script.js
index 6dbd2e7..460d33a 100644
--- a/script.js
+++ b/script.js
@@ -26,26 +26,6 @@ function isEventPast(eventDate) {
     return eventDateObj < todayUTC;
 }
 
-// Scroll to top button
-const toTop = document.querySelector(".to-top");
-
-window.addEventListener("scroll", checkHeight)
-function checkHeight() {
-    if(window.scrollY > 100) {
-        toTop.classList.add("active");
-    }
-    else {
-        toTop.classList.remove("active");
-    }
-}
-
-toTop.addEventListener("click", function() {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-    });
-});
-
 // Function to create event cards
 function createEventCard(event, isPastEvent = false) {
     const buttonText = isPastEvent ? 'View Details' : 'Register';
@@ -220,3 +200,39 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 });
+
+// Scroll to top button
+document.addEventListener('DOMContentLoaded', () => {
+    // Select the scroll-to-top button
+    const toTop = document.querySelector(".to-top");
+
+    if (!toTop) {
+        console.error('Scroll-to-top element not found.');
+        return;
+    }
+
+    // Show or hide the button on scroll
+    function checkHeight() {
+        if (window.scrollY > 100) {
+            toTop.classList.add("active");
+        } else {
+            toTop.classList.remove("active");
+        }
+    }
+
+    // Debounce the scroll event for performance
+    let scrollTimeout;
+    window.addEventListener("scroll", () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(checkHeight, 100);
+    });
+
+    // Smooth scroll to top on button click
+    toTop.addEventListener("click", (e) => {
+        e.preventDefault();  // Prevent default anchor behavior
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index f9e9585..9710f73 100644
--- a/style.css
+++ b/style.css
@@ -13,6 +13,10 @@
     box-sizing: border-box;
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 .logo-container {
     display: flex;
     align-items: center;
@@ -289,6 +293,11 @@ body {
     opacity: 0;
     pointer-events:none;
     transition: all .4s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.to-top:hover {
+    background: #f0f0f0;
 }
 
 .to-top.active {
@@ -297,10 +306,6 @@ body {
     opacity: 1; 
 }
 
-html {
-    scroll-behavior: smooth;
-}
-
 /* Events Section Css */
 
 .events {