Javascript로 카운터 만들기

카운터 만들기

구현과정

1.HTML

   <main>
        <h1>Counter</h1>
        <p class="value">0</p>
        <div class="button-container">
            <button class="btn decrease">Decrease</button>
            <button class="btn reset">Reset</button>
            <button class="btn increase">Increase</button>
        </div>
   <main>

2.CSS

   main {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        h1 {
            text-align: center;
            font-size: 60px;
            margin-bottom: 20px;
        }

        p {
            text-align: center;
            font-size: 80px;
            margin: 0;
            margin: 5px 5px;
            font-weight: bold;
        }

        button {

            width: 100px;
            height: 30px;
            border-style: 1px solid black;
            background-color: white;
            border-radius: 5px;
            margin: 10px 5px 10px 5px;
        }

카운터를 만들기 위한 HTML/CSS 작업을 마쳤습니다. 그 다음은 버튼을 누르면 카운터가 증가하거나 감소하고, 카운터가 증가하거나 감소할 때 카운터의 폰트 색상이 달라질 수 있도록 Javascript를 통해 코드를 작성해보도록 하겠습니다.

3. Javascript

  const counter = document.querySelector('p');
  const increase = document.querySelector('.increase');
  const decrease = document.querySelector('.decrease');
  const reset = document.querySelector('.reset');

  let count = 0;

  increase.addEventListener('click', function () {
    count += 1;          
    counter.innerText = count;
    counter.style.color = "green"
                })

  decrease.addEventListener('click', function () {
    count += -1;
    counter.innerText = count;
    counter.style.color = "red"
                })

  reset.addEventListener('click', function () {
    count = 0;
    counter.innerText = count;
    counter.style.color = "black"

                })

카운터 값을 맨 처음에 0으로 설정하여 둔 다음 querySelector를 통해서 동작하는데 필요한 요소를 찾습니다. 그리고 그 다음은 click 이벤트 리스너를 통해서 카운터가 증가하거나 감소 또는 0으로 카운터 재설정 될 수 있도록 합니다.
그리고 innerText를 사용하여서 바뀐 count 값이 내용에 반영될 수 있도록 합니다.

innerText와 TextContent의 차이점은?

• innerText
  사람이 읽을 수 있는 요소만 처리합니다.
  특정 노드에 렌더링 된 텍스트를 읽어올 때 유용하며 특별히 스타일 적용이 없다면 성능상 적합하지 않습니다.
• textContent
  script와 style 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 해당 노드의 raw text를 얻음으로써 의도한 대로 가공할 수 있습니다. 성능과 보안에 강점이 있어서 사용하는 것을 권장합니다.

forEach문을 사용해 버튼을 누를 때 counter가 증가하고 감소하는 기능을 구현해보았습니다.

HTMLCollection과 NodeList는 모두 유사배열 객체이면서 이터러블하기 때문에
배열에서만 사용되는 메서드인 forEach문을 NodeList에도 적용할 수 있습니다.

        let count = 0;

        const value = document.querySelector("p");
        const btns = document.querySelectorAll(".btn");

        btns.forEach(function (btn) {
            btn.addEventListener("click", function (e) {
                const styles = e.currentTarget.classList;
                if (styles.contains("decrease")) {
                    count--;
                } else if (styles.contains("increase")) {
                    count++;
                } else {
                    count = 0;
                }
                if (count > 0) {
                    value.style.color = "green"
                }
                if (count < 0) {
                    value.style.color = "red"
                }
                if (count === 0) {
                    value.style.color = "black"
                }
                value.textContent = count;
            });
        });

forEach문을 사용하여 지정된 btn셀렉터와 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 NodeList를 순서대로 반환합니다. 그리고 반환되는 NodeList중 이벤트 핸들러와 연결되어 있는 모든 클래스 목록을 styles라는 변수명으로 지정하고 contains를 통해서 해당 버튼이 눌릴 때마다 그에 맞는 기능이 작동 될 수 있도록 합니다. 또한 버튼 기능과 마찬가지로 버튼 기능에 따라 달라지는 색상 구현도 조건문으로 코드를 작성하였습니다.

target과 currentTarget의 차이점은?

const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
            console.log(event.target)
            // 여기서 target이 가리키는 것은 <button class="btn-first" type="button">버튼1</button> 
            // 이벤트가 발생한 바로 그 요소 즉 button을 가리킨다. 
            console.log(event.currentTarget);
            // <article class="parent">
            //     <ol>
            //         <li><button class="btn-first" type="button">버튼1</button></li>
            //     </ol>
            // </article>
            //currentTarget이 가리키는 것은 이벤트를 가진 요소 즉 article을 가리킨다.
        })

• target
  실제 이벤트가 발생하는 요소를 가리킵니다.
• currentTarget
  이벤트 리스너가 달린 요소를 가리킵니다.