MICKAI® Trust AgentFree AI courses

programming · Level 2

Build your first app with an AI coding assistant

Brief it, build in small steps, read the code, test the awkward cases and keep control, using a bill splitter as the running project.

By Mickarle Wagstaff-Irons - Micky Irons

  • Level 2Getting going
  • 120 min
  • 5 chapters
  • Free PDF, no account
Read a sample Download free PDF (PDF, 1.7 MB)
The Sequenceprogramming / 02

Start with the essentials

The short answer

An AI coding assistant writes code by predicting text that looks likely to fit, so its code can look tidy and still be wrong. Stay in control: write a short brief with worked examples first, build in small steps, save a copy before each change, read the code against a checklist, test the awkward cases yourself, and never share secrets or personal data.

What you will learn

  • You will be able to write a one-paragraph brief with worked examples before you ask an assistant for code.
  • You will be able to build a small web page in short steps with any kind of assistant, keeping a working copy at each stage.
  • You will be able to review code against a checklist: what it reads, changes, sends and stores, and how it handles bad input.
  • You will be able to test with examples first and edge cases second, and to explain why an assistant's own explanation is not proof.
  • You will know how to work safely: no secrets or personal data, a scratch folder for agents, permission prompts read, dry runs first.
  • You will know what to check about a tool's terms and a code licence, and when to stop and learn the language properly.

Who it is for

Beginners who have never built an app and want to use an AI assistant to make a small one while understanding it and staying in control. You need a computer with a web browser and a plain text editor. No programming experience is needed.

Before you start

  • Comfort asking an AI assistant for things in plain words, as in the Your first prompts workbook. You need a computer, a web browser and a plain text editor. An assistant is helpful but not required: the exercises use the example code in this workbook.

Read a sample · Chapter 02 of 05

02

Build in small steps, and keep a working copy

Ask for one small piece, check it, save a copy, then ask for the next.

Keep a working copy. Work in a folder called bill-splitter. Before each change, copy the working file as index-copy-01.html, then index-copy-02.html. If a change breaks the page, go back to the last good copy. Never let an assistant edit your only copy.

Use these four prompts in order: small steps give code you can check. After each, open index.html in your browser (double-click it or drag it into a browser window), try your examples and save a copy.

text · 4 lines
Step 1, the page. From my brief, write index.html with the three inputs and an empty results area. No calculations yet.
Step 2, the sums. Add splitBill in whole pence, never fractions. Round the tip to the nearest penny, halves up. Shares must add up exactly. Show the arithmetic for my examples.
Step 3, bad input. Refuse empty, negative, zero-people, non-numeric or absurdly large input, and bills with more than two decimals, each with a clear message.
Step 4, the check. Add a button that runs my examples and the bad-input cases and prints PASS or FAIL for each. I will supply the expected answers.

Copying code out of a PDF can add a line break wherever a line wraps, and one stray break inside a string can stop the whole page. The web page for this workbook shows this chapter's code with a Copy code button that copies it exactly. If you would rather use the PDF, type the code in by hand or check every line after pasting.

html · 107 lines
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bill splitter</title>
<style>
  body { font-family: system-ui, sans-serif; max-width: 26rem; margin: 2rem auto; padding: 0 1rem; }
  label { display: block; margin-top: 1rem; }
  input { font-size: 1rem; width: 100%; box-sizing: border-box; }
  #error { color: #a00000; }
  #result, #checks { white-space: pre-line; }
</style>
</head>
<body>
<h1>Bill splitter</h1>
<label>Bill in pounds <input id="bill" inputmode="decimal" value="90.00"></label>
<label>Tip in per cent <input id="tip" inputmode="decimal" value="10"></label>
<label>Number of people <input id="people" inputmode="numeric" value="4"></label>
<p id="error" role="alert"></p>
<p id="result" aria-live="polite"></p>
<button id="check" type="button">Run self-check</button>
<p id="checks"></p>
<script>
"use strict";

const MAX_PENCE = 100000000; // 1,000,000.00 pounds
const gbp = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" });
const money = (pence) => gbp.format(pence / 100);
const el = (id) => document.getElementById(id);

