CSS Variables and JS Project

Hosted Project

https://romeojeremiah.github.io/JavaScript30-03-CSS-Variables/

GitHub Source Files

https://github.com/romeojeremiah/JavaScript30-03-CSS-Variables

Project Objective

The objective of this JavaScript Project is to wire up an HTML document with an image that is manipulated with different input range selectors.

JavaScript Used

• JavaScript core (e.g. functions, Math object, DOM API)

My Personalize Summary

Level of Difficulty

This project wasn't difficult. It only uses a few lines of JavaScript code but it taught me how to set CSS Variables and then select them using JavaScript.

New Things Learned or Refreshed

Using CSS Variables (Custom Properties) –  Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). Updating CSS Variables with JavaScript  Using the CSS filter property  – The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. HTMLElement.dataset  – The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.  It is a map of DOMString, one entry for each custom data attribute.  Note that the dataset property itself can be read, but not directly written.  Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.   Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar: Element: mousemove event – The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. Other notes – document.documentElement selects the entire HTML document.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the JS content in the index.html file.
3. Delete the custom CSS variables.
4. Implement the JavaScript code in your own file.
5. If you think you need to see a video solution first, be sure to sign up to Wes Bos' JavaScript course by following the link below.
6. Share a link to your finished project in the comments section below so we can all see and comment on it!

What You Should See

1. Visit the hosted github project to see this project in action.

Need to see the video solution for this project?

Get Wes Bos' JavaScript30 Course now!