I can't get my jQuery code parsed to javascript

Question

Is there a way to compile my jquery code to javascript? The code will add and remove classes so it can activate there animation. So every block of code appears on the left side.

My html code

<div class="h slider-one-active">
    <div class="steps">
        <div class="step step-one">
            <div class="liner"></div>
        </div>
        <div class="step step-two">
            <div class="liner"></div>
        </div>
    </div>
</div>

<div class="container slider-one-active">

<div class="slider-ctr">
    <div class="slider">
        <section>
                <form class="slider-form slider-one" action="">
                <h1 class="light-font">Hi there!</h1>
                <h1 class="normal-font">What's your name?</h1>
                    <label class="input">
                        <input type="text" class="name Name" placeholder="Name" onblur="validateN()" >
                    </label>
                    <br><br>
                    <button class="first" >Next</button>
                    <label class="next dummy-button "></label>
                </form>
        </section>

        <section>
                <form class="slider-form slider-two b" action="">
                    <h1 class="light-font">Hello <span class="yourname"></span>,</h1>
                    <h1 class="normal-font">What's your E-mail?</h1>
                    <label class="input">
                        <input type="text" class="name Email" placeholder="E-mail address" onblur="validate()" >
                    </label>
                    <br><br>
                    <button class="second next">Next</button>
                </form>
        </section>
    </div>
</div>

The jquery code exists out of four steps where almost the same changes are made. And here is the jquey code

 $firstButton = $(".first"),
    $secondButton = $(".second"),
    $thirdButton = $(".third"),
    $fourthButton = $(".fourth"),
    $input = $("input"),
    $name = $(".name"),
    $more = $(".more"),
    $yourname = $(".yourname"),
    $reset = $(".reset"),
    $ctr = $(".container, .h");

$firstButton.on("click", function(e){
    $(this).text("Saving...").delay(900).queue(function(){
        $ctr.addClass("center slider-two-active").removeClass("full slider-one-active");
        $name = $name.val();
        if($name == "") {
            $yourname.html("Anonymous");
        }
        else { $yourname.html($name); }
    });
    e.preventDefault();
});

$secondButton.on("click", function(e){
    $(this).text("Saving...").delay(900).queue(function(){
        $ctr.addClass("half slider-three-active").removeClass("center slider-two-active slider-one-active");
    });
    e.preventDefault();
});

Answer 1 · 2018-06-08T03:19:21Z

June 8, 2018 3:19am

jQuery isn't a preprocessor for JavaScript, thought it may seem like it. It's essentially a library of functions that are all written using JavaScript.

I'm not sure why you would want to convert jQuery code to JavaScript, but the difficulty varies with what operations are being used in jQuery. Simple things translate rather easily. Here's a conversion guide found on github that covers a lot of them.

On the other hand, complex things like animations won't be so easy, though a few of them can be converted into CSS instead and may even be more efficient done that way.

Answer 2 · 2018-06-08T10:04:42Z

June 8, 2018 10:04am

I'm working converting this because I am making a web app on an esp32 where I start an access point to configure the WiFi on the esp32. So a captive portal appears and there I need the jquery/js. But here is the problem, since I don't have any internet connection yet. The library doesn't work. also I've tried to run the jquery library in my html. but then the html is to long to send with the esp32 that runs the arduino software by the way.

Welcome to the Treehouse Community

Looking to learn something new?

Ashley Van Laer

Ashley Van Laer

I can't get my jQuery code parsed to javascript

2 Answers

Steven Parker

Steven Parker

Ashley Van Laer

Ashley Van Laer

Steven Parker

Steven Parker