junclemente / j30-cssvar

Project: CSS Variables

About

I've been doing some form of web development for about seven years or so... mostly basic HTML, CSS and JavaScript. I've taken two of Udacity's nanodegree programs: Front End and Full Stack Web Developer. I have learned a lot from those courses but I know that there are situations and use cases that I haven't seen or been exposed to.

I recently heard about Wes Bos and also his 30 Day JavaScript challenge. It's a free course (at least during the writing of this) and it can be found here: javascript30.com

This project is a practice in writing vanilla JavaScript and to learn about other use cases.

View Project

Click here to view the live project.

Project takeaways

• Create CSS variables using :root { --var-name: value }
• Create custom html attributes using data-*, ie. data-sizing
• Access attribute with JavaScript using this.dataset.*, ie. this.dataset.sizing
• Use document.documentElement.style.setProperty to change value of CSS variable