DEV Community

Waqas Ashfaq
Waqas Ashfaq

Posted on

How I Built a Step-by-Step Math Calculator to Help Kids Actually Learn (Not Just Get Answers)

#webdev

The Problem That Started It All

Most online calculators are black boxes. A child types 24 ÷ 6, hits enter, and gets 4. But they learn nothing about how to get there.

As someone who cares about education, this bugged me. Kids don't need answers handed to them — they need to understand the process. So I decided to build La Calculadora Alicia, an educational tool that walks children through math problems step by step, the same way a patient teacher would.

Here's how I built it, the challenges I hit, and the tech decisions I made along the way.

The Core Idea: Show the Work, Not Just the Result

The whole product philosophy came down to one principle:

A calculator for learning should reveal every step, not hide them.

So instead of returning a single number, the app needed to:

  1. Parse the input expression
  2. Break it into logical solving steps
  3. Render each step with a clear, kid-friendly explanation

Tech Stack

I kept it lightweight and accessible since the target users are children (and often on school devices):

  • Frontend: HTML5, CSS3, and vanilla JavaScript (fast load, no heavy framework overhead)
  • Logic layer: JavaScript expression parser
  • Styling: Responsive, high-contrast, large touch targets for small hands
  • Hosting: Static hosting for speed and reliability

Step 1: Parsing the Math Expression

The first challenge was turning a string like "12 + 8 × 3" into something the app could solve while respecting order of operations (PEMDAS/BODMAS).

A naive approach:

// DON'T do this in production — eval is unsafe
const result = eval("12 + 8 * 3"); // 36
Enter fullscreen mode Exit fullscreen mode

eval() works but is a security risk and gives you zero control over showing steps. So I built a small tokenizer instead:

function tokenize(expression) {
  const regex = /(\d+\.?\d*)|([+\-*/()])/g;
  return expression.match(regex);
}

console.log(tokenize("12 + 8 * 3"));
// ["12", "+", "8", "*", "3"]
Enter fullscreen mode Exit fullscreen mode

Step 2: Solving It Step by Step

Instead of computing the answer all at once, I processed operations by precedence and recorded each stage:

function solveStepByStep(tokens) {
  const steps = [];
  let expression = [...tokens];

  // Handle multiplication & division first
  for (let i = 0; i < expression.length; i++) {
    if (expression[i] === "*" || expression[i] === "/") {
      const left = parseFloat(expression[i - 1]);
      const right = parseFloat(expression[i + 1]);
      const result = expression[i] === "*" ? left * right : left / right;

      steps.push(`Step: ${left} ${expression[i]} ${right} = ${result}`);
      expression.splice(i - 1, 3, result.toString());
      i = -1; // restart scan
    }
  }

  // Then addition & subtraction
  // ... same pattern

  return steps;
}
Enter fullscreen mode Exit fullscreen mode

Now the child sees:

Step 1: 8 × 3 = 24
Step 2: 12 + 24 = 36
Enter fullscreen mode Exit fullscreen mode

That's the magic moment — they see the reasoning, not just the result. You can try the full interactive version live at la-calculadoraalicia.com.

Step 3: Making It Kid-Friendly (The Hard Part)

Writing the logic was easy. Designing for children was the real challenge:

  • 🎨 Big, colorful buttons — small motor skills matter
  • 🔤 Simple language in explanations ("First we multiply...")
  • 📱 Mobile & tablet responsive — most kids use tablets
  • ♿ High contrast + large fonts for accessibility
  • 🚫 No ads, no clutter — zero distractions while learning 
button {
  font-size: 1.5rem;
  padding: 1.2rem;
  border-radius: 16px;
  min-width: 64px;
  min-height: 64px; /* WCAG touch target friendly */
}
Enter fullscreen mode Exit fullscreen mode

Lessons Learned

  1. Simplicity beats cleverness — vanilla JS was the right call for load speed on low-end school devices.
  2. UX for kids ≠ UX for adults — everything needs to be bigger, clearer, and more forgiving.
  3. Explaining the "why" is harder than computing the answer — most dev effort went into communication, not math.
  4. Accessibility is non-negotiable for an educational product.

What's Next

I'm planning to add:

  • Fractions and decimals with visual breakdowns
  • A "practice mode" with gentle hints
  • Multi-language support (starting with Spanish 🇪🇸)

If you're building educational tools, I'd love to hear how you approach explaining concepts vs. just delivering results.

You can check out the live project here 👉 La Calculadora Alicia

Have you built any tools for education? What tech decisions did you make? Let me know in the comments!

Top comments (0)