From 6a859d470a72d7e748a1125e09c0509dd8a63117 Mon Sep 17 00:00:00 2001
From: Ruihao Li <a834878215@gmail.com>
Date: Fri, 20 Sep 2024 03:46:39 -0400
Subject: [PATCH] Activity 5 changes

---
 index.html | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5b4be0f..22d0148 100644
--- a/index.html
+++ b/index.html
@@ -447,6 +447,7 @@ <h3 class="page-title white-text teal">Projects</h3>
           <div id="recent-projects">
 
           </div>
+          <button id="loadMoreButton">Load More</button>
 
           <!-- ************* -->
         </div>
@@ -661,10 +662,34 @@ <h3 class="page-title white-text teal">Places Travelled</h3>
     const mostRecentIndex = projects.length - 1;
 
     const parser = new DOMParser();
-    const projectHTML = parser.parseFromString(projects[mostRecentIndex].content, 'text/html');
+    const newestProjectHTML = parser.parseFromString(projects[mostRecentIndex].content, 'text/html');
 
     const mostRecentProj = document.getElementById('recent-projects');
-    mostRecentProj.innerHTML = projectHTML.body.innerHTML;
+    mostRecentProj.innerHTML = newestProjectHTML.body.innerHTML;
+
+    const loadMoreButton = document.getElementById("loadMoreButton");
+    loadMoreButton.addEventListener('click', handleClick);
+
+    var clickStatus = false;
+
+    function handleClick(event) {
+
+      clickStatus = !clickStatus;
+
+      if(clickStatus) {
+        mostRecentProj.innerHTML = '';
+        let totalHTML = '';
+        projects.forEach(project => {
+          totalHTML += project.content + ' ';
+        });
+        mostRecentProj.innerHTML = parser.parseFromString(totalHTML, 'text/html').body.innerHTML;
+      }
+      else {
+        mostRecentProj.innerHTML = '';
+        mostRecentProj.innerHTML = newestProjectHTML.body.innerHTML;
+      }
+    }
+
   </script>
 </body>