Building a Unit Converter App

Part 1: Assembling the Converter Interface

Let's begin by setting up the user interface. We will use the same clean, two-column layout that has served us well so far. This consistency not only looks professional but also makes your building process more efficient.

On a new page, please configure your standard responsive two-column layout.

• In the Group - Input Column (left side):
  1. Add an Input element where the user will enter the number they want to convert. In its property editor, set the Content format to Decimal to ensure it only accepts numbers.
  2. Add a Dropdown element. This will be for selecting the unit to convert from.
  3. Add a second Dropdown element for selecting the unit to convert to.
• In the Group - Output Column (right side):
  1. Add a Text element. This is where the calculated result will appear. Give it a placeholder like "Result".

Your page should now have a logical flow: a numerical input, two dropdowns for unit selection, and a space for the output.

Part 2: Configuring the Inputs

Before we get to the logic, we need to populate our input elements with the right options.

First, for the Input element, you've already set the Content format to Decimal. This is a small but important step that helps validate user input.

Next, we need to give the user choices in the Dropdown elements. For this example, let's build a simple weight converter for Kilograms (kg) and Pounds (lb).

Now, apply what you've learned. For both of your dropdown elements:

1. Set the Choices style to Static choices.
2. In the Choices box, type Kilograms and press Enter, then type Pounds on the next line.
3. Give each a descriptive Placeholder, such as "From Unit" and "To Unit".

Part 3: The Core Logic with Conditionals

This is where your converter comes to life. The core challenge is this: the calculation we perform depends entirely on the combination of units selected in the two dropdowns.

• If converting from Kilograms to Pounds, we multiply by 2.20462.
• If converting from Pounds to Kilograms, we divide by 2.20462.
• If the units are the same (e.g., Kilograms to Kilograms), we do nothing; the output is the same as the input.

Bubble's Conditional Logic system is designed for precisely this kind of scenario. Instead of using a workflow, we can define a set of rules directly on our output Text element. Each rule will check the state of our dropdowns and change the text content accordingly.

Select your output Text element and click on the Conditional tab in the property editor. This is your command center for defining rules.

Let's build our first rule for converting Kilograms to Pounds:

1. Click + Define another condition.
2. For the When expression, build the following: Dropdown From's value is "Kilograms" and Dropdown To's value is "Pounds".
3. From the Select a property to change when true dropdown, choose Text.
4. In the Text box that appears, build this dynamic expression: Input Value's value * 2.20462.
5. To make the output cleaner, click :formatted as after the expression. Choose Number for format, set Decimal places to 2, and select a Decimal separator.

You've just created your first piece of conditional logic! Now, repeat this process to create the other two necessary rules:

• Condition 2: Pounds to Kilograms

  • When: Dropdown From's value is "Pounds" and Dropdown To's value is "Kilograms"
  • Property: Text
  • Value: Input Value's value / 2.20462 :formatted as...

• Condition 3: Matching Units

  • When: Dropdown From's value is Dropdown To's value
  • Property: Text
  • Value: Input Value's value :formatted as...

Finally, go to the Appearance tab of the output Text element and set its default Content to Input Value's value :formatted as.... This will handle the initial state and any case where the units are the same, even before a condition is met.

Preview your app. You should now have a working unit converter that responds instantly as you change the dropdown values.

A Note on Strategy: Conditionals vs. Custom States

For this tool, applying conditionals directly to the output element is simple and efficient. However, as you build more complex tools, you might find another pattern useful.

As the forum post suggests, if you needed to display the converted value in multiple places on the page, it would be more efficient to perform the calculation once with a workflow, save the result to a custom state (like we did in the last lesson), and then have all the text elements reference that single state.

For our current tool, where the result is only shown in one place, the direct conditional approach is perfect. Knowing both patterns gives you more flexibility as a developer.

Your Task: Build a Length Converter (15 minutes)

Now it's your turn to apply these concepts from scratch. You will build a simple length converter for Meters and Feet.

The conversion factors are:

• 1 Meter = 3.28084 Feet
• 1 Foot = 0.3048 Meters

Follow these steps:

1. UI Setup: On a new page, create your standard two-column layout. Add an Input (format: Decimal), two Dropdowns, and a Text element for the output.
2. Populate Dropdowns: Configure both dropdowns with Static choices: "Meters" and "Feet".
3. Set Default Text: Set the Appearance Content of the output Text element to be the Input's value, formatted to 2-4 decimal places.
4. Create Conditional Logic:
   • Go to the Conditional tab of the output Text element.
   • Add a condition for when the user converts Meters to Feet. Set the Text property to the correct multiplication formula (Input's value * 3.28084).
   • Add a second condition for when the user converts Feet to Meters. Set the Text property to the correct division or multiplication formula.
   • Remember to use the :formatted as operator on your results for a clean display.
5. Test: Preview your page and test all combinations to ensure your converter is working correctly.

Conclusion

Congratulations! You've successfully built a dynamic unit converter and added conditional logic to your Bubble skillset. This is a fundamental technique for creating apps that respond intelligently to user choices.

Here are the key takeaways:

• Dropdowns are essential for offering users a fixed set of choices.
• Conditional Logic allows you to change any property of an element (like its text, color, or visibility) based on rules you define.
• You can build complex logic by combining multiple conditions that check the values of different inputs.
• For simple calculators, applying conditionals directly to the output is a clean and effective method.

In our next lesson, we will tackle a different kind of conversion tool: a color code converter for HEX and RGB values. This will challenge you to think about how to parse and manipulate text in new ways, further expanding your capabilities as a no-code developer.