Q: Typed.js Jquery plugin not working on webpage I am new to WebDev and am trying to implement the typed.js jQuery plugin . I have added the script to my code, but nothing is showing up on my webpage.
HTML :
<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>DEPARTMENTS | RNS INSTITUTE OF TECHNOLOGY | Bangalore, India </title>

            <!--- CSS Stylesheets -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <link  href="./css/style.css" rel="stylesheet">
            <link href="./jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet">
            <link href="./typed.js-master/main.css"rel="stylesheet">



            <!--- JS files -->
            <script src="./js/jquery-1.11.3.js"></script>
            <script src="./jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
            <script src="./js/bootstrap.min.js"></script>
            <script src="./parallax.js-1.3.1/parallax.js"></script>
            <script src="./typed.js-master/js/typed.js"></script>

            <script>
                //javascript code for HAMBURGLER - the drop down menu

                function togglescroll() {
                    $('body').on('touchstart', function(e) {
                    if ($('body').hasClass('noscroll')) {
                    e.preventDefault();
                }
                });
                }

                $(document).ready(function() {
                        togglescroll()
                        $(".icon").click(function() {
                        $(".mobilenav").fadeToggle(500);
                        $(".top-menu").toggleClass("top-animate");
                        $("body").toggleClass("noscroll");
                        $(".mid-menu").toggleClass("mid-animate");
                        $(".bottom-menu").toggleClass("bottom-animate");
                     });

                       // code for typed.js

                       $(function(){
                $("#texttype").typed({
                strings: ["First sentence.", "Second sentence."],
                typeSpeed: 150
                backDelay : 900
                loop : true
                });
            });




                });



                $(document).keydown(function(e) {
                    if (e.keyCode == 27) {
                    $(".mobilenav").fadeOut(500);
                    $(".top-menu").removeClass("top-animate");
                    $("body").removeClass("noscroll");
                    $(".mid-menu").removeClass("mid-animate");
                    $(".bottom-menu").removeClass("bottom-animate");
  }
});

        </script>




    </head>

    <body>
        <nav class="navbar navbar-fixed-top">

            <div class="logo">
                <a class="navbar-brand" href="index.html"> <img alt="logo" src="logo.jpg"> <h4>RNS Institute Of Technology</h4></a>
            </div>
            <div class="mobilenav">
                    <li><a href="departments.html">DEPARTMENTS</a></li>
                    <li><a href="admission.html">ADMISSIONS</a></li>
                    <li><a href="govbody.html">GOVERNING BODY</a></li>
                    <li><a href="life.html">LIFE @ RNSIT</a></li>
                    <li><a href="campus_news.html">CAMPUS NEWS</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>

            </div>

                <a href="javascript:void(0)" class="icon">
                    <div class="hamburger">
                    <div class="menui top-menu"></div>
                    <div class="menui mid-menu"></div>
                    <div class="menui bottom-menu"></div>
                    </div>
                </a>

        </nav>


        <div class="pictures">
            <div class="container-fluid">
                <h1>DEPARMENTS <span id="texttype"></span>
</h1>
                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>
   </html>

Any help is appreciated a lot. Thanks in advance :)

A: Please try removing the Syntax errors before posting then it will help finding issues easily.
Try this: it is just a demo so images and css will be missing.


 function togglescroll() {
                    $('body').on('touchstart', function(e) {
                    if ($('body').hasClass('noscroll')) {
                    e.preventDefault();
                }
                });
                }

                $(document).ready(function() {
                        togglescroll()
                        $(".icon").click(function() {
                        $(".mobilenav").fadeToggle(500);
                        $(".top-menu").toggleClass("top-animate");
                        $("body").toggleClass("noscroll");
                        $(".mid-menu").toggleClass("mid-animate");
                        $(".bottom-menu").toggleClass("bottom-animate");
                     });

                       // code for typed.js

                $("#texttype").typed({
                strings: ["First sentence.", "Second sentence."],
                typeSpeed: 150,
                backDelay : 900,
                loop : true
                });
            

                $(document).keydown(function(e) {
                    if (e.keyCode == 27) {
                    $(".mobilenav").fadeOut(500);
                    $(".top-menu").removeClass("top-animate");
                    $("body").removeClass("noscroll");
                    $(".mid-menu").removeClass("mid-animate");
                    $(".bottom-menu").removeClass("bottom-animate");
  }
});
                });
<html lang="en">
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>DEPARTMENTS | RNS INSTITUTE OF TECHNOLOGY | Bangalore, India </title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->




            <!--- JS files -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
            <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js"></script>
            <script src="http://www.mattboldt.com/demos/typed-js/js/typed.custom.js"></script>

<body>
        <nav class="navbar navbar-fixed-top">

            <div class="logo">
                <a class="navbar-brand" href="index.html"> <img alt="logo" src="logo.jpg"> <h4>RNS Institute Of Technology</h4></a>
            </div>
            <div class="mobilenav">
                    <li><a href="departments.html">DEPARTMENTS</a></li>
                    <li><a href="admission.html">ADMISSIONS</a></li>
                    <li><a href="govbody.html">GOVERNING BODY</a></li>
                    <li><a href="life.html">LIFE @ RNSIT</a></li>
                    <li><a href="campus_news.html">CAMPUS NEWS</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>

            </div>

                <a href="javascript:void(0)" class="icon">
                    <div class="hamburger">
                    <div class="menui top-menu"></div>
                    <div class="menui mid-menu"></div>
                    <div class="menui bottom-menu"></div>
                    </div>
                </a>

        </nav>


        <div class="pictures">
            <div class="container-fluid">
                <h1>DEPARMENTS <span id="texttype"></span>
</h1>
                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

                <div class="column">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                        <div class="thumbnail">
                            <img src="cake.png">
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>
   </html>


