Forum Academy Marketplace Showcase Pricing Features

Creating a count down to implement wordcount limit

Hello Bubble folks! I’m creating a text input and would like to include a counter that counts down from a wordcount limit (like, ‘34 words remaining’). How can I do this, please?

Thanks in advance.

Hey @girl-fi ,

Let me walk you through it. I’m going to have 2 elements:

  1. Input Element
  2. Text element that shows how many characters remaining
    Screen Shot 2022-06-23 at 10.26.29 AM

On the input element I crated a Custom State by selecting the Input field and clicking the “i” icon. Then I created a new custom state named Max Number and set the default to 64.
(this is so we know what the maximum amount of characters allowed is).

Then on the text element I crated an expression that takes the Max Number custom state and subtracts the amount of characters that are typed in the input box.

That’s it! Any questions let me know.

Best,
Alex
dowcoaching.com

1 Like

Thanks. Can you please share the expression for your example? I’m not able to get any expression to work.

@bubblealex , hi! Are you able to come back to me on this, please?

Hey @girl-fi ,
Super sorry I uploaded the wrong screenshot for the last image. I edited it. Take a look and let me know if you have questions.

Best,
Alex

Hi Alex! It worked nicely, thank you.

Only one thing, it doesn’t count down actively while you type. It will only show you the number of words left when you click outside the input box. Is it possible to see the countdown happening as you type?

NB: It actually does show it to you as you are typing! Just so slow that you might not observe it until you stop typing (or in my case, stop typing and click outside the input). I don’t suppose it can be made to go faster? :grinning:

Also, would it be possible to do a word count instead of a character count?