At 4pm, I was off work, so, I started working on the project. This time, I’m supposed to build a page that changes certain properties on some elements using a some controls. What’s cool about this is that we are using CSS Variables.
If you don’t know what CSS Variables are, I suggest you read this article. It’s an easy read and explains it well.
Long story, short, CSS variables are like any variables in programming. You declare a variable name and then assign that a value. For example, say you use a specific color throughout your site. Instead of typing the HEX value of the color for every class, element, or id you want to apply it to, you can just create a CSS variable and use that instead.
What’s the difference? Well, if you want to change that color at some point. Instead of changing it for each element you applied the color to, you can just change the value on the variable instead.
Here’s how you would define and use the variable.
As you can see, it’s super easy and convenient to use.
For this project, I used CSS variables for 3 properties:
- padding for the image
- blur for the image
- color for the image background and heading font
I created controls for each property – range controls for the first 2 and a color picker for the 3rd. I also had to use a custom attribute called
data-unit for the blur and padding. This attribute holds the string
px for pixels. I’ll explain later why we need this.
On the JS side, we had to listen for changes in the contols. If there are any changes, we grab the values and then send that to our function that sets the value for the specific property that we picked.
blur both need
pxwhen setting values & since the input values we grab through our listener are only numbers, we need to append that
px to set the correct values to our property.
This whole project took me about 1 hour and 30 minutes. I still had to peek once in a while on the video but I would say that I was able to work on this about 80-85% on my own.
So, that’s it for Day 4. Looking forward to Day 5.
Make sure to check out my project. I put this one on codepend because there are inputs. I’m paranoid because of a podcast that I listened to talking about injections. I need to learn more about that before I am comfortable with putting projects with input fields on my site.