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!