HO11 — API-Powered Widget

Hands-on portfolio project · Week 5 · Solo · module M15. Part of the ForgeMind AI — AI Productivity Essentials course.

This is a static frontend widget. HO11 is a pure browser page — it runs fine as a static site (double-click the file, or host it free on GitHub Pages). The backend-dependent hands-on projects later in the course run on localhost, with one short deploy video to take them live.

Goal

Done when: Live data from a real API on a page

What to ship

A page/script that fetches a public API and shows the data + README naming the API + the HTTP calls.

Pick a problem statement

Choose one of these real use-cases — or bring your own (get it approved first):

1. You check the weather and air quality every morning across three apps. Build a page widget that calls a free weather and air-quality API for your city and shows today's temperature, conditions and AQI live. Success: a hosted page that fetches real data on load, with the README naming the API and the exact HTTP call it makes.

2. You follow a few stocks or coins but flick between tabs to track them. Build a ticker widget that pulls a finance API and shows the current prices for your watchlist on one page. Success: a hosted page that displays live prices fetched from the API, with the README naming the endpoint and the HTTP request used.

3. As an open-source maintainer you keep opening GitHub to check a repo's health. Build a stats card that calls the GitHub API and shows a repo's stars, open issues and last commit on a page. Success: a hosted page that fetches the real numbers for a chosen repo, documented in the README with the API call.

4. You buy from overseas and constantly look up exchange rates. Build a currency converter that calls a free FX-rate API and converts an amount between two currencies you pick. Success: a hosted page where entering an amount returns the live converted value, with the README naming the rate API and the HTTP call.

5. You work with teammates or clients in other countries and keep getting caught out by their public holidays. Build a widget that pulls a free public-holidays API and shows the upcoming holidays for the countries you work with, so you can plan around them. Success: a page that fetches and lists the real upcoming holidays for your chosen countries on load, with the README naming the API (Nager.Date) and the exact HTTP call — GET https://date.nager.at/api/v3/PublicHolidays/2026/US (Nager.Date covers many countries — e.g. US, GB, SG, DE, AU; a few such as IN/AE aren't in its dataset and return HTTP 204, so pick a covered country for your demo).

Build it with your Claude.ai subscription

No API key needed — just your normal Claude.ai login. Every widget here calls a free public data API directly from the browser (weather, crypto, GitHub, exchange rates, quotes/jokes); none of them call Claude at runtime, and none need an Anthropic API key.

To build one, open Claude.ai, open the sample folder you like (samples/sample-01 … sample-05), and copy that sample's example prompt into Claude — it writes you a complete index.html. Save the file and double-click it. Each sample README has the full step-by-step.

How to use this repo

1. Click Use this template to create your own copy.
2. Open the sample folder closest to your idea and copy its example prompt into Claude.ai to generate your widget — or open its ready-made index.html and tweak it.
3. Replace this section of the README with: what you built, the problem it solves, and how to run it.

---

HO11 · Solo · ForgeMind AI Course · module M15 (Week 5)

💡 Use your Claude.ai Pro plan wisely

The Pro plan has a usage limit that resets every few hours. A few habits make it stretch — and keep a mistake from burning your whole session:

• Use the example prompt in each sample's README — it's already written and tested. Don't reinvent it.
• One clear prompt beats lots of vague back-and-forth. Say what you want, with an example, in a single message.
• Start a new chat when you switch tasks. Long chats re-read every earlier message and use up your limit faster.
• Don't paste big files over and over. Paste once, then refer back to it.
• If something works, keep it. Tweak it rather than regenerate from scratch.
• Using Claude Code or Cowork? This repo's CLAUDE.md makes Claude follow these same rules automatically, and SKILL.md is a reusable "token-wise" skill.

If you do hit the limit, it resets after a few hours — nothing you've saved is lost.