// "45.60" becomes whole pence (4560). Anything that is not a plain amount gives null.
function toPence(text) {
  const m = /^(\d+)(?:\.(\d{1,2}))?$/.exec(String(text).trim());
  return m ? Number(m[1]) * 100 + Number((m[2] || "").padEnd(2, "0")) : null;
}

// "12.5" becomes tenths of a per cent (125). Anything else gives null.
function toTenths(text) {
  const m = /^(\d+)(?:\.(\d))?$/.exec(String(text).trim());
  return m ? Number(m[1]) * 10 + Number(m[2] || 0) : null;
}

// Works only in whole pence, so no fraction of a penny ever appears.
function splitBill(billText, tipText, peopleText) {
  const bill = toPence(billText);
  if (bill === null || bill === 0) return { ok: false, error: "Enter a bill above zero, two decimals at most, like 45.60." };
  if (bill > MAX_PENCE) return { ok: false, error: "Bill too large: the limit is 1,000,000.00." };
  const tenths = toTenths(tipText);
  if (tenths === null || tenths > 1000) return { ok: false, error: "Enter a tip from 0 to 100, one decimal at most." };
  const peopleClean = String(peopleText).trim();
  const people = /^\d+$/.test(peopleClean) ? Number(peopleClean) : 0;
  if (people < 1 || people > 100) return { ok: false, error: "Enter 1 to 100 people, as a whole number." };

  const tip = Math.floor((2 * bill * tenths + 1000) / 2000); // tip rounded to the nearest penny, halves up
  const total = bill + tip;
  const base = Math.floor(total / people);
  const extra = total % people; // this many people pay one penny more, so the shares add up exactly
  const shares = Array.from({ length: people }, (_, i) => base + (i < extra ? 1 : 0));
  return { ok: true, bill, tip, total, shares };
}

function render() {
  const r = splitBill(el("bill").value, el("tip").value, el("people").value);
  el("error").textContent = r.ok ? "" : r.error;
  if (!r.ok) { el("result").textContent = ""; return; }
  const low = r.shares[r.shares.length - 1];
  const morePay = r.shares.filter((s) => s > low).length; // people who pay the extra penny
  const each = morePay === 0 ? "Each person pays " + money(low)
    : morePay + " pay " + money(low + 1) + " and " + (r.shares.length - morePay) + " pay " + money(low);
  el("result").textContent = ["Bill " + money(r.bill), "Tip " + money(r.tip), "Total " + money(r.total), each].join("\n");
}

// Self-check. The expected shares (in pence) were worked out by hand, not by this code.
const CASES = [
  ["90", "10", "4", [2475, 2475, 2475, 2475]],
  ["100", "0", "3", [3334, 3333, 3333]],
  ["10.10", "12.5", "2", [568, 568]],
  ["0.10", "5", "1", [11]],
  ["0.01", "0", "3", [1, 0, 0]],
  ["1000000", "100", "100", Array(100).fill(2000000)],
  ["90", "10", "0", "error"],
  ["-5", "10", "2", "error"],
  ["", "10", "2", "error"],
  ["90", "10", "2.5", "error"],
  ["12.345", "10", "2", "error"],
  ["1000000.01", "10", "2", "error"],
];

function runChecks() {
  let failed = 0;
  const lines = CASES.map((c) => {
    const r = splitBill(c[0], c[1], c[2]);
    const pass = JSON.stringify(r.ok ? r.shares : "error") === JSON.stringify(c[3]);
    if (!pass) failed++;
    return (pass ? "PASS " : "FAIL ") + JSON.stringify(c.slice(0, 3));
  });
  lines.push(failed ? failed + " check(s) FAILED" : "All " + CASES.length + " checks passed");
  return lines.join("\n");
}

["bill", "tip", "people"].forEach((id) => el(id).addEventListener("input", render));
el("check").addEventListener("click", () => { el("checks").textContent = runChecks(); });
render();
</script>
</body>
</html>

The code counts money in whole pence because JavaScript's ordinary numbers are binary floating point (MDN): in Microsoft Edge, which ran every test here, 0.1 + 0.2 gives 0.30000000000000004, while whole numbers are exact up to 9,007,199,254,740,991. It hands out leftover pennies so the shares add up, formats with Intl.NumberFormat (en-GB, GBP: two decimals by default for pounds) and shows results with textContent.

