Coding

Question

What do I do to my rubbish coding page to make it good
https://sololearn.com/compiler-playground/WLAAte16Y4SD/?ref=app
https://sololearn.com/compiler-playground/WLAAte16Y4SD/?ref=app

Answer 1

Where is your javascript? Nothing will happen without it
Also you will need to separate your functions with a semi-colon “;” not a comma “,”
Also your css is not using the same class names as your html elements

I see that you are taking the web development course, which is great. But you shouldn’t try to code things that you don’t know. It would be much better to add a little at a time to your code as you learn the new concepts.

Answer 2

Innocent Agoha Zvi touched on lot of your issues.

Also be aware that class attribute values with spaces are treated as multiple classes.

EXAMPLE
<div class ="right hand"></div>
is treated as belonging to 2 classes - "right" and "hand"

If you wanted only one class, use camel case (rightHand) or snake case (right_hand) for the class name.

Answer 3

https://sololearn.com/compiler-playground/WtEtjmcdNY6C/?ref=app

This is the finished code with JavaScript

Answer 4

Innocent Agoha
Couple items to fix:
👉 leftover tags at end of your HTML
👉 avoid using "var" to declare variables in JS. It gives variable global scope. You should use "const" or "let" instead to limit variable to local scope.

Some improvements you could make:
👉 Use #ids for CSS applied to only one element, and .classes for CSS applied to multiple elements.
👉 Can also use combinator selectors to apply rules to multiple elements.
👉 I changed your body parts from classes to ids.
👉 I consolidated CSS common to all body parts in "good" class, and used "#sign > .good" selector - all good class children of sign id element
👉 I consolidated all toggle CSS rules into single "evil" class, and used "#sign > .evil" selector

👉 I consolidated all JS functions into single function.
It finds the #sign element, and then loops over all its children, toggling "evil" class for each.

https://sololearn.com/compiler-playground/Wh07ENC4v8sk/?ref=app