diff --git a/README.md b/README.md index e69de29..7463cb4 100644 --- a/README.md +++ b/README.md @@ -0,0 +1 @@ +Website: https://sleepypimp.github.io/Lab6/ diff --git a/components/journal-entry.js b/components/journal-entry.js index e80ad95..e2b9271 100644 --- a/components/journal-entry.js +++ b/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); diff --git a/scripts/script.js b/scripts/script.js index 054c06c..cb9e804 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -16,10 +16,10 @@ 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) => { @@ -27,9 +27,21 @@ document.addEventListener('DOMContentLoaded', () => { // CODE GOES HERE vvv - + + newPost = document.createElement('journal-entry'); + newPost.entry = entry; + const main = document.getElementsByTagName('main'); + main[0].appendChild(newPost); + + + + + + + +