Continuing on with the 50 in 50 Udemy course, the second project on the schedule is a set of four progress indicators with a 'Next' and 'Prev' button. It's the sort of indicator you would see on a multi-step form or that type of thing, and uses some neat JS code for the CSS changes.

Unlike the previous project there really wasn't much I could do with this project to make it unique, although I feel like the technique will definitely turn up in later sites I develop. Besides it was pretty instructive as-is.

For starters this project touched briefly on the topic of CSS variables, which I had not used previously. In this particular case, the variables hold the color values. So, rather than:

.sample-element {
background-color: #ffffff;
}

...the utilization of variables allows you to write¹:

:root {
--color-one: #ffffff;
--color-two: #000000;
}

.sample-element {
background-color: var(--color-one);
}

Granted that doesn't look more efficient; however when you have the same color appearing multiple times throughout the style sheet (as in this project), it does in fact become more practical to do it this way. It also greatly expedites matters if you decide to change your color scheme in a future iteration.

This project also introduced the concept of the Z-index (which determines 'layering' of different elements that appear one on top of another) and the "space-between" value for justifying content.

Finally, on the JS side of the project, there is a handy coding convention I hope to add to my own toolbox. In the sites that I've written so far (almost all as part of my pre-bootcamp web developing class), I've kept my work with the DOM localized to whatever part of the script I was working on at the time. For instance, if I wrote a function to update an <img> tag, I would select the object in question within that function.

In this project, however, the JS file starts off with a set of variables that are assigned document objects. The end result is the same of course, but I really liked the logical flow of getting all the DOM objects selected at once, up front, so that manipulation of them could be referenced by the variable name without having to go through the selection process inside the code block itself. It just looked cleaner.

Lastly, I wanted to highlight one other JS tidbit that was used in the Day 1 project as well as this one - node lists. When you have a series of elements with the same class (in this case, the four circles in the progress steps), you can use document.querySelectorAll() to get all of those items in one variable, which is returned as a node list. Operationally it's extremely similar to an array, so that it becomes a simple matter of stepping through the individual elements to manipulate them.

My Project: Progress Steps

¹:root defines the scope of the variables.