What You'll Build

A dynamic form that performs mathematical calculations in real-time. You'll create a grade calculator that sums test scores, calculates averages, and demonstrates price × quantity calculations.

What You'll Learn

How to sum multiple number fields automatically
Calculating percentages and averages
Simple multiplication (price × quantity)
Formatting calculated results with proper precision

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our calculation form step by step.

Step 2: Basic Number Fields

First, let's add the number fields that we'll use for our calculations. We'll create three test score fields with default values.

💡 Tip:

These integer fields have min/max constraints (0-100) and default values. As users change these values, our calculated results will update automatically.

Step 3: Sum of Multiple Fields

Now let's create our first calculation! We'll add up all three test scores to get a total score.

💡 Tip:

The computedValue property performs the sum calculation. Notice how it uses the || 0 fallback to handle empty values safely.

Step 4: Calculating Percentages

Let's add an average calculation that shows the percentage score. This demonstrates division and formatting.

💡 Tip:

The average calculation divides the total by 3 and uses toFixed(1) to format the result with one decimal place. Try changing the scores to see the average update!

Step 5: Simple Multiplication (Price × Quantity)

Finally, let's add a price and quantity calculation that demonstrates multiplication. This shows how to work with different number field types.

💡 Tip:

This example uses a money field for price and an integer field for quantity. The calculation multiplies them together and formats the result as currency with toFixed(2).

Try It Yourself

Challenge 1: Add a calculation that shows the highest score among the three tests
Challenge 2: Create a calculation that shows the difference between the highest and lowest scores
Challenge 3: Add a discount calculation (e.g., 10% off the total cost)

Next Steps

Excellent! You've learned how to perform basic calculations with number fields. Ready to explore more advanced mathematical operations?

Continue to Conditional Visibility Tutorial

Other learning paths:

Learn about conditional calculations
Master complex mathematical formulas
Create dynamic pricing calculators