#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).

CSS

  • :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

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.dataset.*

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

 

Advertisements

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