This is the host's crib sheet. Each app is one opening prompt that names the single-file, all-inline constraint, then four or five refinements said in plain English. The executive types; the host coaches the wording. Note that “save it between visits” is always its own step — that's the moment the app starts to remember, and the moment to explain what browser storage is and is not.
1Build a meeting cost calculator as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. Inputs: how many people are in the room, their average salary, and the meeting length in minutes.
2Work out the cost of the meeting — assume about 1,800 working hours a year per person — and show it big, along with the cost per minute.
3Add a tick box for 'held every week' and, when it's on, show what the meeting costs over a year.
4Add a 'Start meeting' button that counts the cost up live, in real time, with the elapsed time — plus pause and reset.
5Remember my inputs in the browser between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a runway and burn calculator as a single self-contained HTML file — all CSS and JavaScript inline, no chart libraries. Inputs: cash in the bank, monthly burn, and monthly revenue.
2Work out the net monthly burn (burn minus revenue) and the months of runway (cash divided by net burn), and show the runway big.
3Show the month the cash runs out. If revenue covers the burn, say it's cash-flow positive instead.
4Draw a chart on a canvas of the cash balance falling to zero over the months. Turn it a warning colour when runway is under six months.
5Update everything live as I change any input, and remember my numbers in the browser.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a decision log as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I log a decision with a title, the options I weighed, what I chose, why, and a confidence level from 0 to 100 on a slider. It stamps today's date.
2Show my decisions newest first as cards, each with the confidence as a coloured pill.
3At the top, show how many I've logged and my average confidence.
4Let me delete a decision.
5Save everything in the browser so my log is still there next time.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a risk register as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I add a risk with a name, a likelihood from 1 to 5, and an impact from 1 to 5.
2Draw a 5 by 5 heatmap — likelihood up the side, impact along the bottom — and colour each cell from green to red by likelihood times impact.
3Place each risk in its cell on the heatmap, showing how many sit there.
4Underneath, list the risks sorted by score, each with a matching colour dot and its likelihood × impact.
5Let me delete a risk, and save everything in the browser between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a 'build, buy or partner?' decision tool as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. Use four criteria — speed to value, cost over three years, control and differentiation, and low delivery risk — each with a weight from 1 to 5.
2Make a table where I score each option — Build, Buy, Partner — against every criterion from 0 to 10.
3For each option, work out a weighted score and show the three side by side, clearly marking the best fit.
4Write a one-line steer naming the winner and the criterion carrying it, and let me title the capability I'm deciding on.
5Remember my weights and scores in the browser between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build an initiative tracker as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I add an initiative with a name, an owner, a RAG status (on track, at risk, off track), and the one decision it needs from me.
2At the top, tally how many are off track, at risk and on track, colour-coded.
3List the initiatives, worst status first, each with a coloured edge, the owner, and the decision needed called out.
4Let me delete an initiative.
5Save everything in the browser so my portfolio is still there next time.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a headcount plan as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I add a planned hire with a role, an annual salary, the quarter they start, and the business milestone they're tied to (like 'Series B' or 'US launch').
2Lay out the next eight quarters automatically starting from today, and offer them as the choices for when a hire starts.
3Show the plan grouped by milestone, ordered by when it starts, with each hire's role, start quarter and salary — and a yearly cost subtotal for each milestone.
4At the top, show the total annual salary run-rate once everyone's on board, how many hires are planned, and the headcount by the end.
5Draw a chart on a canvas of the annual run-rate stepping up quarter by quarter as each hire starts.
6Let me delete a hire, and remember the whole plan in the browser between visits.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build an OKR tracker as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I add an objective, which is a short qualitative headline for the quarter.
2Under each objective, let me add key results, each with a starting number, a target, and a current value.
3For each key result, work out a score from 0 to 1 for how far the current value has moved from the start towards the target, and show it as a progress bar.
4Average the key results into a score for each objective, and average the objectives into one overall score for the quarter, shown as a dial at the top.
5Colour a score green from about 0.7 up, amber below, red near zero — and add a short line reminding me that 0.7 is a good OKR result, not a miss.
6Add a friendly, collapsible guide at the top that explains, for someone new to OKRs, what an objective is, what a key result is, and how the scoring works.
7Let me update a current value and watch every score recalculate live, delete an objective or a key result, and remember everything in the browser between visits.
8Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a reading-list app as a single self-contained HTML file — all CSS and JavaScript inline, no external libraries. I type a book title, hit add, and it appears in a list.
2Add a checkbox to mark a book as read, and cross it out when ticked.
3Let me delete a book.
4Show a count at the top: total books and how many I've read.
5Save everything in the browser so it's still there when I reopen the page.
6Tidy the look — cards, a clear heading, clean spacing.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a habit tracker as one self-contained HTML file, everything inline, no libraries. I add a habit by name, and it shows the last 7 days as tappable squares.
2Tapping a day toggles the habit done/not-done for that day.
3Work out the current streak — consecutive days up to today — and show it with a flame.
4Let me remove a habit.
5Save it all between visits, and tidy up the styling.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a golf handicap tracker as a single self-contained HTML file, inline only. I log a round with course name, my score, and the course rating.
2For each round work out a differential = score minus rating, and show rounds in a table.
3Calculate my handicap index as the average of my best 8 differentials, shown big at the top.
4Let me delete a round.
5Save my rounds so they persist, and put the handicap in a green header card.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a simple metrics dashboard as one self-contained HTML file, all inline, no chart libraries. I type a label and a number and add it as a data point.
2Draw a line chart of the values on a canvas that updates as I add points.
3Show three KPI cards: latest, average and peak.
4List the data points underneath and let me delete any of them.
5Save the data so the chart's still there when I come back.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a savings-goal tracker as a single self-contained HTML file, inline only. I set a target amount and a name for the goal.
2I log deposits; show the total saved as a percentage and fill a vertical thermometer.
3Show how much is left to reach the goal, and a 'reached it' message when I get there.
4List my deposits and let me delete one.
5Remember the goal and deposits between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a mortgage overpayment calculator as one self-contained HTML file, all inline. Inputs: balance, interest rate, years remaining, and an extra monthly amount.
2Show the normal monthly payment and the payment with my overpayment.
3Work out how much time and how much total interest the overpayment saves, and show both.
4Update everything live as I change any input.
5Remember my last set of inputs.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a 'should I delegate this?' tool as a single self-contained HTML file, inline only. Ask five yes / somewhat / no questions about a task.
2Score the answers and give a clear verdict: delegate, delegate with guardrails, or keep it.
3Show a short reason with the verdict, colour-coded green / amber / grey.
4Let me type the task name at the top.
5Remember my answers between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a Saturday family logistics planner as one self-contained HTML file, all inline. I add an entry: time, which kid, where they're going, and who's driving.
2Show the entries as a list sorted by time.
3Let me delete an entry.
4Make each entry clear — big time on the left, kid → place, and a driver tag.
5Save it all so it persists between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a holiday packing list as a single self-contained HTML file, inline only. I add items, each with a category (clothes, toiletries, tech, documents…).
2Group items by category, each with a tick box, and cross off when packed.
3Show a progress bar of how much is packed.
4Add an 'uncheck all' button so I can reuse the same list next trip.
5Save the list and tick state between visits.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a times-tables quiz as one self-contained HTML file, everything inline. Ask 10 random questions (2–12), I type each answer, tell me right or wrong, score out of 10.
2Let me choose which table to practise, or 'mixed'.
3Show the question number (e.g. 3/10) and move to the next question after each answer.
4At the end, show my score and a well-done message.
5Save my best score and show it next time. Make it big and friendly for a child, with clear green/red feedback.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a memory card-matching game as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. A 4×4 grid of face-down cards, 8 pairs of emoji. I click two; if they match they stay up, if not they flip back.
2Add a 'New game' button that reshuffles, and a move counter at the top.
3When all pairs are matched, show a 'Solved in X moves' message.
4Remember my best (lowest) score between visits and show it.
5Tidy the look — rounded tiles, matched pairs turn green.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a day-rate calculator as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. Inputs: day rate, days billed per week, weeks worked per year, and a percentage to set aside for tax, pension and expenses.
2Work out and show the annual gross: rate times days per week times weeks per year.
3Also show monthly gross, annual take-home after the set-aside percentage, and take-home per month.
4Update every figure live as I change any input.
5Remember my last set of inputs in the browser so they're there next time.
6Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a weighted decision matrix as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. Let me add a list of criteria, each with a weight from 1 to 5, and a list of options I'm choosing between.
2Make a table with the options as rows and the criteria as columns, and let me score each option against each criterion from 0 to 10.
3For each option, work out a weighted score — the scores times the weights, divided by the total weight — and show it.
4Rank the options by weighted score and clearly mark the winner.
5Let me delete any criterion or option, and let me title what I'm deciding at the top.
6Remember the whole matrix in the browser so it's still there when I come back.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a 'where did my week go?' tool as a single self-contained HTML file — all CSS and JavaScript inline, no chart libraries. I type a category and a number of hours and add it.
2Add up the hours by category and draw a donut chart of the split on a canvas, with the total hours in the middle.
3Show a legend beside the chart: each category with its hours and its percentage of the week.
4Underneath, write a one-line insight naming my biggest slice and its percentage.
5List the entries and let me delete any of them.
6Save everything in the browser so my week is still there when I come back.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a compound growth calculator as a single self-contained HTML file — all CSS and JavaScript inline, no chart libraries. Inputs: a starting amount, an amount added each month, an annual return percentage, and a number of years.
2Compound it monthly and show the final value after the chosen years.
3Also show the total I put in and the growth on top of that.
4Draw a chart on a canvas of the balance growing year by year, with a second line for the money I actually contributed.
5Update the figures and the chart live as I change any input.
6Remember my inputs in the browser between visits.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a workout log as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. I log a set with an exercise name, a weight in kg and a number of reps, and it stamps today's date.
2Show my history newest first, grouped by day, each line reading exercise, weight and reps.
3Work out my personal best weight for each exercise and show them in a little summary at the top.
4When a set is my heaviest ever for that exercise, mark it with a PB badge.
5Let me delete a set.
6Save everything in the browser so my log is still there next time.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a Pomodoro focus timer as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. A 25-minute countdown with the time big in the middle of a circular ring, and Start, Pause and Reset.
2As the time counts down, deplete the ring so it visually empties.
3When a focus session finishes, count it and switch to a 5-minute break, then back to focus.
4Let me pick 15, 25 or 50 minutes for a focus session.
5Keep a count of how many focus sessions I've completed today, and reset it each new day.
6Save today's count in the browser so it survives a refresh.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Build a flashcards app as a single self-contained HTML file — all CSS and JavaScript inline, no libraries. Let me add cards with a front (a question or term) and a back (the answer), and list them.
2Give me a study area that shows one card's front; when I click it, it flips over to reveal the back.
3Under the card, add two buttons: 'Got it' and 'Review again'.
4Shuffle the cards into a round. 'Got it' removes a card from the round; 'Review again' sends it to the back to come round again. Show how many are left and how many I've learned.
5When the round is finished, congratulate me and let me study again.
6Let me delete a card, and save my deck in the browser so it's there next time.
7Now make it beautiful, without changing how it works: pair a Fraunces serif heading with Inter body text, move to a warm palette — forest green, cream background, a terracotta accent — and add soft rounded cards, large diffuse shadows and pill-shaped buttons.
1Same single-file, all-inline rule as everything else — this one just takes more refinements. Build a recipe book as a self-contained HTML file. Each recipe has a title, cuisine, cook time, ingredients and a method. Show them as cards in a grid.
2Add a search box and cuisine filters at the top that narrow the cards live as I type or click.
3Clicking a card opens a full detail view — photo, ingredients and steps — in a panel I can close.
4Give me a form to add my own recipe, with a live preview of the card as I fill it in.
5Save everything I add in the browser so my recipes are still there next visit.
6Now make it feel like a real family cookbook — warm colours, a proper title, a little crest. Keep going until it looks like something you'd be proud to share.