#JavaScript30 – Day 03

On day 3, we played with some CSS and JavaScript to create a set of sliders that control the frame of the photo on the page, the blur of the photo, and the color of the border (and the JS in the title).


  • :root – the document’s root element. That would be HTML.Working with HTML documents, there’s not much difference between using root or html. But, from what I can tell, there are other document types where using root would be a good option.
  • –base – I had no idea that ‘vanilla’ CSS had variables. We declared these variables inside of the :root styling to make them available to the entire document.
    I haven’t found any info that suggests it’s new to CSS3, which is even more surprising. Using variables is one of the many reasons I’ve enjoyed using Sass. Now, I have more basic CSS I can get better at using.


querySelectorAll returns a nodeList of all elements that match the query. nodeLists don’t have very many properties, and a limited number of functions you can perform on them. We don’t really talk about it until day 4, but you can convert a nodeList into an array if needed.


This targets the data attributes referencing a data-* element.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s