> ## Documentation Index
> Fetch the complete documentation index at: https://calcs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Quick Start Guide: Pythagoras Theorem Calculator
> Build a Pythagorean theorem calculator in Calcs Builder in under 5 minutes
Build your first Calcs Builder template in about **5 minutes**. You'll create a simple (but complete) calculator based on the **Pythagorean theorem**—a great way to learn the core workflow: **inputs → equations → outputs**.
**Prefer video?** Watch the tutorial, then follow the written steps for the most important details on **RefID**, **Symbol**, and **units**.
***
## What you'll build
A calculator that takes the two short sides of a right triangle (**a** and **b**) and returns the hypotenuse (**c**) using:
`c = sqrt(a^2 + b^2)`
By the end, you'll have a published calculator you can **preview** and **share** with your team.
***
## Video walkthrough
Video transcript
Start by creating your first custom calculator. Click **Create a new calculator** to begin. Name your calculator **Pythagorean theorem** and set a **calculator code**. In Calcs Builder, the code is the unique identifier used across the platform and in shareable links.
Next, build your calculator in sections such as **Inputs**, **Calculations**, and **Outputs**. Add an **Equation** widget in the calculation section and define the Pythagorean relationship.
Create an input section with two **Input** widgets for the short sides (**a** and **b**). Then create an output section and add an **Equation** widget to compute the hypotenuse (**c**) using the square root of the computed expression.
Finally, click **Preview** and test the calculator by entering values for **a** and **b**. Your formula will compute live and display the resulting value of **c**.
***
## Before you start
* A **Calcs.com account** with access to **Calcs Builder**
* Any modern browser (Chrome, Firefox, Safari, Edge)
This guide uses **meters (m)** as an example unit. You can choose different units or leave units blank—just keep them consistent.
***
## Key concept: RefID vs Symbol
Calcs Builder uses **two identifiers** for each widget:
* **RefID**: the internal name used in equations (keep it simple: letters/numbers/underscores).
* **Symbol**: what shows up in displayed math (can use richer notation for readability).
**Rule of thumb:** Write equations using **RefID**, and make things look nice using **Symbol**.
**Current workaround required:** In the current version of Calcs Builder you must set **both** RefID and Symbol for every widget.\
For example, if you want the equation display to show `c²`, keep the RefID as `c` (so other widgets can reference it), and set the Symbol to `c` (or `c` with your preferred formatting). Don't use operator-like text (such as `c^2`) as a RefID.
***
## Step 1: Open Calcs Builder
Go to [app.calcs.com](https://app.calcs.com) and log in.
In the main navigation, select **Calculator Builder**.
Click **Create a new calculator**.
***
## Step 2: Name your calculator and create a section
At the top of the editor:
* **Template Name**: `Pythagoras Calculator`
* **Description**: *Calculate the hypotenuse of a right triangle using the Pythagorean theorem*
Choose a short, unique **calculator code** such as `pythagoras`. This is used in URLs and sharing.
Create a section (for example **Triangle Dimensions**) to keep your inputs and equations organized.
***
## Step 3: Add inputs for sides a and b
Add two Input widgets—these are the values users will enter.
Click **Add Widget** → **Input**, then configure:
* **Label**: `Side a`
* **RefID**: `a`
* **Symbol**: `a`
* **Units**: `m` (or leave blank)
* **Default value**: `3`
Add another **Input** widget with:
* **Label**: `Side b`
* **RefID**: `b`
* **Symbol**: `b`
* **Units**: `m` (or leave blank)
* **Default value**: `4`
If you use units, keep both inputs in the same unit system (e.g., both in `m`). Mixed units can lead to confusing results.
***
## Step 4: Add the hypotenuse equation
Now add an Equation widget that computes **c**.
Click **Add Widget** → **Equation** (in the same section or a new one).
Set:
* **Label**: `Hypotenuse c`
* **RefID**: `c`
* **Symbol**: `c`
* **Units**: `m` (or leave blank)
In the formula editor, enter:
```
sqrt(a^2 + b^2)
```
If you see errors, confirm that your equation references **RefID** values exactly (`a` and `b`) and that the RefIDs contain no special characters.
***
## Step 5: Preview and test
Click **Preview** (top right) to see what users will see.
Enter **a = 3** and **b = 4**. You should get **c = 5** (the classic 3–4–5 triangle).
Try **a = 5** and **b = 12**. You should get **c = 13**.
**Sanity check:** If you're using units and see unexpected results, ensure inputs are lengths (e.g., `m`) and the output is also a length (not `m²`).
***
## Step 6: Save and publish
Changes save automatically as you edit. Drafts are only visible to you until published.
Click **Save/Publish** to share with your team or use it in real projects. Add a short note so others understand what changed.
Once published, you can share the calculator link (based on the calculator code) so teammates can use the tool without editing the template.
***
## You're done 🎉
You built a complete Calcs Builder template using the standard workflow:
| Phase | What you did |
| ------------ | ----------------------------------------------- |
| **Inputs** | Collected user data (sides **a** and **b**) |
| **Equation** | Computed the hypotenuse using `sqrt(a^2 + b^2)` |
| **Output** | Displayed the result (**c**) in the calculator |
***
## What to try next
Learn what each widget type does and when to use it.
Follow a second guided build (length × width).
See practical patterns used in real templates.
Explore advanced options like reports and template settings.
Ideas to extend this template:
* Add **validation** (e.g., require positive values)
* Add a **diagram** showing where *a*, *b*, and *c* are measured
* Use **lookup tables** for standard values (materials, coefficients, etc.)
* Configure **reports** for export/print-ready outputs
***
## Need help?
* [Troubleshooting](/calcs_builder/common_errors)
* [Best Practices](/calcs_builder/best_practices)
* **Support** — [support@calcs.com](mailto:support@calcs.com)