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

[@widespectrumcreators4691]

BroCode best tutorials!! 👍👍😀🤩🤩

[@famero_xo]

Best tutorial 🎉❤

[@felipenogueira7518]

Great, bro. Thank you very much!

[@777etr6]

amazing

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

King❤❤

[@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 🙏

[@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