[JavaScript 30일 챌린지] : 3일차

---

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

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

    .hl {
      color: var(--base);
    }

CSS에 이런 코드를 주고

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

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }
    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

JavaScript에 이렇게 코드를 적어줬다.

불러온 그림의 크기를 조절할 수 있고 블러를 설정할 수 있는데 아직 베이스 컬러를 해결하지 못 했다. 완료 코드를 작동시켜도 베이스 컬러 조절이 안 되는데 방법은 따로 찾아봐야 할 것 같다.