script: added cards markup and handle data fn

Author: riungemaina

script.js

@@ -5,6 +5,13 @@ const closeSelector = document.getElementById("sidebarClose");
 const sidebar = document.getElementById("sidebar");
 const closeBtn = document.getElementById("closeBtn");
 const sidebarUnderlay = document.getElementById("sidebarUnderlay");
+const cards = document.getElementsByClassName("card");
+const projectImages = document.getElementsByClassName("projectImg");
+const projectNames = document.getElementsByClassName("name");
+// const projectAges = document.getElementsByClassName("ageGroup");
+const projectCourse = document.getElementsByClassName("bootcamp");
+// const projectDate = document.getElementsByClassName("date");
+const projectLink = document.getElementsByClassName("projectLink");
 
 var hideElementToRight = "-100%";
 
@@ -25,3 +32,24 @@ openSelector.onclick = () => {
   fn.openSelector(sidebar, closeBtn, "0", "20px");
   sidebarUnderlay.style.display = "block";
 };
+
+const handleData = (data) => {
+  fn.makeCards(cards, data.length - 1);
+  for (var [index, project] of data.entries()) {
+    projectNames[index].innerHTML = `by ${project.data.student_name[0].text}`;
+    // projectAges[index].innerHTMl = project.data.age_group;
+    projectCourse[index].innerHTML = project.data.course[0].text;
+    // projectDate[index].innerHTML = project.data.bootcamp_start_date;
+    projectImages[index].src = project.data.site_image.url;
+    projectLink[index].href = project.data.link_to_site.url;
+    cards[index].classList.remove("hide");
+  }
+};
+
+async function getData() {
+  const masterRef = await fn.getApi();
+  const data = await fn.getPosts(masterRef);
+  handleData(data);
+}
+
+getData();