Home / Schedule / Checkpoint 4

Checkpoint 4

Due: Sunday, 7/12 (end of Week 8)

Checked by automated structure checks + instructor review. You do not submit anything on Canvas for the checkpoint itself. I check your GitHub repos directly. Your MP3 repo URL still needs to be submitted on the Mini Project 3 Canvas assignment.

⭐ Required: Mini Project 3 ("API-Powered App")

This is the main deliverable for Checkpoint 4. MP3 is due Sunday 7/12; this checkpoint confirms it is finished and live. See the full spec on the Mini Project 3 assignment page.

  • A separate public repo for MP3 (not inside oim3690 or username.github.io), named in lowercase with hyphens after what the app does
  • PROPOSAL.md in that repo (what the app does, who it is for, which API it uses). Proposal due earlier, Sunday 7/5
  • The app fetches real data from an external API with fetch and renders it in the page (no hard-coded copy of the data standing in for a live call)
  • Handles the loading and error states of the request (a try / catch around fetch, and something on screen while data is on its way)
  • The site is built and deployed live (GitHub Pages for a no-key API; Vercel if your API needs a hidden key, and never commit the key)
  • The live URL is in the MP3 repo's About box (open About, then check "Use your GitHub Pages website")
  • Linked from your oim3690 README

Required: oim3690 repo (in-class JavaScript work)

  • playlist.html in the repo root, a small list app built with the render-from-data pattern from 6/29 (an array of items, a loop, one list item per entry). Build a small version by hand first, then use AI to extend it and read what it gives back. This is the class exercise, so it cannot be your MP3 topic
  • post-message.html in the repo root, the 7/1 POST exercise: an async function that sends a message to https://oim.zhili.dev/message with your own X-Token (your first name, twice). Then use AI to add a text input and a button so you can post any message
  • fetch-fun.html in the repo root, the 7/1 fetch exercise: pick a free no-key public API (a random dog image, a joke, an advice slip), and by hand write an async function that fetches it, reads one field out of the JSON, and shows it on the page. Wrap the call in try / catch. Then use AI to add a "Surprise me" button that switches between two APIs
  • An ai-chat/ folder (index.html, script.js, config.js), the 7/6 LLM API exercise: add config.js to .gitignore and commit that first, then put the class OpenAI key in config.js. Write the askAI helper by hand and make one successful call, then use AI to turn it into a small chat page. Run git status and confirm config.js never appears in it
  • data-app.html in the repo root plus js/data.js and js/main.js, the 7/8 code-organization exercise: export an array of data from data.js, import it into main.js, and link only main.js with <script type="module" src="js/main.js">. Build a tiny version by hand first, then use AI to fill data.js with real data and have main.js render it on the page

Required: weekly logs

  • logs/wk07.md (Week 7 log: what you built, what you learned, AI interactions)
  • logs/wk08.md (Week 8 log)
  • Your MP3 AI collaboration note (in either log) has to be specific: pick one piece of AI output you did not accept as-is. Write what it gave you, what you changed, and how you knew it needed the change, and name the commit where the change landed. If AI really got everything right the first time, write down how you verified that

Also checked

  • At least 4 commits in the past two weeks, with descriptive messages, pushed as you go (not all at once)
  • Images kept in an images/ folder and linked with relative paths
  • Pages are responsive: the viewport meta tag is present and the layout holds up at mobile widths
  • No spaces in file or folder names. Lowercase, use hyphens

There is a 48-hour grace period after the deadline (-1 point/day). If you believe your score is incorrect, comment on this Canvas assignment within 48 hours and I will re-check.

This checklist is updated after each class session as new deliverables are assigned. Week 7: 6/29 playlist.html, 7/1 post-message.html + fetch-fun.html. Week 8: 7/6 ai-chat/ (LLM API), 7/8 data-app.html + js/data.js + js/main.js (code organization). The specific AI-collaboration note above is the 7/8 log emphasis.

Due Sunday, 7/12

Last updated: Thursday, 7/23/2026