Introduction Form Fetch Assignment

Now that we have all ( hopefully ) sent our introductions to the api, we can build sites using those introductions!

To grab all of the introductions live, for use in your site, you can use javascript:

const response = await fetch("https://intro-form.tommyhost.ing/");
const allIntroductions = await response.json();

To grab a specific submission, you pull it out of that, here is an example for grabbing the most recent submission:

let newestUsername = null;  // will hold the winner's name
let newestTime = "";         // will hold the winner's timestamp
 
// Loop over each name, just like `for username in all:` in Python:
for (const username in allIntroductions) {
  const record = allIntroductions[username];      // look up that person's entry
  // lastUpdated looks like "2026-11-03T19:32:51..." — this format
  // sorts correctly as plain text, so a simple > comparison works:
  if (newestUsername === null || record.lastUpdated > newestTime) {
    newestUsername = username;       // new winner
    newestTime = record.lastUpdated; // remember their time
  }
}
 
console.log("Most recent:", newestUsername);
console.log("Submitted at:", all[newestUsername].lastUpdated);
console.log("JSON link:", all[newestUsername].jsonUrl);

Here is an example for pulling out every image:

const images = [];  
 
for (const username in allIntroductions) {
  images.push({                              // like images.append(...) in Python
    username: username,
    img: allIntroductions[username].introductionData.img  // a long "data:image/..." text block
  });
}

Then, if you wanted to show those images on the page:

for (const username in all) {
  const record = allIntroductions[username];
 
  const picture = document.createElement("img");
  picture.src = record.introductionData.img;  // the long data-text goes here
  picture.alt = username;                     // text shown if the image can't load
  picture.style.maxWidth = "200px";           // keep each one small
 
  const label = document.createElement("p");
  label.textContent = username;               // write the person's name under it
 
  document.body.append(picture);
  document.body.append(label);
}

Those are just a couple of examples of the kinds of things you do to handle this data and use it on a site.

For this assignment, you need to build something using this introduction form data, satisfying these requirements:

1. Your theming should match the rest of your itis3135 site, and a link to this page should be placed in your upper navbar. All general site requirements should be met (title combines h1 + divider + h2, nav in header, etc), with the one exception being that you may have images from outside of images/, as you will be using your classmates images, sourced from the API.
2. You need to use at least 3 elements from the form ( e.g. the image and the name, or the animal and the quote, etc ), though, of course, the more the merrier!
3. No errors shtheould be shown in the console ( nothing red )
4. The page needs to be something you could imagine finding on a webpage real people visit, like a yearbook page, or a quotebook, or anything else you could do with this data! Please try to be creative! While just taking the first name, last name, and middle initial, and throwing them on a page in a p element would technically be using 3 of these elements on a page, and would be themed like the rest of your site, it would not meet this requirement.

Please feel free to use AI tooling for help with, or full generation of, the javascript needed for this task! If you get stuck at any point, AI tools can be super helpful in debugging, though you should also feel free to come to the TAs, or send me an email, at [email protected]