Day03 of #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



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;
}'--element-height', height + 'px')

Setting a new CSS property:

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

Here is the JavaScript code:

const img = document.querySelector('.img');
const inputs = Array.from(document.querySelectorAll('input'));var handleUpdate = function(e){
// = `blur(${this.value}px)`;
if( === "spacing"){'--spacing', this.value + 'px')
}else if ( === "blur") {'--blur', this.value + 'px')
}else {'--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
  •‘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