Amazing exercise which solved a problem I encountered few months back…
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
Another new thing as CSS variables — which seem pretty straightforward. They can be defined like this:
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!