Populate Projects Div

- For now there is no limit on how many projects it return
- Need to change the database table so that it includes Topic and Subtopic info...this way it will display projects with the same name but under different topics/subtopics

Author: programmingKyle

src/index.html

@@ -74,13 +74,7 @@ <h5 id="currentProjectText">Project</h5>
         <div class="bottom-grid">
           <div class="container" style="overflow: hidden; grid-template-rows: auto 1fr;">
             <h3>Projects</h3>
-            <div class="list-container">
-              <div class="project-item-div">
-                <p>Project Name</p>
-                <p>3.5h</p>
-                <h5 style="text-align: left">Topic</h5>
-                <h5 style="text-align: right">Subtopic</h5>
-              </div>
+            <div id="projectListDiv" class="list-container">
             </div>
           </div>
           <div class="container" style="overflow: hidden; grid-template-rows: auto 1fr;">

src/infoHandler.js

@@ -22,5 +22,5 @@ async function getAllActiveSubtopics(){
 
 async function getAllActiveProjects(){
     activeProjects = await api.projectHandler({request: 'Get'});
-    console.log(activeProjects);
+    populateRecentProjects();
 }

src/recentProjects.js

@@ -1,3 +1,26 @@
-document.addEventListener('DOMContentLoaded', () => {
-    
-})
+const projectListDiv_el = document.getElementById('projectListDiv');
+
+function populateRecentProjects(){
+    console.log(activeProjects);
+
+    activeProjects.forEach(element => {
+        const projectItem_el = document.createElement('div');
+        projectItem_el.classList.add('project-item-div');
+
+        const projectName_el = document.createElement('p');
+        projectName_el.textContent = element.project;
+
+        const projectTimeText_el = document.createElement('p');
+        projectTimeText_el.textContent = 'NA YET';
+
+        const projectTopicText_el = document.createElement('h5');
+        projectTopicText_el.textContent = 'NA YET';
+
+        const projectSubtopicText_el = document.createElement('h5');
+        projectSubtopicText_el.textContent = 'NA YET';
+
+        projectItem_el.append(projectName_el, projectTimeText_el, projectTopicText_el, projectSubtopicText_el);
+
+        projectListDiv_el.append(projectItem_el);
+    });
+}