Step-by-Step Expression Calculator

Solve arithmetic expressions with parentheses using order of operations and view the calculation steps.

Open tool Back to tools
// about

About this Tool

Enter a normal arithmetic expression such as (379*11900)+(75*20000). The calculator follows multiplication and division before addition and subtraction, then displays each reduction.

How to use it

  1. Type numbers with +, -, *, /, and parentheses.
  2. Select Calculate expression.
  3. Review each simplification line and the final result.

Why people use this tool

  • Handles long formulas and nested parentheses more clearly than a basic calculator.
  • Shows intermediate expressions so you can audit the math.
  • Accepts four operations without executing arbitrary code.
Guides · Calculation · 6 min read

Percentage Calculations Explained: Percent Change, Percentage Points, Stacked Discounts and VAT

How much did sales grow? What is the sale price? Did the interest rate rise by a percent or a percentage point? Percentages look simple, but choosing the wrong base changes the answer.

A percentage is a ratio expressed per hundred. Every percentage calculation comes down to choosing the right base (the denominator), and most everyday cases fit one of these four.

① What is B% of A?        A × B ÷ 100          (15% of 80,000 = 12,000)
② A is what % of B?       A ÷ B × 100          (12 ÷ 48 × 100 = 25%)
③ Change from A to B      (B − A) ÷ A × 100    (200 → 250 = +25%)
④ A increased/decreased   A × (1 ± B ÷ 100)    (50,000 + 20% = 60,000)
The four basic percentage formulas, percent versus percentage points, why 20% off plus 10% off is not 30%, and how to back out tax from a gross price.
Read guide →
Build it with AI

Build this tool yourself with AI

Want your own version of this tool? Copy the work-order prompt into an AI chat, or save the skill file for an AI coding agent. Both describe the features, edge cases and test cases we used when building it.

AI work-order prompt

Paste it as-is into an AI chat such as Claude, ChatGPT or Gemini.

You are an experienced full-stack web developer. Build a web tool called "Step-by-Step Expression Calculator" that meets the requirements below.

## Goal

Build a calculator that evaluates expressions with arithmetic and parentheses and shows each intermediate step.

## Core features

- +, −, ×, ÷, parentheses and decimals
- Step-by-step working that follows operator precedence
- Accept thousands separators
- Copy result
- Recent history

## Inputs

- An expression string

## Outputs

- Final result
- List of intermediate results

## Edge cases and handling rules

- Implement a parser; never use eval
- Report mismatched parentheses with their position
- Handle division by zero
- Keep precision for large numbers and decimals (decimal arithmetic)

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- (379*11900)+(75*20000) = 6010100 with steps 4510100 and 1500000
- 2+3*4 = 14
- 1/0 shows an error

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

Skill (SKILL.md)

Save it as .claude/skills/build-expression-calculator/SKILL.md for AI coding agents such as Claude Code to reuse whenever you build or change this tool.

---
name: build-expression-calculator
description: Use when building or changing a Step-by-Step Expression Calculator tool. Build a calculator that evaluates expressions with arithmetic and parentheses and shows each intermediate step.
---

# Build: Step-by-Step Expression Calculator

## Goal

Build a calculator that evaluates expressions with arithmetic and parentheses and shows each intermediate step.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- +, −, ×, ÷, parentheses and decimals
- Step-by-step working that follows operator precedence
- Accept thousands separators
- Copy result
- Recent history

## Inputs

- An expression string

## Outputs

- Final result
- List of intermediate results

## Rules

- Implement a parser; never use eval
- Report mismatched parentheses with their position
- Handle division by zero
- Keep precision for large numbers and decimals (decimal arithmetic)
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] (379*11900)+(75*20000) = 6010100 with steps 4510100 and 1500000
- [ ] 2+3*4 = 14
- [ ] 1/0 shows an error

Tips for working with AI

  • Tell the AI your stack (for example React, Vue or plain HTML) on the first line so the code matches your project.
  • Ask it to run the listed test cases and show the results before you accept the code.
  • Never paste real secrets, customer data or API keys into the prompt; use sample values instead.