inorganik/countUp.js

Help me please how do i use

hankypoo7 opened this issue · 8 comments

hankypoo7 commented

I need to run this code:

const options = {   decimalPlaces: 5,   duration: 3600, }; let demo = new CountUp('myTargetElement', 0.73, options); if (!demo.error) {   demo.start(); } else {   console.error(demo.error); }

in this file:

https://github.com/HenryWemmie/henrywemmie.github.io/blob/main/ss/ss.html

in an html web page.
please note I am 13 years old and I need this for a school project so say this in words that might make since to me and I need this fast. thanks.

inorganik commented

Okay Henry, here is your problem. In your main.js file, you are importing a file that doesn't exist in your project:

import { CountUp } from './js/countUp.min.js';

BUT you are also using ES6 modules, and for those to work you need npm. I'm going to tell you how to do it without installing npm, because that adds more complexity.

Here are steps to make it work:

  1. Copy this code and put it in a file called "countup.js" at the same level as main.js
  2. In the <head> of ss.html, remove the type="module" attribute of the script tag and add another script tag for countup, like this. The countup script tag needs to come before the main script tag
<script src="./countup.js"></script>
<script src="./main.js"></script>
  1. That countup code is packaged as a UMD module, which means you need to change how you use it in main.js. Notice there is no import statement because with UMD, it exposes countUp as a global variable:
window.onload = function() {
  var numAnim = new countUp.CountUp('target', 2000);
  if (!numAnim.error) {
    numAnim.start();
  } else {
    console.error(numAnim.error);
  }
}
  1. Last, in ss.html, You need to add a target element for CountUp to animate. So somewhere in the <body> add this. Notice that the id attribute corresponds to the first argument passed to CountUp.
<h1 id="target">0</h1>

Now if you open ss.html up in a browser, it should animate.

If you have issues, open your browser console, it will print the error there. Good luck!

  • ❤️1
hankypoo7 commented

@inorganik thank you so much

  • 👍1
  • 🎉1
hankypoo7 commented

it worked how can i donate to help support you and the project?

inorganik commented

On this line you can add options, it's the third argument:

var numAnim = new countUp.CountUp('target', 2000, { decimalPlaces: 5, duration: 3600 });

I don't accept donations, but thanks anyway :)

hankypoo7 commented

On this line you can add options, it's the third argument:

var numAnim = new countUp.CountUp('target', 2000, { decimalPlaces: 5, duration: 3600 });

I don't accept donations, but thanks anyway :)

thank you

hankypoo7 commented

@inorganik I'm sorry that i keep bothering you, but i dont know why it isnt working, it was for a little, but not anymore.

inorganik commented

did you open your console and read any errors?

hankypoo7 commented

did you open your console and read any errors?

i fixed it thank you