Day03 of #100DaysOfCode

#100DaysofCode

Hii folks 🙌

Today I have learned 3rd Chapter of JavaScript30 which is CSS variables.

Also, I am working parallelly on my Youtube clone app - Building backend in Django.

Project 03: Playing with CSS Variables

Source: https://javascript30.com

Learnings:

In this particular lesson, I have learned to modify the CSS with JavaScript code. It was really fun learning.

Setting the CSS variable and updating the variable with JS

html {
/* Will be overridden by JS */
--element-height: 20px
}.my-element {
height: var(--element-height);
width: 40px;
color: #9b806b;
}myElement.style.setProperty('--element-height', height + 'px')

Setting a new CSS property:

<div id="ex1">Some text.</div>var div = document.getElementById('ex1');
var setprop = div.style.setProperty("background-color", "yellow");

Here is the JavaScript code:

const img = document.querySelector('.img');
const inputs = Array.from(document.querySelectorAll('input'));var handleUpdate = function(e){
console.log(this.name)
//img.style.filter = `blur(${this.value}px)`;
if(this.name === "spacing"){
img.style.setProperty('--spacing', this.value + 'px')
}else if (this.name === "blur") {
img.style.setProperty('--blur', this.value + 'px')
}else {
img.style.setProperty('--color', this.value)
}}
inputs.forEach(el => el.addEventListener('change', handleUpdate));
inputs.forEach(el => el.addEventListener('mousemove', handleUpdate));

TIL (Today I Learned)

  • forEach
  • addEventListener — change, mousemove
  • CSS variable — padding: var($ — spacing);
  • handle CSS variable value with javascript
  • element.style.setProperty(‘property name’, value)

That is all for Day03 ✅

Thanks for reading, See you tomorrow!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store