Your first AI-assisted prototype: a calculator on one screen

How much time do thirty tasks take?

Let’s calculate: 30 tasks a week at 12 minutes each comes to six hours. There is our first AI-assisted prototype. Two fields, a button and a result. The user enters the task count and time per task; the program multiplies them and divides by 60.

The model helps write the code and arrange the screen. The calculator itself performs ordinary arithmetic; it does not predict savings from AI. It also leaves out breaks, parallel work and differences between tasks. Put that explanation below the result so six hours does not start to mean more than we calculated.

You can narrow another idea in the same way: compare two options or help someone find a guide. One concrete action gives us something to build. A general “page explaining our offer” makes it harder to decide where to start.

Colors can wait. What happens to an empty field?

Let’s agree on the rules first. Zero is accepted; negative numbers are not. An empty field should produce a message, not a calculation without explanation. Choose a place for the result too, so people know where to look after clicking.

We do not need login, payments or data storage for this exercise. If another idea requires you to show one of them, clearly label a non-working element as a demonstration. Here, we are asking only for a local calculator. The prompt below keeps it within those boundaries.

Build a single-screen calculator in HTML, CSS and JavaScript.
Fields: number of tasks per week and minutes per task.
Result: number of tasks × minutes / 60, labeled hours per week.
Reject negative and empty values. Zero is valid.
Add visible field labels, error messages and a Calculate button.
Everything must work with a keyboard and fit on a phone.
No network connections, libraries or invented business recommendations.

Let’s see what happens with zero

First, enter 30 tasks at 12 minutes: the answer must be six hours. Then try zero and one more example you calculated manually. Leave a field blank, enter a negative number and try a very long one. Bad input needs a message explaining what to fix, not a number pretending to be a valid result.

Tab through the fields and run the calculation without a mouse. Can you see the active field? On a phone and with enlarged text, inspect the result and messages. They tell the user whether the calculation worked. If they run off the screen, fix the layout.

Now hand the screen to someone else

Ask someone: “Find out how many hours 30 tasks of 12 minutes each take.” Give them a moment without explaining the buttons. Where they hesitate can tell you a lot about the screen. After our explanation, the same problem might remain invisible.

Choose one most important correction. Perhaps a field needs a better name, or the unit belongs closer to the result. You do not have to add features immediately. Keep the code and assumptions even if the trial makes the idea simpler still. Knowing why the current layout exists will help with the next version.