jQuery: Front End Development Libraries

JavaScript
1

Greetings;
can someone please help me setup a visual studio code template for the jQuery exercisers. I read previous posts made by other camper about this same situation and I tried following the recommendation suggested to them to allow the animation in their code work, but it did not work for me. I visited Get started with Bootstrap · Bootstrap v5.3 and i got some links from there relating to the same installation, but none is actually allowing my code to execute the functions in the live server of Visual Studio Code. Can someone please examine the links in the head tag(element) and the entire template and hit me up with a hint. Thanks in advance

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>jQuery Exerciser</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"/>
        <script rel="scriptsheet" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <script>
           $(doucument).ready(function() {
            //do not delete!!
           /*$("button").addClass("animated bounce");
            $(".well").addClass("animated shake");
            $("#dail4").addClass("animated fadeOut");
            $("button").addClass("animated");
            $(".btn").addClass("shake");
            $("#dail12").addClass("btn-primary");
            $("button").removeClass("btn-default");
            $("#dail3").prop("disabled", true);*/
            $("#dial6").css("color", "green");
            $("#dial8").html("<em>#dial8</em>");
            $("#dial5").remove();
            $("#dial11").appendTo("#left-well");
            $("#dial4").clone().appendTo("#right-well");
            $("#dial6").parent().css("background-color", "brown");
            $("#left-well").children().css("color", "green");
            $(".dial:nth-child(5)").addclass("animated bounce");
            $(".dial:odd").addClass("animated fadeOut");//this also have "even selector"
            $("body").addClass("animated swing");//we can also use "hinge" like fadeOut
           }); 
        </script>
        <!--above this line is jQuery formating-->
        <div class="container-fluid">
            <h3 class="text-primary text-center">jQuery Exerciser</h3>
            <div class="row">
                <div class="col-xs-6">
                    <h4>#left-well</h4>
                    <div class="well" id="left-well">
                        <button class="btn btn-default dial" id="dial1">#dial1</button>
                        <button class="btn btn-default dial" id="dial2">#dial2</button>
                        <button class="btn btn-default dial" id="dial3">#dial3</button>
                        <button class="btn btn-default dial" id="dial4">#dial4</button>
                        <button class="btn btn-default dial" id="dial5">#dial5</button>
                        <button class="btn btn-default dial" id="dial6">#dial6</button>
                    </div>
                </div>
                <div class="col-xs-6">
                    <h4>#right-well</h4>
                    <div class="well" id="right-well">
                        <button class="btn btn-default dial" id="dial7">#dial7</button>
                        <button class="btn btn-default dial" id="dial8">#dial8</button>
                        <button class="btn btn-default dial" id="dial9">#dial9</button>
                        <button class="btn btn-default dial" id="dial10">#dial10</button>
                        <button class="btn btn-default dial" id="dial11">#dial11</button>
                        <button class="btn btn-default dial" id="dial12">#dial12</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
2

Screenshot 2024-12-16 215046
Screenshot 2024-12-16 2150461510×1137 110 KB

This is all i get in the live server. Both shake, fadeOut, bounce, swing , and even the css are not applying to in the live server

3

those are not jQuery, but from an animation library, it’s mentioned somewhere by name

edit: found it

Note that we’ve already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce class to your button elements.

4

what can I do now to have it fully functioning in VSC or how may I set a better template in VSC for more practices work? Oh! Thanks for your quick respond. Much appreciated

6

Hi guys;
in addition to the above question, can some also please help to setup a template or working environment for sass in VSC? I want to be able to practice these exerciser after the tutorial lessons . Your assistant will highly be appreciated.

7

You have a typo for document

$(doucument).ready(function () {

You have a typo for addClass

$(".dial:nth-child(5)").addclass("animated bounce");

For practicing SASS you can use the Live Sass Compiler VS Code extension.

For more proper usage, I would look at using a build system, Vite should give you all you need.

8

Thanks Las. Much appreciated.

9

This How to setup SASS in VSCode – Adebola's blog was very helpful in setting up Live Sass Compiler in Visual Studio Code. In case anyone need a help or guide to configuring Live Sass Compiler in VSC, the link above will help you out. Have fun coding!