CODEWITHSUNDEEP
javascript
equanimity
equanimity

Reputation: 2533

How to properly implement countUp.js?

I'd like to add a simple counter to my webpage using countUp.js.

Here is my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossorigin="anonymous">

    <title>Test</title>

</head>
<body>

    <div class="container-fluid">

        <div class="row justify-content-center">
             <div id="test-counter" class="col-8 border">
                0
             </div>
        </div>

    </div>



<!-- - - - - - - - - - - - - - - - - - - >
<     Load the JavaScript Libraries      >
<- - - - - - - - - - - - - - - - - - - -->

<!--  own JavaScript  -->
    <script src="js/countUp.js"></script>

   
<!-- CountUp.js library -->
    <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/countUp.js"
    ></script>

   
</body>
</html>

js/countUp.js file

const c = new countUp.CountUp('test-counter', 100)
c.start()

I tried to implement this according to the advice given on CountUp is not defined, but it's not working.

Questions:

  1. Is my file structure correct? (i.e. do I instantiate an object c and call it from within a separate countUp.js file (which itself is imported into the index.html file?

  2. Am I importing countUp.js correctly from its source? (I'm new to JavaScript)

  3. Could I just take the contents of https://github.com/inorganik/countUp.js/blob/master/dist/countUp.js and drop that into a file in my project? (then reference this file locally)

Thanks in advance for any help you can give!

Upvotes: 0

Views: 1698

Answers (1)

Ariel Gueta
Ariel Gueta

Reputation: 106

As mentioned in the comments you cant use anything from a script that was not yet parsed (the browser parse the html file from top to bottom line after line with some exceptions).

  1. The conventional names for classes start with upper-case letter and you try to use the new key word on countUp instead of CountUp.
  2. In the html file first import CountUp.js library and after that use your script countUp.js.
  3. Yes you can copy or download the script CountUp.js to your project and use it "locally".

Upvotes: 1

Related Questions