Using jQuery in vscode

lcim · February 28, 2022, 5:48pm

Hi everyone,
Could someone assist me on how I can run jQuery on vscode. I use live server.
The bounce effects are invisible.
Thanks in advance.

<script>
$(document).ready(function() {

});
</script>

<!-- Only change code above this line -->

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
  <div class="col-xs-6">
    <h4>#left-well</h4>
    <div class="well" id="left-well">
      <button class="btn btn-default target" id="target1">#target1</button>
      <button class="btn btn-default target" id="target2">#target2</button>
      <button class="btn btn-default target" id="target3">#target3</button>
    </div>
  </div>
  <div class="col-xs-6">
    <h4>#right-well</h4>
    <div class="well" id="right-well">
      <button class="btn btn-default target" id="target4">#target4</button>
      <button class="btn btn-default target" id="target5">#target5</button>
      <button class="btn btn-default target" id="target6">#target6</button>
    </div>
  </div>
</div>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

Challenge: Target HTML Elements with Selectors Using jQuery

Link to the challenge:

ILM · February 28, 2022, 5:57pm

to replicate those challenges other than jQuery you need also the animated library
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css

ingabd · February 28, 2022, 5:59pm

Have you install jquery in npm?
npm install jquery

then in your script import it:
import $ from ‘jquery’

and use jquery in script with:
$(selector).addClass(“className”)
etc

Hope this help.

lcim · March 2, 2022, 9:45am

@ILM Thanks a lot for your assistance. I already have the link to the animated library.
I appreciate.

kevinSmith · March 2, 2022, 10:14am

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

lcim · March 2, 2022, 10:18am

Thanks @ingabd .
I ran npm install jquery.
I imported it at the top of my script : import {$, jQuery} from ‘jquery’

But it still doesn’t bounce or shake. I could change color and similar properties though. Only animate.css doesn’t have any effect.
I wish some little explanations on how to study beyond FCC is given especially for the sake of those coming from a completely different background.
Thanks all. I will have to leave it for now, it has taken so much of my time - I hope to figure out some of these little details later.
The frustrating aspect is that when I copy th below code to FCC platform. It runs perfectly but cannot run it on vscode.

<script>
    $(document).ready(function() {
        $("button").addClass("animated bounce");
        $(".well").addClass("animated shake");
        $("#target3").addClass("animated fadeOut");
        $("button").removeClass("btn-default");
    });
    </script>
    </head>
    <body>
  <!-- Only change code above this line -->
  
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>
  </div>

Surely, my problem lies here -

<!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.0">
    <title>Document</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 href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
     <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script>
    $(document).ready(function() {
        $("button").addClass("animated bounce");
        $(".well").addClass("animated shake");
        $("#target3").addClass("animated fadeOut");
        $("button").removeClass("btn-default");
    });
    </script>
    </head>

ILM · March 3, 2022, 8:00am

could you give your whole file?

DanCouper · March 3, 2022, 8:27am

Why have you got two versions of jQuery?

lcim · March 3, 2022, 6:13pm

Thanks @DanCouper .
The truth is that I am a newbie - I have tried each version differently and the result was not different. The animation just doesn’t work. I even installed the extension (animate.css) but no solution.

I am really having it difficult to set up vscode to practice what is taught at FCC.
Thanks for your assistance.

lcim · March 3, 2022, 6:19pm

Thanks @ILM for your time and efforts.
Below is the full code.

<!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.0">
    <title>Document</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.1.1/animate.min.css"
  />
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script>
    $(document).ready(function() {
      $("button").addClass("animated bounce");
      $(".well").addClass("animated shake");
      $("#left-well").addClass("text-center");
      $("button").addClass("animated");
      $(".btn").addClass("shake");
      $("#target1").addClass("btn-primary");
    });
    </script>
    </head>
    <body>
  <!-- Only change code above this line -->
  
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>
  </div>
</body>

ILM · March 3, 2022, 7:10pm

why are you using a different version?

lasjorg · March 3, 2022, 7:26pm

As said, you need the correct version of animate.css

Migration from v3.x and Under

Whenever you see a library bump the major version always check for breaking changes (for example shake is now shakeX and shakeY even with the .compat version).

lcim · March 3, 2022, 7:39pm

Yes at @lasjorg , just picked a lower version at animate.css - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers and with
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.1/animate.min.css
Everything worked like charm. Coming back here you confirmed, it was my problem. It has really made life difficult for me.
Thanks all for your support.

lcim · March 3, 2022, 7:42pm

Okay @ILM ,

Doing better - thanks for all your time.
Though I am yet to get the effect go on infinitely. But I will resolve it.
Thanks a million.

system · September 2, 2022, 7:43am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
jQuery: Target HTML Elements with Selectors Using jQuery	2	742	January 17, 2021
Front End Development Libraries JavaScript	6	728	May 21, 2022
JQuery(animate) JavaScript	5	570	December 20, 2022
jQuery: Front End Development Libraries JavaScript	7	56	December 18, 2024
Target HTML Elements with Selectors Using jQuery HTML-CSS	7	730	February 10, 2024

Using jQuery in vscode

Related topics