-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
586 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| { | ||
| "wardInfo": { | ||
| "familyName": "Wolfley", | ||
| "moveInDate": "2002-04-12", | ||
| "numberOfPeople": 7, | ||
| "visitedByBishopric": true, | ||
| "familyMembers": [ | ||
| { | ||
| "name": "Vern Wolfley", | ||
| "gender": "Male", | ||
| "birthdate": "1973-04-01" | ||
| }, | ||
| { | ||
| "name": "Kindy Wolfley", | ||
| "gender": "Female", | ||
| "birthdate": "1975-11-10" | ||
| }, | ||
| { | ||
| "name": "Elena Wolfley", | ||
| "gender": "Female", | ||
| "birthdate": "2001-09-03" | ||
| }, | ||
| { | ||
| "name": "Natalie Wolfley", | ||
| "gender": "Female", | ||
| "birthdate": "2003-08-27" | ||
| }, | ||
| { | ||
| "name": "Meghan Wolfley", | ||
| "gender": "Female", | ||
| "birthdate": "2005-08-10" | ||
| }, | ||
| { | ||
| "name": "Vern Wolfley", | ||
| "gender": "Male", | ||
| "birthdate": "2007-04-18" | ||
| }, | ||
| { | ||
| "name": "Benjamin Wolfley", | ||
| "gender": "Male", | ||
| "birthdate": "2008-10-05" | ||
| } | ||
| ] | ||
| }, | ||
| "familyName": "Sherwood", | ||
| "moveInDate": "2004-05-11", | ||
| "numberOfPeople": 8, | ||
| "visitedByBishopric": true, | ||
| "familyMembers": [ | ||
| { | ||
| "name": "Bill Sherwood", | ||
| "gender": "Male", | ||
| "birthdate": "1966-04-01" | ||
| }, | ||
| { | ||
| "name": "Kathy Sherwood", | ||
| "gender": "Female", | ||
| "birthdate": "1969-11-10" | ||
| }, | ||
| { | ||
| "name": "Kimberly Sherwood", | ||
| "gender": "Female", | ||
| "birthdate": "2081-09-03" | ||
| }, | ||
| { | ||
| "name": "Kris Sherwood", | ||
| "gender": "Female", | ||
| "birthdate": "2083-08-27" | ||
| }, | ||
| { | ||
| "name": "Koni Sherwood", | ||
| "gender": "Female", | ||
| "birthdate": "2085-08-10" | ||
| }, | ||
| { | ||
| "name": "Jeff Sherwood", | ||
| "gender": "Male", | ||
| "birthdate": "2087-04-18" | ||
| }, | ||
| { | ||
| "name": "Greg Sherwood", | ||
| "gender": "Male", | ||
| "birthdate": "2089-10-05" | ||
| }, | ||
| { | ||
| "name": "Katie Sherwood", | ||
| "gender": "Female", | ||
| "birthdate": "2091-10-05" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Latter-Day Prophets</title> | ||
| <link rel="stylesheet" href="styles/normalize.css" /> | ||
| <link rel="stylesheet" href="styles/prophets.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Latter-day Prophets</h1> | ||
| </header> | ||
| <main> | ||
| <div id="cards"></div> | ||
| </main> | ||
| <footer> | ||
| Vern Wolfley | Latter-day Prophets | ||
| </footer> | ||
| <script src="scripts/prophets.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| const url = "https://brotherblazzard.github.io/canvas-content/latter-day-prophets.json"; | ||
| const cards = document.querySelector("#cards"); | ||
|
|
||
| async function getProphetData() { | ||
| try { | ||
| const response = await fetch(url); | ||
| if (!response.ok) { | ||
| throw new Error("Failed to fetch data"); | ||
| } | ||
| const data = await response.json(); | ||
| // console.table(data); | ||
| displayProphets(data.prophets); | ||
| return data; | ||
| } catch (error) { | ||
| console.error("Error fetching data:", error); | ||
| throw error; | ||
| } | ||
| } | ||
|
|
||
| getProphetData(); | ||
|
|
||
| const displayProphets = (prophets) => { | ||
| console.log(prophets); | ||
| prophets.forEach((prophet) => { | ||
| // Create a section element and store it in a variable named card | ||
| const card = document.createElement("section"); | ||
| // Create an h2 element and store it in a variable named "fullName" | ||
| const fullName = document.createElement("h2"); | ||
| // Create a p element and store it in a variable named "birthdate" | ||
| const birthdate = document.createElement("p"); | ||
| // Create a p element and store it in a variable named "birthplace" | ||
| const birthplace = document.createElement("p"); | ||
| // Create an img element and store it in a variable named "portrait" | ||
| const portrait = document.createElement("img"); | ||
|
|
||
| // Populate the heading element with the prophet's full name using a template string | ||
| fullName.textContent = `${prophet.name} ${prophet.lastname}`; | ||
|
|
||
| // Populate the paragraph element with the prophet's birthdate using a template string | ||
| birthdate.textContent = `Date of Birth: ${prophet.birthdate}`; | ||
|
|
||
| // Populate the paragraph element with the prophet's birthplace using a template string | ||
| birthplace.textContent = `Place of Birth: ${prophet.birthplace}`; | ||
|
|
||
| // Build the image element by setting attributes | ||
| portrait.setAttribute("src", prophet.imageurl); | ||
| portrait.setAttribute("alt", prophet.fullName); | ||
| portrait.setAttribute("loading", "lazy"); | ||
| portrait.setAttribute("width", "200"); | ||
| portrait.setAttribute("height", "300"); | ||
|
|
||
| card.appendChild(fullName); | ||
| card.appendChild(birthdate); | ||
| card.appendChild(birthplace); | ||
| card.appendChild(portrait); | ||
|
|
||
| // add the section card to the "cards" div | ||
| cards.appendChild(card); | ||
| }); | ||
| }; | ||
|
|
Oops, something went wrong.