Skip to Content (Press Enter)
2019-08-31 06-59-55
YS
47Views
4Comments
Solved
Animated number counter on a web screen like the spinning reels of a slot machine
Question
JavaScript

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?

0
0
29 Mar 2021
Copy Link
2022-06-28 16-48-39
David Marques
Solution

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;


See solution in context
0
0
29 Mar 2021
Copy Link
2019-08-31 06-59-55
YS

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?

0
0
29 Mar 2021
Copy Link
2021-08-12 11-00-27
Nordin Ahdi
 
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

0
0
29 Mar 2021
Copy Link
2019-08-31 06-59-55
YS

Thanks Nordin,

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

0
0
29 Mar 2021
Copy Link
2022-06-28 16-48-39
David Marques
Solution

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;


0
0
29 Mar 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.