Learn the JavaScript classList property easy! 💡

[@BroCodez]

// classList = Element property in JavaScript used to interact
// with an element's list of classes (CSS classes)
// Allows you to make reusable classes for many elements
// across your webpage.
// add()
// remove()
// toggle(Remove if present, Add if not)
// replace(oldClass, newClass)
// contains()
// ---------- button ----------
const myButton = document.getElementById("myButton");
myButton.classList.add("enabled");
myButton.addEventListener('mouseover', event => {
event.target.classList.toggle('hover');
});
myButton.addEventListener('mouseout', event => {
event.target.classList.toggle('hover');
});
myButton.addEventListener('click', event => {
if(event.target.classList.contains("disabled")){
event.target.textContent += "🤬";
}
else{
event.target.classList.replace("enabled", "disabled");
}
});
// ---------- h1 ----------
const myH1 = document.getElementById("myH1");
myH1.classList.add("enabled");
myH1.addEventListener("mouseover", event => {
event.target.classList.toggle('hover');
});
myH1.addEventListener('mouseout', event => {
event.target.classList.toggle('hover');
});
myH1.addEventListener('click', event => {
if(event.target.classList.contains("disabled")){
event.target.textContent += "🤬";
}
else{
event.target.classList.replace("enabled", "disabled");
}
});
// ---------- NodeList ----------
let buttons = document.querySelectorAll(".myButtons");
buttons.forEach(button => {
button.classList.add("enabled");
});
buttons.forEach(button => {
button.addEventListener("mouseover", event => {
event.target.classList.toggle("hover");
});
});
buttons.forEach(button => {
button.addEventListener("mouseout", event => {
event.target.classList.toggle("hover");
});
});
buttons.forEach(button => {
button.addEventListener("click", event => {
if(event.target.classList.contains("disabled")){
event.target.textContent += "🤬";
}
else{
event.target.classList.replace("enabled", "disabled");
}
});
});


Document

Hello
My button
Button 1
Button 2
Button 3
Button 4

#myH1{
font-size: 5rem;
}
#myButton, .myButtons{
font-size: 4rem;
margin: 10px;
border: none;
border-radius: 5px;
padding: 10px 15px;
}
.enabled{
background-color: hsl(204, 100%, 50%);
color: white;
}
.hover{
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.2);
font-weight: bold;
}
.disabled{
background-color: hsl(0, 0%, 60%);
color: hsl(0, 0%, 80%);
}

[@salad333]

is there any way to contact you for asking questions about programming language? like discord, facebook something like that? 😃

[@uncannypotato6952]

hi man. i am enjoying your tutorials. the tut are very easy to understand (just completed the 5th one). thanks

[@famero_xo]

Best tutorial 🎉❤

[@widespectrumcreators4691]

BroCode best tutorials!! 👍👍😀🤩🤩

[@felipenogueira7518]

Great, bro. Thank you very much!

[@777etr6]

amazing

[@msamer55]

hey there:
if anyone faces the error of chrome not applying the Background color property from .enabled class in css
try using this syntax:
background-color: hsla(41, 61%, 50%, 0.829) *!important*;

[@raoufsnowden2988]

thank you sir 🙏

[@کوروشبصیری]

King❤❤

[@Elninooooooooo]

Hello my friend from Vietnam. Let me ask, how long does it take us to master a programming language?

[@SyefTheCandJavaCoder]

A year or months

[@DySun]

depends on the programming language. For JavaScript, learning all the syntax takes less than a month. But to be conversant with the language requires many more months (even years) of actual hands-on doing real projects.

[@ozairabtahi]

bro what did you click on keyboard to access the emoji???????????????

[@ivvy2730]

windows + .

[@abdeSaves]

windows + ;

[@hamzagohar2048]

seems like you did not watched the whole playlist