Practical AI
No. 4.02Track 4 · Build small tools

Build a working calculator page in one file

Lesson 2 of 55 min read1 task · 3 questions

One prompt. One HTML file. Open it in your browser.

The idea

A web page can be a single file. You save the text as emi.html and open it on your phone or computer. No server, no account, no cost.

Ask the AI for one file with HTML, CSS and JavaScript together. Ask for plain code with no external libraries. This keeps it small and easy to check.

Then test. Type the exact numbers whose answer you know. If the result is wrong, tell the AI the numbers you typed, the answer you got and the answer you expected.

Your task

Build a loan EMI calculator

Paste the prompt. Save the code the AI gives you into a file named emi.html. Open the file in a browser.

Your slip: copy-paste prompt
Write a single-file HTML page: a loan EMI calculator.

Inputs: loan amount in rupees, yearly interest rate in percent, number of months.
Outputs: monthly EMI and total interest, shown in Indian number format (for example 23,072).
Rules:
- One file with HTML, CSS and JavaScript. No libraries, no internet calls.
- Big input boxes and a big button that work well on a phone.
- Use the standard formula: EMI = P x r x (1+r)^n / ((1+r)^n - 1), where r is the monthly rate.
- Handle a 0 percent rate without an error.
- Give me only the code.

What you should get

A real example of a good result. Your wording will differ a little. The shape and the facts should match.

Printed resultExample

<!doctype html><html lang="en"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EMI Calculator</title>
<style>body{font:18px system-ui;max-width:420px;margin:auto;padding:16px}input,button{width:100%;font-size:18px;padding:12px;margin:6px 0}</style>
<h1>EMI Calculator</h1>
<label>Loan amount (Rs)<input id="p" type="number" value="500000"></label>
<label>Yearly interest (%)<input id="r" type="number" value="10" step="0.1"></label>
<label>Months<input id="n" type="number" value="24"></label>
<button onclick="go()">Calculate</button>
<p id="out"></p>
<script>
function go(){
 const P=+document.getElementById('p').value;
 const m=+document.getElementById('r').value/1200;
 const n=+document.getElementById('n').value;
 const emi=m===0?P/n:P*m*Math.pow(1+m,n)/(Math.pow(1+m,n)-1);
 const f=x=>x.toLocaleString('en-IN',{maximumFractionDigits:0});
 document.getElementById('out').textContent='Monthly EMI: Rs '+f(emi)+' | Total interest: Rs '+f(emi*n-P);
}
</script>

Test it: Rs 500,000 at 10 percent for 24 months should show EMI Rs 23,072 and total interest Rs 53,739.

Check yourself

Q1 What is the benefit of a single-file page?

Q2 The tool shows a wrong answer. What do you tell the AI?

Q3 Why ask for no external libraries?

Finished?

Stamp this ticket. Your pass on the home page gets punched.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5