Try it yourself · Activity 02

20 min

Make one small change, safely

Change one thing, using a saved copy, and let the self-check judge it.

  1. Save the app in bill-splitter as plain text named index.html, not index.html.txt (from your assistant, or copy the example). Press Run self-check: the example prints All 12 checks passed.
  2. Copy index.html to index-copy-01.html, then work only on index.html.
  3. Lower the limit from 100 people to 20: change people > 100 to people > 20 and Enter 1 to 100 people to Enter 1 to 20 people (or make a similar small change to your own app). Reload and press Run self-check.
  4. If a check fails, decide whether the change or the check is wrong. Fix the check if the change is right; otherwise copy index-copy-01.html back over index.html.

What would you have missed without the copy and the check?

Worked answer

The self-check prints FAIL ["1000000","100","100"] and ends 1 check(s) FAILED: that case uses 100 people, which the page now refuses. The change is wanted, so the check is stale. Replace it with ["1000000", "100", "20", Array(20).fill(10000000)] and add ["90", "10", "21", "error"]. The next run ends All 13 checks passed.

Keep learning

The complete workbook

This workbook builds one small project, a bill splitter that runs in your browser, with any kind of AI coding assistant: a chat assistant, an editor assistant or an agent. You will write a brief, build in small steps, review the code against a checklist, test the awkward cases and keep working copies. It also covers what never to paste, how to work safely with agents, and when to stop and learn the language properly.

  1. 01
    What an assistant is, and how to brief one

    An assistant writes code in seconds. Checking it is your job, and a clear brief helps.

    In the workbook · 1 exercise
  2. 02
    Build in small steps, and keep a working copy

    Ask for one small piece, check it, save a copy, then ask for the next.

    Read here · 1 exercise
  3. 03
    Read what you were given

    Read code before you run it. You need not understand every line, only ask the right questions.

    In the workbook · 1 exercise
  4. 04
    Test it: examples first, then the awkward cases

    A test is a question with an answer you worked out first. Believe the result over the explanation.

    In the workbook · 1 exercise
  5. 05
    Stay safe, respect the rules, know when to stop

    A few habits stop a beginner's experiment becoming a real problem.

    In the workbook · 1 exercise

Also inside: a 10-point checklist, a glossary of 12 terms and 10 questions and answers to test yourself. 5 hands-on exercises, each with a worked answer at the back where the workbook gives one.

Download all 5 chapters as PDF (PDF, 1.7 MB)

No login, no card, no account. Before the download we ask you to follow Mickai (two quick links). Free to download and use for personal learning, study groups and inside your own team. Please do not resell the workbooks or republish them as your own. Link people to trust-agent.ai instead.

Test yourself

Questions and answers

What is vibe coding, and is it a good way to start?

Vibe coding means giving an AI a high-level prompt and accepting what it builds with little review of the code. It can suit a throwaway prototype. It teaches little, because you never learn why the code works or whether it is safe. This workbook keeps you in the loop: brief, small steps, reading and testing.

Do I need to know how to code first?

No, but you must be willing to read. A small project like this one is a good start, and the checklist helps you question code you only half understand. Stop and learn the language properly when you cannot explain a line after asking for an explanation, when the same bug keeps returning, or when real money or other people's data are involved.

Why can code that looks right be wrong?

An assistant predicts text that is likely to fit your request. That makes code look tidy and confident whether or not it is correct. OWASP describes answers that sound correct but are unfounded. Only running the code against examples you worked out yourself shows whether it is right.

Which assistant should I use?

This workbook does not rank or recommend tools, and features and terms change often. The steps here work with any kind. Before you choose, read the tool's terms: what happens to what you type, who owns the output, and what it may access on your computer. A chat assistant sees only what you give it; editor assistants and agents can reach your files.

How can I tell whether code is safe to run?

You cannot be certain, but you can ask good questions: what does it read, change, send and store, does it treat text as code, and what happens on bad input? Search for network calls and scripts from other addresses. Open the page with developer tools showing and check the list of requests. Try it first where nothing important is at stake.

If the assistant explains its own code, is that proof it works?

