Javascript30 - Playing WITH CSS VARIABLES AND JS

Playing WITH CSS VARIABLES AND JS

---

 

요구사항

1. 사진의 경계, 블러, 경계의 색을 조절할 수 있어야 한다.

2. 경계,블러는 마우스 클릭후 이동하는 중에도 변해야 한다.

---

1. HTML 구성

- 컨트롤 박스 안에 패딩,블러,색상 조절하는 부분이 있다.

- 가로 정렬을 위해 span태그 사용

    <h1>Update CSS Variables with <span class="JS">JS</span></h1>
    <div class="control-box">
        <span class="spacing">
            Spacing:
            <input type="range" value="20" min="0" max="100">
        </span>
        <span class="blur">
            Blur:
            <input type="range" value="0" min="0" max="20">
        </span>
        <span class="base-color">
            Base color
            <input type="color" value="#018DED">
        </span>
    </div>
    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

 

2. Javascript 구성

- 이벤트리스너로 mousemove,click 이벤트 감지해서 setSpacing 호출, 클릭후 움직이면 변하는 인풋값을 mousemove가 감지한다.

- setSpacing 함수는 슬라이드바 클릭으로 변한 인풋값을 불러와서 경계의 색과 크기, 블러, JS의 색을 변경한다.

    <script>
        const inputs = document.querySelectorAll('.control-box input');
        const controlBox = document.querySelector('.control-box');
        const spacing = document.querySelector('.spacing');
        const spacingInput = spacing.querySelector('input');
        const baseColor = document.querySelector('.base-color');
        const basecolorInput = baseColor.querySelector('input');
        const blur = document.querySelector('.blur');
        const blurInput = blur.querySelector('input');
        const img = document.querySelector('img');
        const JS = document.querySelector('.JS');
        function setSpacing() {
            img.style.border=`${spacingInput.value}px solid ${basecolorInput.value}`;
            img.style.filter = `blur(${blurInput.value}px)`;
            JS.style.color = `${basecolorInput.value}`;
        }
        controlBox.addEventListener('click',setSpacing);
        inputs.forEach(input => input.addEventListener('mousemove', setSpacing));
    </script>