In this lesson, we’re going to dive a bit deeper into something we’ve touched on before but only superficially — and that’s operators. Once you understand operators, they unlock a huge amount of power in what you can build in Bubble.

Specifically, in our app, we’re going to learn how to subtract one date from another to calculate the number of days in a trip, and also use some basic math operators to calculate the cost per day for a trip.

First, we need to acknowledge that our end date and cost fields are both optional. So we have to handle scenarios where users haven’t filled these out.

Let’s start with the cost group since it already exists. We want it so that if the trip doesn’t have a cost (meaning the cost field is empty), we hide that group. Otherwise, we show it.

Try adding this yourself — it uses concepts we’ve already covered. If you get stuck, we’ll go through it here together.

You might guess correctly that we’ll use a conditional statement for this.

Go to the conditional tab on the cost group. The condition is simply whether the trip’s cost field exists or not. We have operators called “is empty” and “is not empty.” We’ll use “is not empty” to mean that a cost has been saved for this trip.

When this condition is true, we’ll set the group to be visible. Then, in the layout tab, make sure the default visibility on page load is off (unchecked).

Now, when we preview the app, trips that have a cost show the cost group, and trips without a cost don’t show it.

We can do the same for the end date. I want the end date to appear alongside the start date, so I’ll put the start date group and the end date text inside a row container called group date.

I’ll add a text element for the end date with a hyphen before it to show the date range — something like “Start Date – End Date.” Format the end date the same way as the start date.

Use a canvas placeholder to see how it looks. You might notice layout issues, like extra height or spacing. Remove unnecessary minimum heights and set the start date group to “fit width to content” so it doesn’t stretch too far.

Add some gap spacing between the two date texts for clarity.

Make sure the end date text is only visible if the trip actually has an end date saved, using the “is not empty” condition again, with default visibility off.

When testing, trips with an end date show it properly, and trips without hide it.

Now onto operators. Let’s calculate the length of the trip in days.

Insert a dynamic expression in a text element. Start with the trip’s end date, then click “more” and choose operators. Operators let us manipulate the value we started with.

For dates, we have options like adding years, months, or subtracting dates.

Try subtracting the trip’s start date from the end date. Then format the result as “days.” This will show the number of days between the two dates.

Preview the app — you should see something like “95 days” for a trip that long.

To make it look nicer, wrap this calculation in parentheses and add the word “days” after it.

There’s a small edge case: for a one-day trip, you want it to say “1 day” (singular), not “1 days.”

To handle this, we can turn the calculation into a conditional expression: check if the number of days equals 1, then show “1 day,” else show the number with “days.”

Use the “formatted as text” operator to replace the true/false result with custom text.

To do this, duplicate the days calculation inside the conditional, so when the result is not 1, it displays the actual number plus “days.”

Now your trip length will read “1 day” or “95 days” correctly.

Next, let’s calculate cost per day by dividing the total cost by the number of days.

Add a condition to this cost-per-day text element so it only shows if there is an end date (just like before).

Then insert a dynamic expression where you divide the trip’s cost by the number of days (end date minus start date).

This expression can get long and unwieldy, so you might want to use the “arbitrary text” operator to group parts of it like parentheses.

Remember, division needs numbers, so if part of your expression returns text, use the “converted to number” operator to convert it back to a numeric value.

Finally, format the result as currency, rounding to zero decimals, adding a comma for thousands, and a dollar sign prefix.

Now you’ll see something like “$63 per day.”

Test with different trips — for example, a $1000 trip lasting 10 days should show $100 per day.

You might want to add parentheses around the whole per-day expression to make it clearer visually.

Operators are incredibly powerful and there are many more to explore. Whenever you’re unsure what an operator does, hover over it and click the “C reference” button to jump to the Bubble manual for detailed explanations.

In the next lesson, we’ll explore something mobile-specific: gestures, like swiping on trips in a list.