CSS variables — JavaScript30

Amazing exercise which solved a problem I encountered few months back…

Day three of JavaScript 30 was dedicated to CSS variables (heh, I had no idea those were a thing). As your moving the range the properties change.

In the first exercise, we learned about data-* and this time we learned a new thing complimenting this property — dataset. When called on element, it returns an object of all data properties on that element.

Another thing that was reminded to me is that querySelectorAll returns a Node List, not an Array. Somehow this always slips my mind. The difference between Node List and Array is that Node List does not have all the methods that are supplied to Array — for example it isn’t possible to call map() on returned Node List of querySelectorAll as this is an Array method. But we can use forEach().

Another new thing as CSS variables — which seem pretty straightforward. They can be defined like this:

:root {
--property: value;
--spacing: 10px;

We can they later change these values with CSS. This video however showed me one nice trick that helped me solved one problem I had few months back. I created a small app where you can change a background colour with three ranges. The problem was it only changed colour once you clicked, not on change. So now I can go back and make it work like it was intended.

Overall, nice simple exercise and yet again, I learned something new!

Until next time and happy coding!