Word and Character Counter Tool

Part 1: Building the Interface

First, we need a user interface for our tool. We'll use the exact two-column responsive layout you created in the last lesson. This practical application will help solidify those grouping concepts.

On a new page in your Bubble editor, please recreate the responsive layout we designed previously. If you saved it, feel free to reuse that page. As a quick reminder, the structure was:

• A main page container set to Column layout.
• A centered content wrapper (Group - Page Padding) with a max-width and padding.
• A Row container inside it (Group - Tool Columns) that holds our two columns and switches to a Column layout on mobile.
• Two child groups, Group - Input Column and Group - Output Column, which will hold our elements.

Once you have this structure ready, let's add the specific elements for our counter tool.

In the Group - Input Column (the left column):

1. Add a Text element with the content "Enter your text below".
2. Below the text, add a Multiline Input element. This is where the user will type. Stretch it to fill a good portion of the column.

In the Group - Output Column (the right column):

1. Add a Group to hold our first statistic. Set its layout to Row and alignment to Space-between.
   • Inside this new group, add a Text element that says "Character Count".
   • Add another Text element that simply says "0". This will be our dynamic counter.
2. Duplicate this group.
   • Change the first Text element in the duplicated group to say "Word Count".
   • The second Text element can remain "0" for now.

Your layout should now clearly show an input area on one side and a results area on the other.

Part 2: Implementing the Character Count

Now, let's make the character counter functional. The magic behind this is Bubble's ability to dynamically reference the properties of any element on the page. Every input element has a value (the text inside it), and Bubble can analyze that value in various ways.

One of the simplest analyses is counting its characters. The expression for this is [Input Element's Name]'s value:number of characters.

This is a fundamental technique in Bubble, as discussed frequently in the Bubble community forums.

Let's apply this.

1. In your editor, click on the "0" text element next to "Character Count".
2. Instead of a static number, we'll enter a dynamic expression. Click inside the Content box and select Insert Dynamic Data.
3. Choose your Multiline Input element's name.
4. A new list of options will appear. Select 's value.
5. Another list will appear. Select :number of characters.
6. The expression in the box should now read MultilineInput A's value:number of characters (your input name might be different).

Now, preview your page. As you type into the multiline input, you'll see the character count update in real-time (with a very slight delay, which is normal).

Part 3: Implementing the Word Count

Counting words requires one extra step, but the logic is just as elegant. We can't directly count words, but we can do something clever:

1. Take the full text string from the input.
2. Split it into a list of smaller text strings using the space character (" ") as the separator.
3. Count how many items are in that new list.

The Bubble expression for this is: [Input Element's Name]'s value:split by ( ):count.

Let's break that down:

• :split by ( ): This operator takes the text and creates a list. When you type a space in the delimiter field, it breaks the text apart at every space.
• :count: This operator simply counts the number of items in the list that was just created.

This is the standard no-code method for counting words in Bubble.

Now, let's implement this in your editor.

1. Click on the "0" text element next to "Word Count".
2. Click Insert Dynamic Data and select your Multiline Input element, followed by 's value.
3. From the next list, choose :split by.
4. A pop-up will ask for the Delimiter. Simply type a single space in the Text separator box.
5. Close the pop-up. The expression isn't complete yet. Click more at the end of the expression.
6. From the final list, choose :count.

The full expression will look something like this: MultilineInput A's value:split by ( ):count.

Go back to your preview page. As you type sentences, you should see both the character and word counts updating automatically. You have now built a fully functional tool!

Your Task: Putting It All Together (15 minutes)

If you haven't been building along, now is the time to put theory into practice. Follow these steps to create your Word & Character Counter tool from a blank page.

1. Page Setup: Create a new page. In the Layout tab, set the page Container layout to Column and Horizontal alignment to Center.
2. Main Wrapper: Add a Group to the page. Set its Container layout to Column, Width to 100%, and give it a Max width of 960px. Add 40px of padding on all sides.
3. Tool Columns: Drag a new Group inside the main wrapper. Set its Container layout to Row, Width to 100%, and add 40px of Column gap.
4. Responsive Conditional: On this Row group, add a conditional: When Current page width <= 768, change Container layout to Column.
5. Column Groups: Add two Group elements inside the Row group. Set both to Column layout, Min width of 320px, and give them a light grey background to see them clearly.
6. Add UI Elements:
   • In the left group, add a Multiline Input.
   • In the right group, add the Text elements for "Character Count", "Word Count", and the two "0" placeholders.
7. Implement Logic:
   • Configure the "Character Count" placeholder to display: Multiline Input's value:number of characters.
   • Configure the "Word Count" placeholder to display: Multiline Input's value:split by ( ):count.
8. Test: Preview the page and test your new tool. Check that the responsive behavior works correctly by resizing your browser window.

Conclusion

Congratulations, you've just built your first functional tool! This lesson was a significant step, moving from static design to dynamic application logic. You learned how to harness Bubble's powerful expression system to create a tool that responds instantly to user input.

Key takeaways from today:

• Dynamic expressions are central to Bubble: They allow elements to display data that is calculated in real-time based on other elements.
• Input values can be analyzed: You can access the content of an input field with 's value.
• Operators transform data: You used operators like :number of characters, :split by, and :count to transform raw text into meaningful statistics.
• Combining UI and logic: You saw how the responsive layout from our last lesson provides the perfect structure for the functional tool we built today.

You now have a solid foundation for building the other native tools you envision for your platform. In our next lesson, we'll build on this foundation by creating a text case converter (e.g., uppercase, lowercase). This will introduce you to workflows, allowing you to take the text from an input, modify it with a button click, and display the result.