JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 ver.

▶ JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 ver

• HTML

<div class="container">
   <div class="area">
      <div class="box"></div>
      <input type="text" class="box-color" onchange="colorChange(this)">
   </div>
   <div class="area">
      <div class="box"></div>
      <input type="text" class="box-color" onchange="colorChange(this)">
   </div>
   <div class="area">
      <div class="box"></div>
      <input type="text" class="box-color" onchange="colorChange(this)">
   </div>
   <div class="area">
      <div class="box"></div>
      <input type="text" class="box-color" onchange="colorChange(this)">
   </div>
   <div class="area">
      <div class="box"></div>
      <input type="text" class="box-color" onchange="colorChange(this)">
   </div>
</div>

<p>
   현재 transition-duration : <span id="print1">0</span>초
<br><br>

   transition-duration 변경 :
   <input type="number" id="input1">
   <button id="btn1" onclick="changeTd()">변경</button>

<br><br>

   <button id="clearBtn" onclick="resetBtn()">초기화</button>
</p>

• JavaScript

// 색 출력 영역

// 요소를 얻어와서 변수에 저장
const container = document.getElementsByClassName('container')[0];
const area = document.getElementsByClassName('area');
const box = document.getElementsByClassName('box');
const boxColor = document.getElementsByClassName('box-color');

// JS로 CSS 추가하기

// 1) 클래스가 container인 요소에 [display : flex] 추가
container.style.display = 'flex';

// 2) 클래스가 area인 요소에
//    [높이 170px, 너비 150px, 테두리 1px 실선 검정색]
//    [display : flex, main-axis 방향 : 열(세로)] 추가
for(let item of area){
    item.style.height = '170px';
    item.style.width = '150px';
    item.style.border = '1px solid black';
    item.style.display = 'flex';
    item.style.flexDirection = 'column';
}

// 3) 클래스가 box인 요소에 [높이 150px, 아랫쪽 테두리 1px 실선 검정색] 추가
for(let item of box){
    item.style.height = '150px';
    item.style.borderBottom = '1px solid black';
}

// 4) 클래스가 box-color인 요소의 [테두리와 outline을 없애기] 추가
for(let item of boxColor){
    item.style.border = 'none';
    item.style.outline = '0';
}

// 클래스가 box-color인 요소의 입력된 값이 변했을 때
// 위에있는 클래스가 box인 요소의 배경색을 변경
// + 입력된 input 요소의 글씨색도 변경
for(let item of boxColor){

    item.addEventListener('change', function(){

        item.previousElementSibling.style.backgroundColor = this.value;

        this.style.color = this.value;
    });
}

// 아이디가 btn1인 버튼 클릭 시
// 아이디가 input1인 요소에 작성된 값 만큼의 transition-duration을
// 클래스가 box인 모든 요소에 추가
// + 아이디가 print1인 요소의 내용을 아이디가 input1인 요소에 작성된 값으로 변경
document.getElementById('btn1').addEventListener('click', function(){

    for(let item of box){

        item.style.transitionDuration = document.getElementById('input1').value + 's';
    }

    document.getElementById('print1').innerText = document.getElementById('input1').value;
});

// 아이디가 clearBtn인 버튼 클릭 시
// 클래스가 box인 모든 요소의 배경색을 없애고
// 클래스가 box-color인 요소에 작성된 값(+글자색)도 없애기
document.getElementById('clearBtn').addEventListener('click', function(){

    for(let i=0; i<box.length; i++){

        box[i].style.backgroundColor = '';
        boxColor[i].value = '';
        boxColor[i].style.color = '';
    }

    document.getElementById('print1').innerText = '';
    document.getElementById('input1').value = '';
});

See the Pen 24-12-25 js review-pr6 by Namu (@Namu-the-sans) on CodePen.