Day 5 was more about CSS and interacting with classes in the script section. This program is teaching me mostly how much CSS can do, and how much I have to learn about it. The script section of this assignment was not bad, it mostly used a couple of eventListeners and forEach loops to access and alter needed HTML elements. For a while we were hung up on trying to make it work with just one listener, but after that, we made it to a point where we wanted to actually change the way the solution functioned slightly.
If you note in the video above, when one panel is clicked, it expands. If another is clicked, that expands as well. Flex boxes are used to allow for all panels to be open at the same time. That allows viewers to see the entire content at once if desired. A nice function for reading, less nice aesthetically. We ended up adding in a line of code to have the result function slightly differently (see video below). Now, when one panel is clicked, it opens. If another panel is clicked, the previously opened one will close so only the last panel clicked remains open. This makes it impossible to read all the content at once, but it does leave a smoother feel where text is not crammed together.
The Active Class
Today’s new concept for me was the active CSS pseudo-class. We were playing around with open and setting visibility, but it turns out there was another option: active. According to MDN Web Docs:
:activeCSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
/* Selects any <a> that is being activated */
:activepseudo-class is commonly used on
<button>elements. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated
This was an interesting little tidbit to encounter. We set the property on our panels in our style.css file (left) and called it on line 11 in our script file (right). How it works, basically, is that active is used to select an element when it is in its ‘activated’ state (for us, a click or a transitionend event). The change is witnessed only during the active period. For another example, if you had a button, you could click it and while it was clicked the color turns purple. But once you release, it returns to its original styling. The ordering of pseudo-classes does matter, so be careful of that when adding them into your code. A hover class will override an active class, so if we were to add hover in, we would want to place it above the active class.