WDD 131: Dynamic Web Fundamentals

W04 Assignment: Picture Album Enhancement

Overview

This assignment applies the concepts presented in the learning activities to enhance a previous assignment by incorporating lazy loading and by making the webpage responsive to user interaction by filtering the displayed temple data.

Task

Enhance a previous webpage assignment by adding the new required features and using provided temple data.

Instructions

1. Make a copy of your temples.html and rename it "filtered-temples.html"
2. Make a copy of any associated CSS and JS files as well and rename them appropriately, making sure they work with your new HTML file.
3. In the HTML, delete all the temple figures/images HTML elements used on the original page (you should have had nine (9) or more).

   We will be replacing these figures with dynamically generated HTML using JavaScript.

4. Copy the following code array named "temples" which consists of a sample of temple objects and place the array into your own JavaScript file.
   Array of Temple Objects

           const temples = [
     {
       templeName: "Aba Nigeria",
       location: "Aba, Nigeria",
       dedicated: "2005, August, 7",
       area: 11500,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/aba-nigeria/400x250/aba-nigeria-temple-lds-273999-wallpaper.jpg"
     },
     {
       templeName: "Manti Utah",
       location: "Manti, Utah, United States",
       dedicated: "1888, May, 21",
       area: 74792,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/manti-utah/400x250/manti-temple-768192-wallpaper.jpg"
     },
     {
       templeName: "Payson Utah",
       location: "Payson, Utah, United States",
       dedicated: "2015, June, 7",
       area: 96630,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/payson-utah/400x225/payson-utah-temple-exterior-1416671-wallpaper.jpg"
     },
     {
       templeName: "Yigo Guam",
       location: "Yigo, Guam",
       dedicated: "2020, May, 2",
       area: 6861,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/yigo-guam/400x250/yigo_guam_temple_2.jpg"
     },
     {
       templeName: "Washington D.C.",
       location: "Kensington, Maryland, United States",
       dedicated: "1974, November, 19",
       area: 156558,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/washington-dc/400x250/washington_dc_temple-exterior-2.jpeg"
     },
     {
       templeName: "Lima Perú",
       location: "Lima, Perú",
       dedicated: "1986, January, 10",
       area: 9600,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/lima-peru/400x250/lima-peru-temple-evening-1075606-wallpaper.jpg"
     },
     {
       templeName: "Mexico City Mexico",
       location: "Mexico City, Mexico",
       dedicated: "1983, December, 2",
       area: 116642,
       imageUrl:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/mexico-city-mexico/400x250/mexico-city-temple-exterior-1518361-wallpaper.jpg"
     },
     // Add more temple objects here...
   ];

   Here is one resource for temple data: ChurchofJesusChristTemples.org

5. Add an additional three (3) or more temple objects to your array making sure to match the given properties with matching and relevant key-value pairs.
6. Loop through the array and create "temple cards" for each temple by displaying:
   • The name of the temple.
   • The location of the temple.
   • The date the temple was dedicated.
   • The total area of the temple in square feet.
   • The provided image of the temple (an absolute address), making sure to include an appropriate alt value such as the name of the temple.
   • Use native lazy loading for each temple image.

   

7. Respond to the main navigation menu items by filtering and displaying the temples as follows:
   • Old – temples built before 1900
   • New – temples built after 2000
   • Large – temples larger than 90,000 square feet
   • Small – temples smaller than 10,000 square feet
   • Home – displays all the temples stored in the array.

   Video Demonstration: Developing an Array Filter [ 11 minutes ]

8. As always, be sure to support the footer copyright year and date last modified output through a valid JavaScript reference.

Testing

1. Continuously check your work by rendering the page locally using Live/Five Server in VS Code.
2. Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of DevTools.
3. Generate the browser's DevTools Lighthouse report and run diagnostics for Accessibility, Best Practices, and SEO in both the mobile and desktop views.
   It is best to test your page in a Private or Incognito browser window when using DevTools Lighthouse.

   Note: Using the absolute references to images on the Church's content delivery network can lead to some less favorable performance issues. You can ignore this or go ahead and create local copies of temple images that are optimized. Be aware of copyrights.

Audit and Submission

1. Commit your local repository and push or upload your work to your GitHub Pages enabled wdd131 repository on GitHub.
2. Use this ☑️ audit tool to check basic HTML and CSS standards and requirements.
3. Share your work by posting your URL in the course's Microsoft Teams weekly forum and comment on your peers' work by providing constructive feedback.
4. Return to Canvas and submit your GitHub Pages enabled URL. Example given:

   https://your-github-username.github.io/wdd131/filtered-temples.html