Date: 05/03/2020
I loved this Painel! 😍 It's beautiful! 💪
I researched, learned and understood nice things about flex
property doing this exercise! If you wanna know more and see some code example about this you can read my studies and notes about it.
Here, Wes used the JavaScript to show the words were hidden. He used the toggle()
method, which I had never used before.
Accordding to MDN:
The
toggle()
method of the DOMTokenList interface removes a given token from the list and returnsfalse
. If token doesn't exist it's added and the function returnstrue
.
Here we have the function coded by Wes to show the hidden words when we click on image:
function toggleOpen() {
this.classList.toggle('open');
}
According with we read before about toggle()
method, this function verifies if the class open
exists or not in the classList
of that element, which is being verified:
- If the class
open
exists on theclassList
, this class is removed from the list and returnsfalse
. - If the class
open
NOT exists on theclassList
, theopen
class is added in the list and returnstrue
.
Learn about it is really funny! 😊💖
You can see final result here. 😃😉😍
That's all folks! 😃
Thanks WesBos to share this with us! 😊💖
written by @vanribeiro.