lcim
February 28, 2022, 5:48pm
1
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
2
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
1 Like
ingabd
February 28, 2022, 5:59pm
3
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
4
@ILM Thanks a lot for your assistance. I already have the link to the animated library.
I appreciate.
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 (â).
1 Like
lcim
March 2, 2022, 10:18am
6
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
7
could you give your whole file?
Why have you got two versions of jQuery?
lcim
March 3, 2022, 6:13pm
9
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
10
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
11
why are you using a different version?
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).
1 Like
lcim
March 3, 2022, 7:39pm
13
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
14
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.
1 Like
system
Closed
September 2, 2022, 7:43am
15
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.