I had 1 hour less sleep today because of Daylight Savings Time. However, that didn’t stop my excitement to work on project number 3 on javascript30.com. Unfortunately, I had to wait 10 long hours to do so. Work was on my way.
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.
Image from https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d
As you can see, it’s super easy and convenient to use.
The Project
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.
Since padding and 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.
Codepen for the project
I had 1 hour less sleep today because of Daylight Savings Time. However, that didn’t stop my excitement to work on project number 3 on javascript30.com. Unfortunately, I had to wait 10 long hours to do so. Work was on my way.
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.
Image from https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d
As you can see, it’s super easy and convenient to use.
The Project
For this project, I used CSS variables for 3 properties:
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-unitfor the blur and padding. This attribute holds the stringpxfor 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.
Since
paddingandblurboth needpxwhen setting values & since the input values we grab through our listener are only numbers, we need to append thatpxto 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.
Codepen for the project