d2jsp
d2jsp Forums > Off-Topic > Programmer's Haven > Fg For Newbie Js Assignment Help
Add Reply New Topic New Poll
DII_Fanatic
#1 Apr 28 2021 12:35pm
Group: Member
Posts: 1,562
Joined: Aug 28 2020
Gold: 275.10
half of my Fg (220), seems like just need to add a bit things to trigger the animation when you select those options.

DII_Fanatic
#2 Apr 28 2021 12:36pm
Group: Member
Posts: 1,562
Joined: Aug 28 2020
Gold: 275.10
<!doctype html>
<html>
<head>
<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>
function addAnimation()
{
var animationName = $("#anDropdown option:selected").text();

console.log(animationName);
}
</script>
</head>
<body>

<select id='anDropdown' onchange='addAnimation()'>
<option disabled selected>choose an animation</option>
<option>bounce</option>
<option>flash</option>
<option>pulse</option>
<option>rubberBand</option>
<option>shakeX</option>
<option>shakeY</option>
<option>headShake</option>
<option>swing</option>
<option>tada</option>
<option>wobble</option>
<option>jello</option>
<option>heartBeat</option>
<option>backInDown</option>
<option>backInLeft</option>
<option>backInRight</option>
<option>backInUp</option>
<option>backOutDown</option>
<option>backOutLeft</option>
<option>backOutRight</option>
<option>backOutUp</option>
<option>bounceIn</option>
<option>bounceInDown</option>
<option>bounceInLeft</option>
<option>bounceInRight</option>
<option>boundInUp</option>
<option>bounceOut</option>
<option>bounceOutDown</option>
<option>bounceOutLeft</option>
<option>bounceOutRight</option>
<option>boundOutUp</option>
</select>
<div id='box' style='width:100%;height: 400px; background:red'>

</div>
</body>
</html>
Mat_IK
#3 Apr 28 2021 03:32pm
Group: Member
Posts: 970
Joined: Mar 26 2005
Gold: 844.65
<!doctype html>
<html>
<head>
<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>
function addAnimation()
{
var animationName = $("#anDropdown option:selected").text();
$("#box").addClass("animate__" + animationName);
console.log(animationName);
}
</script>
</head>
<body>

<select id='anDropdown' onchange='addAnimation()'>
<option disabled selected>choose an animation</option>
<option>bounce</option>
<option>flash</option>
<option>pulse</option>
<option>rubberBand</option>
<option>shakeX</option>
<option>shakeY</option>
<option>headShake</option>
<option>swing</option>
<option>tada</option>
<option>wobble</option>
<option>jello</option>
<option>heartBeat</option>
<option>backInDown</option>
<option>backInLeft</option>
<option>backInRight</option>
<option>backInUp</option>
<option>backOutDown</option>
<option>backOutLeft</option>
<option>backOutRight</option>
<option>backOutUp</option>
<option>bounceIn</option>
<option>bounceInDown</option>
<option>bounceInLeft</option>
<option>bounceInRight</option>
<option>boundInUp</option>
<option>bounceOut</option>
<option>bounceOutDown</option>
<option>bounceOutLeft</option>
<option>bounceOutRight</option>
<option>boundOutUp</option>
</select>
<div id='box' style='width:100%;height: 400px; background:red' class="animate__animated">
</div>
</body>
</html>
DII_Fanatic
#4 Apr 28 2021 04:09pm
Group: Member
Posts: 1,562
Joined: Aug 28 2020
Gold: 275.10
Quote (Mat_IK @ Apr 28 2021 02:32pm)
<!doctype html>
<html>
<head>
<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>
function addAnimation()
{
var animationName = $("#anDropdown option:selected").text();
$("#box").addClass("animate__" + animationName);
console.log(animationName);
}
</script>
</head>
<body>

<select id='anDropdown' onchange='addAnimation()'>
<option disabled selected>choose an animation</option>
<option>bounce</option>
<option>flash</option>
<option>pulse</option>
<option>rubberBand</option>
<option>shakeX</option>
<option>shakeY</option>
<option>headShake</option>
<option>swing</option>
<option>tada</option>
<option>wobble</option>
<option>jello</option>
<option>heartBeat</option>
<option>backInDown</option>
<option>backInLeft</option>
<option>backInRight</option>
<option>backInUp</option>
<option>backOutDown</option>
<option>backOutLeft</option>
<option>backOutRight</option>
<option>backOutUp</option>
<option>bounceIn</option>
<option>bounceInDown</option>
<option>bounceInLeft</option>
<option>bounceInRight</option>
<option>boundInUp</option>
<option>bounceOut</option>
<option>bounceOutDown</option>
<option>bounceOutLeft</option>
<option>bounceOutRight</option>
<option>boundOutUp</option>
</select>
<div id='box' style='width:100%;height: 400px; background:red' class="animate__animated">
</div>
</body>
</html>


TY, 220 fg sent
Go Back To Programmer's Haven Topic List
Add Reply New Topic New Poll