diff --git a/components/journal-entry.js b/components/journal-entry.js index e80ad95..45f5260 100644 --- a/components/journal-entry.js +++ b/components/journal-entry.js @@ -73,6 +73,16 @@ class JournalEntry extends HTMLElement { */ // CODE GOES HERE + let article = this.shadowRoot.querySelector('.entry'); + + let title = this.shadowRoot.querySelector('.entry-title'); + title.textContent = entry.title; + + let date = this.shadowRoot.querySelector('.entry-date'); + date.textContent = entry.date; + + let content = this.shadowRoot.querySelector('.entry-content'); + content.textContent = entry.content; if (entry.image) { let entryImage; @@ -85,8 +95,11 @@ class JournalEntry extends HTMLElement { // CODE GOES HERE vvv - - + let image = document.createElement('img'); + image.className = 'entry-image'; + image.src = entry.image.src; + image.alt = entry.image.alt; + article.appendChild(image); // CODE GOES HERE ^^^ @@ -111,9 +124,11 @@ class JournalEntry extends HTMLElement { // CODE GOES HERE vvv - - - + let audio = document.createElement('audio'); + audio.className = 'entry-audio'; + audio.src = entry.audio; + audio.controls = true; + article.appendChild(audio); // CODE GOES HERE ^^^ diff --git a/scripts/script.js b/scripts/script.js index 054c06c..14152ea 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( /* FILL IN RESPONSE HANDLING HERE */ response => response.json()) .then(entries => { entries.forEach((entry) => { @@ -28,11 +28,10 @@ document.addEventListener('DOMContentLoaded', () => { // CODE GOES HERE vvv - - - - - + let main = document.querySelector('main'); + newPost = document.createElement('journal-entry'); + newPost.entry = entry; + main.appendChild(newPost); // CODE GOES HERE ^^^