cannot import typed.js, jQuery and google-fonts from node_modules

141 views Asked by At

I have used typed.js, jQuery and google-fonts in my web page. I have installed them using npm. But the problem is i cant figure out what files to import to make them work. This is how i have imported these files and is not working.

jQuery as

    <script type="text/javascript" src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

typed.js as

<script type="text/javascript" src="node_modules/typed.js/src/typed.js"></script>

In the browser's console panel it shows

Uncaught ReferenceError: Typed is not defined
    <anonymous> http://localhost:1234/:168
localhost:1234:168:13
Uncaught ReferenceError: jQuery is not defined
    <anonymous> http://localhost:1234/:175

Everything works perfectly without any error when i use a CDN for each of them

Here is the use of typed.js

<h1 id="h1"><span class="type"></span></h1>

<script>
    var typed = new Typed('.type', {
        strings: ['<span class="text-primary">....</span>', '<span class="text-success">....</span>',],
        loop: true,
        backSpeed: 50,
        typeSpeed: 125,

    });
</script>

the use of jQuery

 <h3 class="quotes">....</h3>
 <h3 class="quotes">....</h3>


<script>
    (jQuery(document).ready(function($) {
        var quotes = $("h3");
        var quoteIndex = 0;
        var color =  509 ;
        function showNextQuote() {
            ++quoteIndex;
            //alert(quoteIndex);
            var x = quotes.eq(quoteIndex % quotes.length);
            //console.log(x);
            var newcolor =  color * Math.random(1999) ;
            x.css("color","#" + newcolor).fadeIn(600)
                .delay(750)
                .fadeOut(600, showNextQuote);
        }
        showNextQuote();
    }));
</script>

in case of google-fonts i cant find a single css file to import from node_modules. Also what is the correct place to put the link of these files

i will be glad if you can help

0

There are 0 answers