Animated number counter on a web screen like the spinning reels of a slot machine
Question

Greetings all,

I would like to implement an animated number counter on a web screen. The goal is to create something like the spinning reels of a slot machine.

Here is the animated number counter: https://codepen.io/chadd/pen/gZeaBd

I understand that there are various ways to place JavaScript into OutSystems. May I know which of those ways is most suitable for this case?

Let me try to help you.

I already tried to create the component with your codepen suggestion and works well.

Note:
- HTML is on pug version;
- Is scss version, need to be converted for css;
- latest versions of javascript are only supported on javascript files, not it client actions;

What I did:
- create a weblock with input parameter and example of HTML;
- Apply css directly on weblock;
- Create a js file associated included in weblock dependency insdide a custom function;
- Call the javascript function on weblock  ready event;


I want the counter to spin upon clicking of a button.

With reference to https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Web_Application_Using_JavaScript/Define_and_Run_JavaScript_Code,

can I assume that I should use the RunJavaScript action within a screen action?

mvp_badge
MVP

Hi YS,

Perhaps you want to take a look at CountUp Forge component created by OutSystems MVP @Benjith Sam .

It's based on the following project: https://github.com/inorganik/countUp.js.

I'm not sure what type of application you are developing, but the component is created for Reactive Web Apps.

Regards,

Nordin

Thanks Nordin,

It seems like CountUp does only numbers. My result includes letters as well ):

Let me try to help you.

I already tried to create the component with your codepen suggestion and works well.

Note:
- HTML is on pug version;
- Is scss version, need to be converted for css;
- latest versions of javascript are only supported on javascript files, not it client actions;

What I did:
- create a weblock with input parameter and example of HTML;
- Apply css directly on weblock;
- Create a js file associated included in weblock dependency insdide a custom function;
- Call the javascript function on weblock  ready event;


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.