[JavaScript30/Day-3] Update CSS Variables with JS

HOW?

1. class.controls에 있는 input 요소들 받아오기
2. 각 요소들에 change 이벤트가 일어날 때마다 eventHandler 함수 호출
3. eventHandler 함수에서 CSS 속성 변경

Solution

<script>
    const inputs = document.querySelectorAll('.controls input');
    const img = document.querySelector('img');

    function handleupdate(){
      const suffix = this.dataset.sizing || '';
      img.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach( input => input.addEventListener('change', handleupdate));
    inputs.forEach( input => input.addEventListener('mousemove', handleupdate));
</script>

 <style>

    :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    /*
      misc styles, nothing to do with CSS variables
    */


    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }

</style>

 

TIL (Today I Llearned🎉)

• setProperty
  : 사용방법 -> setProperty(css 속성, 값)
• change 이벤트와 input 이벤트
  : change는 input 요소에서 value가 변경되면, input은 input요소에서 값이 입력될 때마다!