I’m confused about the JavaScript on this code 😣

Question

I’m confused as to how the JavaScript referenced something in css and toggled the animation could someone please explain how I can toggle an amation useing a JavaScript function?

https://code.sololearn.com/WLGfO0d739FW/?ref=app

(Instead of giving me links is it possible you could copy paste the relevent content from the link you intended to give me? (My parents have it where all websites are locked so I cant view the links))

Answer 1

Yes, you can modify CSS with plain JavaScript. It's fairly easy. Here is a demo. It prints "Hello" in red.

HTML:
<p id="textbox">Hello</p>

JavaScript:
var textbox = document.getElementById("textbox");
textbox.style.color = "red";

I used an ID on the HTML element. In JavaScript, I then used what we call DOM (Google it) to save a link to the element in a variable. Then adding .style to the variable accesses the CSS. Adding .color opens the CSS property. Red must be in a string, so put quotes around it, "red". I could alternatively do .style.backgroundColor (replacing the hypen with a capital letter).

Basically the JavaScript writes this into the CSS...

#textbox {
color: red;
}

Answer 2

D'lite any part lol im just confused as to how one can toggle a css animation with a javascript function

Answer 3

James thank you that helps alot

Answer 4

Beth
Since its a CSS animation, it's easy.

You could just put all the animations into a different class.
Maybe the className is "animate".

The Javascript code would then be something like
============
window.onload =function(){
var elem= document.querySelector("#elem");

var button= document.querySelector("button")

button.onclick=function(){
elem.classList.toggle("animated");
}

}

Answer 5

I’m not sure, “Rtvq” aka Beth

Answer 6

It is quite a complex code. Also, this is jQuery, not just plain JavaScript. It could be done without jQuery, but jQuery makes it easier. And, yes, JavaScript can modify CSS.

Basically, a dice is drawn using CSS. The JavaScript chooses a random number to appear on the dice, and also chooses random values for how far and fast it should spin. The jQuery then uses these values to modify the CSS, telling the dice to rotate around on certain axes.

If you want to understand each line of the code and what each of the functions mean, you will need to learn CSS, JS and jQuery.

Answer 7

Are you interested in web animations? Want some tips on what to learn?

Answer 8

James yes ives used some in the past but I want to know more about them (ive completed the css and js course) is there a way to toggle simple Css animations using Javascript?

Answer 9

James that helps so much thank you 🙂

Answer 10

Another cool way to animate is using CSS keyframes. You should search Google for some tutorials. w3schools is a good keyframes reference.