Lab 08: JSON & AJAX
In this lab I replaced the hard-coded labs list on
labs.html with a dynamic version driven by a main JSON file (projects.json) and jQuery AJAX.
How the projects page works
labs.html loads lab08.js using jQuery. On DOMContentLoaded, the script calls
$.ajax() to fetch projects.json, iterates over the projects array, and appends a
<section class="card"> for each entry. Each card fades in with an 80 ms delay using jQuery's
.fadeIn(). jQuery UI .tooltip() adds hover tooltips to every card link.
Adding a new lab to projects.json now is the only change needed.
Bonus: JSON as the single source of truth
The same projects.json file drives the RSS 2.0 / Atom 1.0 feeds.
The Lab 04 feed page links to rss.html and atom.html, which fetch
projects.json, call buildRSS() / buildAtom() from lab08.js, and redirect the browser
to a Blob URL containing the generated XML, so the feeds are always in sync with the JSON without any manual edits.