fix html

index.html

@@ -35,23 +35,23 @@ <h3>Using Python's zip Function</h3>
           The fourth implementation uses Python's zip function along with the built-in sorted function to sort the guests by their total number of friends. The zip function takes two lists and returns a list of tuples containing the corresponding elements of each list. The sorted function takes a list of tuples and sorts them by the first element of each tuple. This approach requires that the guests be represented as two lists: one containing the total number of friends and the other containing the list of friends.
         </p>
         <hr />
+      </div>
+    </section>
+    <section>
         <h2>About</h2>
         <p>
-          This is a project by Thomasthaddeus. You can find more details in
-          the
-          <a href="https://apparellnstuff.me/musical-chairs/README.md" background-color="#fff">README</a>.
+          This is a project by Thomasthaddeus. You can find more details in the <a href="https://raw.githubusercontent.com/thomasthaddeus/musical-chairs/main/README.md">README</a>.
         </p>
         <!-- Placeholder for README content -->
         <div id="readmeContent"></div>
-      </div>
     </section>
-    <section>
+        <section>
       <h2>Directory Structure</h2>
       <div class="dropdown">
         <span>src</span>
         <div class="dropdown-content">
-          <a href="./src/app/_decorators_main.py">_decorators_main.py</a>
-          <a href="./src/app/_functions_main.py">_functions_main.py</a>
+          <a href="./src/app/_main/_decorators_main.py">_decorators_main.py</a>
+          <a href="./src/app/_main/_functions_main.py">_functions_main.py</a>
           <a href="./src/app/main.py">main.py</a>
           <div class="dropdown">
             <span>tests</span>
@@ -86,7 +86,7 @@ <h2>Directory Structure</h2>
           <h2>Contributing</h2>
           <p>
             Contributions are welcome! Please read
-            <a href="./CONTRIBUTING.md">CONTRIBUTING.md</a> for details on our
+            <a href="../CONTRIBUTING.md">CONTRIBUTING.md</a> for details on our
             code of conduct, and the process for submitting pull requests to
             us.
           </p>
@@ -98,10 +98,7 @@ <h2>Contributing</h2>
     <p>Copyright &copy; 2023 Thaddeus Thomas. All rights reserved.</p>
     <p><a href="/" target="_blank">Back to Home Site</a></p>
   </footer>
-  <script src="./src/js/dropdown.js"></script>
-  <script src="./src/js/smooth_scrolling.js"></script>
-  <script src="./src/js/myModal.js"></script>
-  <script src="./src/js/displayReadme.js"></script>
+  <script src="./src/js/main.js"></script>
 </body>
 
 </html>

src/js/main.js

@@ -0,0 +1,117 @@
+// --------------------- myModal.js ---------------------
+function initializeModal() {
+    const modal = document.getElementById('myModal');
+    const openBtn = document.getElementById('openModal');
+    const closeBtn = document.getElementById('closeModal');
+
+    openBtn.addEventListener('click', () => {
+        modal.style.display = 'block';
+    });
+
+    closeBtn.addEventListener('click', () => {
+        modal.style.display = 'none';
+    });
+}
+
+// --------------------- accordion.js ----------------------------
+function initializeAccordion() {
+    const accordions = document.querySelectorAll('.accordion');
+
+    accordions.forEach(accordion => {
+        accordion.addEventListener('click', function() {
+            this.classList.toggle('active');
+            const content = this.nextElementSibling;
+            if (content.style.display === 'block') {
+                content.style.display = 'none';
+            } else {
+                content.style.display = 'block';
+            }
+        });
+    });
+}
+
+// --------------------- displayReadme.js ---------------------
+function displayReadme() {
+    const README_URL = "https://raw.githubusercontent.com/thomasthaddeus/musical-chairs/main/README.md";
+
+    fetch(README_URL)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Network response was not ok");
+            }
+            return response.text();
+        })
+        .then(data => {
+            const htmlContent = markdownToHtml(data);
+            document.getElementById("readmeContent").innerHTML = htmlContent;
+        })
+        .catch(error => {
+            console.log("There was a problem with the fetch operation:", error.message);
+        });
+}
+
+function markdownToHtml(markdown) {
+    return marked.parse(markdown);
+}
+
+// --------------------- dropdown.js ---------------------
+function initializeDropdown() {
+    var dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
+    dropdownTriggers.forEach(function(trigger) {
+        trigger.addEventListener('click', toggleDropdown);
+    });
+
+    document.addEventListener('click', function(event) {
+        var isClickInside = document.querySelector('.dropdown').contains(event.target);
+        if (!isClickInside) {
+            var dropdowns = document.querySelectorAll('.dropdown-content');
+            dropdowns.forEach(function(dropdown) {
+                dropdown.style.display = 'none';
+            });
+        }
+    });
+}
+
+function toggleDropdown(event) {
+    var dropdownContent = event.target.nextElementSibling;
+    if (dropdownContent.style.display === 'none' || !dropdownContent.style.display) {
+        dropdownContent.style.display = 'block';
+    } else {
+        dropdownContent.style.display = 'none';
+    }
+}
+
+// --------------------- fetch.js ---------------------
+function fetchReadme() {
+    fetch('https://raw.githubusercontent.com/thomasthaddeus/musical-chairs/main/README.md')
+        .then(response => response.text())
+        .then(data => {
+            const readmeContent = document.getElementById('readmeContent');
+            readmeContent.innerHTML = data;
+        })
+        .catch(error => {
+            console.error('Error fetching README:', error);
+        });
+}
+
+// --------------------- smooth_scrolling.js ---------------------
+function initializeSmoothScrolling() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+}
+
+// Initialize all functions when the document is loaded
+document.addEventListener("DOMContentLoaded", function() {
+    initializeModal();
+    initializeAccordion();
+    displayReadme();
+    initializeDropdown();
+    fetchReadme();
+    initializeSmoothScrolling();
+});