Final

README.md

@@ -0,0 +1 @@
+Website: https://sleepypimp.github.io/Lab6/

components/journal-entry.js

@@ -74,6 +74,13 @@ class JournalEntry extends HTMLElement {
 
     // CODE GOES HERE
 
+    this.shadowRoot.title = entry.title;
+    this.shadowRoot.querySelector(".entry-title").innerHTML = entry.title;
+    this.shadowRoot.date = entry.date;
+    this.shadowRoot.querySelector(".entry-date").innerHTML = entry.date;
+    this.shadowRoot.content = entry.content;
+    this.shadowRoot.querySelector(".entry-content").innerHTML = entry.content;
+
     if (entry.image) {
       let entryImage;
       /*
@@ -85,6 +92,18 @@ class JournalEntry extends HTMLElement {
 
       // CODE GOES HERE vvv
 
+      entryImage = document.createElement('img');
+      entryImage.className = "entry-image";
+      entryImage.src = entry.image.src;
+      entryImage.alt = entry.image.alt;
+      this.shadowRoot.image = entryImage;
+      this.shadowRoot.querySelector(".entry").append(entryImage);
+
+
+
+
+
+
 
 
 
@@ -110,6 +129,13 @@ class JournalEntry extends HTMLElement {
        */
 
       // CODE GOES HERE vvv
+      entryAudio = document.createElement('audio');
+      entryAudio.className = 'entry-audio';
+      entryAudio.src = entry.audio;
+      entryAudio.controls = true;
+
+      this.shadowRoot.audio = entryAudio;
+      this.shadowRoot.querySelector('.entry').append(entryAudio);
 
 
 

scripts/script.js

@@ -16,20 +16,32 @@ document.addEventListener('DOMContentLoaded', () => {
    * the current entry for each journal-entry element.
    */
 
-  let url = ""  // SET URL 
+  let url = "https://cse110lab6.herokuapp.com/entries"  // SET URL 
 
   fetch(url)
-    .then( /* FILL IN RESPONSE HANDLING HERE */ )
+    .then(response => response.json()/* FILL IN RESPONSE HANDLING HERE */ )
     .then(entries => {
       entries.forEach((entry) => {
 
         let newPost;  
 
 
         // CODE GOES HERE vvv
-
 
 
+
+       newPost = document.createElement('journal-entry');
+       newPost.entry = entry; 
+       const main = document.getElementsByTagName('main');
+       main[0].appendChild(newPost);
+
+
+
+
+
+
+
+