Your First AI Coding Project: Build a Calculator App

This tutorial walks you through building a fully functional calculator app using Cursor. You'll type prompts, the AI writes code, and by the end you'll have a working calculator you built yourself. No coding experience needed — just follow along and type what's written below.

Step 1: Set Up Your Project

Download and install Cursor from cursor.com. Open it up, and create a new folder on your desktop called 'calculator-app'. Open that folder in Cursor. You should see an empty project. Now open the Composer panel (Cmd+I on Mac, Ctrl+I on Windows) — this is where you'll talk to the AI.

Step 2: Generate the Basic Calculator

Type this prompt into the Composer:

Create a web calculator app in a single HTML file. Include:
- A display area at the top showing the current number
- Buttons for digits 0-9
- Buttons for +, -, *, / operations
- An equals button and a clear button
- Style it to look like a real calculator with a dark background, rounded buttons, and a grid layout
- Make it fully functional with JavaScript

Cursor will generate an index.html file with everything included. Click 'Accept' to save the file. Now right-click the file and choose 'Open in Browser' (or just double-click the HTML file in your file explorer). You should see a working calculator.

Step 3: Test It and Find Problems

Try some calculations: 5 + 3, 10 * 4, 100 / 5. Try edge cases: what happens if you press divide and then equals? What if you press multiple operators in a row? What if you try to divide by zero? Write down anything that seems broken or weird.

Step 4: Fix the Issues

Now tell the AI what you found. Here's an example:

I found some issues with the calculator:
1. Pressing multiple operators in a row causes wrong results. It should replace the previous operator instead.
2. Dividing by zero shows 'Infinity' — it should show 'Error' instead.
3. After pressing equals, if I type a new number it should start a new calculation, not append to the result.
Please fix all three issues.

The AI will update the code to handle these edge cases. Accept the changes, refresh your browser, and test again.

Step 5: Add Features

Now let's make it more interesting. Try this prompt:

Add these features to the calculator:
1. A percentage button (%) that converts the current number to a percentage
2. A +/- button that toggles the number between positive and negative
3. A decimal point button
4. Show the full calculation expression in a smaller font above the main display
5. Add a subtle press animation when buttons are clicked

Step 6: Polish the Design

Let's make it look professional:

Improve the calculator's visual design:
- Use a color scheme similar to the iPhone calculator (dark gray background, orange for operator buttons, light gray for number buttons)
- Add smooth transitions on button hover
- Make the display font larger and right-aligned
- Add a subtle gradient to the background
- Make it responsive so it looks good on mobile

Step 7: Add Keyboard Support

Add keyboard support to the calculator. Number keys should type digits, +, -, *, / should set operators, Enter should equal, Escape should clear, and Backspace should delete the last digit. Highlight the corresponding on-screen button when a key is pressed.

What to Do When the AI Makes Mistakes

If the AI generates code that doesn't work, don't just say 'it doesn't work.' Instead, describe exactly what happens versus what should happen:

When I press the keyboard number keys, the digits appear twice in the display. Each keypress should only add one digit. I think the event listener might be firing twice.

What You Just Learned

You built a functional, polished calculator app without writing any code. But more importantly, you practiced the core AI coding workflow: generate, test, describe problems, iterate, add features, polish. This exact process works for any project. The calculator was just the vehicle — the skill you built is knowing how to direct an AI through a real software project.

Next steps: try building a tip calculator, a unit converter, or a simple to-do list. Each new project reinforces the same workflow and teaches you to describe increasingly complex ideas.