The Active Class: #JavaScript30- Day 5

In order to practice vanilla JavaScript and help land my first job as a software engineer, I am undertaking Wes Bos’ #JavaScript30 challenge. To view Day 1 and my overview of how and what #JavaScript30 is, go to my Practice Makes Permanent: #JavaScript30 — Day 1 post.

Solution result based on Wes Bos’ result

Altering Functionality

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.

An alternative interaction solution

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:

The :active CSS 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 */
a:active {
color: red;
}

The :active pseudo-class is commonly used on <a> and <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 <label>.

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.

Active class in CSS

This was just an intro to active class, and while I am excited to have learned a new property, I still feel I need to play around with it a bit more to let it absorb. I want to try calling it in different situations and pairing it with other CSS selectors (element, class or id) to see what happens and let this new functionality sink in. Over all, this was an interesting day with over-my-head CSS and pretty direct JavaScript (but with different options and paths available). If you want to check out the code, here’s my repo: 25 challenges to go!