I am working on the Front End Development Libraries , and want to be able to recreate the results on my computer so they everything works and right no the button bouncing and jiggling doesn’t work in VS Code. I am sure I have left out some library that needs to be added because I finished all of the Front End Development Libraries lessons on the site.
It took me a little while to get CSS down so that the buttons were in three rows of two columns, but the jumping keep eluding me. I would like the buttons in VS Code to bounce also.Your code so far
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Challenge: Target Elements by Class Using jQuery
Link to the challenge:
lasjorg
November 18, 2021, 7:36pm
2
You will need to use the correct versions of the libraries.
The challenges are using Bootstrap 3 and there have been breaking changes (components and class names).
The challenges are using animate.css version 3 and there have been breaking changes (class names). You can either change the names or use the compat version (migration ).
Adding this to the head should make everything work as in the challenges.
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
I must have put the code in the wrong place, I put it between the head tags at the top, but it made no difference.
<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>
<script>
var timeoutID = setTimeout(bye, 3000);
console.log('hello');
clearTimeout(timeoutID);
function bye() {
console.log('goodbye');
}
</script>
<h1>Button Practice</h1>
<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="target1">#target4</button>
<button class="btn btn-default target" id="target2">#target5</button>
<button class="btn btn-default target" id="target3">#target6</button>
</div>
</div>
</div>
Stop time
TomDoRecife:
<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>
<script>
var timeoutID = setTimeout(bye, 3000);
console.log('hello');
clearTimeout(timeoutID);
function bye() {
console.log('goodbye');
}
</script>
<h1>Button Practice</h1>
<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="target1">#target4</button>
<button class="btn btn-default target" id="target2">#target5</button>
<button class="btn btn-default target" id="target3">#target6</button>
</div>
</div>
</div>
Okay, I got to eager, wrong sent wrong code. This is the right code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
jQuery Playground
<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>
lasjorg
November 18, 2021, 10:57pm
5
Just to be clear, the class shake is not going to work even with the compat version of animate.css version 4 because that only deals with the new animate__ prefix.
The new classes are shakeX and shakeY.
shakeX would be the equivalent of what the challenge has. You can also use a CDN link for the old version 3.2.0 of animate.css instead which is the one used by the challenge.
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css
Here is all of the code (using animate.css V4 and the new shakeX class).
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" />
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Target Elements by Class Using jQuery</title>
</head>
<body>
<script>
$(document).ready(function () {
$('.well').addClass('animated shakeX');
});
</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>
</body>
</html>
I think you need to check the class “shake” it doesn’t work with that animate.css version 4. If i were you, I will surely develop this in plain JS becuase jquery will get the job done but it kind of passing. You can still learn JavaScript in a short time and migrate to it if you want to because i think is the best way. Plus it will also save you in the future.
system
May 21, 2022, 3:59am
7
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.