Footer component implementation using footer.js

-Added footer tag in each page.(index, itinerary)
-Removed obsolete footer section in index.html

index.html

@@ -253,7 +253,9 @@
     <p class="text-8xl font-bold text-white">Learn - Enjoy - Discover</p>
   </section>
 
-  <section
+  <!-- JUST COMMENTING FOR NOW.. -->
+   <!-- This is obsolete -->
+  <!-- <section
     class="mt-7 flex h-80 w-full items-center justify-center bg-celeb-banner bg-no-repeat"
   >
     <p class="text-center text-5xl font-bold text-white">
@@ -286,12 +288,13 @@
   </section>
   <section class="h-[70px] w-full bg-black flex items-center justify-center">
     <p class="bg-black text-white text-center">Copyright© Software Freedom Day 2024 x Nepal Open Source Club</p>
-  </section> 
+  </section>  -->
 
-
+  <footer></footer>
 
 
   <script src="/js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script>
 
     document.addEventListener("DOMContentLoaded", () => {

js/footer.js

@@ -0,0 +1,44 @@
+const footerCode = `<section
+    class="mt-7 flex h-80 w-full items-center justify-center bg-celeb-banner bg-no-repeat"
+  >
+    <p class="text-center text-5xl font-bold text-white">
+      CELEBRATE THE FREEDOM OF COLLABORATION
+    </p>
+  </section>
+
+  <section class="h-[313px] w-full bg-[#111111] flex items-center justify-center  mt-8">
+    <div class="h-[54%] w-1/2 flex items-center justify-center flex-col gap-8">
+      <div class="w-full h-1/2 flex items-center justify-center gap-8">
+        <div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/instagram.svg" alt="instagram"></a></div>
+        <div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/x.svg" alt="instagram"></a></div>
+        <div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/facebook.svg" alt="instagram"></a></div>
+        <div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/linkedin.svg" alt="instagram"></a></div>
+        <div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/website.svg" alt="instagram"></a></div>
+      </div>
+      <div class="w-full h-1/2">
+        <ul class="flex items-center justify-center gap-4 ">
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Home</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">About</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Itinerary</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Team</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Highlights</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">FAQs</a></li>
+          <li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Contact</a></li>
+        </ul>
+        </ul>
+      </div>
+    </div>
+  </section>
+  <section class="h-[70px] w-full bg-black flex items-center justify-center">
+    <p class="bg-black text-white text-center">Copyright© Software Freedom Day 2024 x Nepal Open Source Club</p>
+  </section> `;
+
+// Adding footer when DOMContentLoaded inside body
+document.addEventListener('DOMContentLoaded', () => {
+  // Get the first <footer> element
+  const footer = document.getElementsByTagName("footer")[0].innerHTML;
+
+  // Insert the footer content along with the existing footer content
+  document.querySelector("footer").innerHTML = footerCode + footer;
+});
+

pages/itinerary.html

@@ -210,12 +210,13 @@ <h1 class="text-4xl font-bold">Event Activities</h1>
         <a href="#" class="btn btn-register-now">Register Now</a>
     </div>
 
-    <div class="h-5">
-        <!-- Footer Goes Here -->
-    </div>
+    <footer class="h-5">
+
+    </footer>
 
     <script src="../js/schedule.js"></script>
     <script src="../js/navbar.js"></script>
+    <script src="../js/footer.js"></script>
 </body>
 
 </html>