Css Varaibles

#javascript30

by polaszk

HTML

<h1>Primary <span>Title</span></h1>

<label for="spacing">Spacing</label>
<input type="range" id="spacing" min="0" max="20" value="0">
<br>
<label for="blur">Blur</label>
<input type="range" id="blur" min="0" max="5" value="0">
<br>
<label for="border-color">Border Color</label>
<input type="color" id="primary-color" value="#c72723">

<figure>
  <img src="https://wallpapercave.com/wp/ukCqkwo.jpg" alt="img">
</figure>

CSS

:root {
  --primary-color: #c72723;
  --spacing: 0;
  --blur: blur(0);
}

figure img {
  width: 300px;
  border: var(--spacing) solid var(--primary-color);
  filter: var(--blur);
}

h1 span {
  color: var(--primary-color);
}

JavaScript

let root = document.documentElement;
let inputs = document.querySelectorAll('input');
let changeStyles = (e) => {
  switch (e.target.id) {
    case "primary-color":
      root.style.setProperty('--primary-color', e.target.value);
      break;
    case "blur":
      root.style.setProperty('--blur', 'blur(' + e.target.value + 'px)');
      break;
    case "spacing":
      root.style.setProperty('--spacing', e.target.value + 'px');
      break;
    default:
      break;
  }
};

for (let input of inputs) {
  input.addEventListener('change', changeStyles);
}