No. The explanation is generated in the same way as the code, so it can be fluent and wrong. Asking for an explanation and a self-critique is still worth doing, because it points you at things to check. For code that matters, the NCSC says you need to review, understand and verify, and another AI agent could help. Your own passing tests are the proof.

Why does the bill splitter count in pence?

Ordinary JavaScript numbers store decimals in binary, so many, such as 0.1, are not exact and sums drift: 0.1 + 0.2 gives 0.30000000000000004 in Edge. Whole numbers are exact up to 9,007,199,254,740,991. Counting pence keeps every step exact and lets the page share leftover pennies so the shares always add up to the total.

What must I never paste into an assistant?

Passwords, keys, tokens, other people's personal details, and anything you are not allowed to share. What you type usually goes to someone else's service, and OWASP warns that sensitive data you provide may later be disclosed. Use made-up sample data. If you paste a real secret by mistake, treat it as exposed and replace it at the service that issued it.

Is it safe to let an agent run commands on my computer?

Only with care. An agent uses your permissions, so a mistaken action can change or delete real files. OWASP advises minimum permissions and human approval for high-impact actions. Use a scratch folder of copies, read every permission prompt, approve one action at a time, ask for a dry run first and keep secrets out of the folder.

Can I use and share what an assistant writes?

This workbook cannot give legal advice, and terms and laws vary. Check your tool's terms about who owns and may use its output, and the licence of any code it reproduces. GOV.UK says copyright protects original work, including software, automatically in the UK. If you plan to sell or publish the app, check again and take advice for anything important.

When you have finished

Get your certificate of completion

Type your name and download a certificate for this workbook as a PDF, ready to print or to add to LinkedIn. It is made on your own device, so your name is never sent to us. It is a self-declared certificate, not an accredited qualification.

Make my certificate

Learn the language

Key terms

AI coding assistant
A tool that writes, edits and explains program code from a description in plain words. It predicts likely text, so its code can look right and be wrong.
Vibe coding
Building software by giving high-level prompts and accepting what an AI produces, with little review of the code itself.
Agent
An assistant that acts for you: it edits files and runs commands itself, within the permissions you give it.
Brief
A short written description of what a program is for, what goes in, what comes out and what it must never do, with worked examples.
Hallucination
A confident answer that is unfounded or false, such as code that calls a library or function that does not exist.
Floating point
The way ordinary computer numbers store decimals, in binary. Many decimals, such as 0.1, cannot be stored exactly, so sums can be slightly off.

6 of the workbook's 12 terms. The complete glossary is in the workbook.

Follow the evidence

Sources and checks

Facts last checked: .

Examples in this workbook were run on: Microsoft Edge 153.0.4234.48 (system install, headless) driven by Playwright for Python 1.59.0 with the msedge channel, test scripts in Python 3.12.10, on Windows 11 (2026-09-26).

These workbooks use AI assistance. See how the workbooks are made.

  1. NumberMDN Web Docs
  2. Number.prototype.toFixed()MDN Web Docs
  3. Intl.NumberFormat() constructorMDN Web Docs
  4. Element: innerHTML propertyMDN Web Docs
  5. Node: textContent propertyMDN Web Docs
  6. Navigator: sendBeacon() methodMDN Web Docs
  7. What are browser developer tools?MDN Web Docs
  8. DOM based XSS Prevention Cheat SheetOWASP Cheat Sheet Series
  9. Input Validation Cheat SheetOWASP Cheat Sheet Series
  10. Third Party Javascript Management Cheat SheetOWASP Cheat Sheet Series
  11. LLM06:2025 Excessive AgencyOWASP Gen AI Security Project
  12. LLM09:2025 MisinformationOWASP Gen AI Security Project
  13. LLM02:2025 Sensitive Information DisclosureOWASP Gen AI Security Project
  14. The 'vibe coding spectrum' approach to AI-assisted software developmentNational Cyber Security Centre (NCSC)
  15. How copyright protects your work: OverviewGOV.UK
  16. How copyright protects your work: License and sell your copyrightGOV.UK

Created by Mickarle Wagstaff-Irons - Micky Irons with the Mickai team. Published by Mickai LTD. Last updated 26 September 2026.

NextKeep going

Where to go next