JS 연습문제 5 - 색깔 변경

▶ JS 연습문제 5 - 색깔 변경

• 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

// 색 출력 영역(style)

// 클래스명, 태그명, name속성값, querySelectAll() 같은 경우
// 요소를 얻어올 때 배열 형식으로 반환!!
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문 || 향상된 for문 : of
for(let item of area){
    // item == 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 요소의 글씨색도 변경
/* 
change : 포커스를 잃고나서 또는 엔터 입력 시,
         작성된 값이 이전과 다를 경우
input : 입력과 관련된 모든 행위
blur  : 포커스를 잃었을 때
*/
function colorChange(item){
    // 글자색 변경
    item.style.color = item.value; 

    // 배경색 변경
    // previousElementSibling : 이전 형제 요소
    item.previousElementSibling.style.backgroundColor = item.value;
}

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

    // 아이디가 input1인 요소에 작성된 값으로 transition-duration 변경
    for(let item of box){ 
        item.style.transitionDuration = input1 + 's';
        // transition-duration에 세팅되는 값은 초단위(s)
    }

    // 아이디가 print1인 요소의 내용을 아이디가 input1인 요소에 작성된 값으로 변경
    document.getElementById('print1').innerText = input1;
}

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

    // 방법 1) 향상된 for문
    for(let item of box){ // 배경색 삭제
        item.style.backgroundColor = '';
    }

    for(let item of boxColor){ // .box-color에 작성된 값 + 글자색 삭제
        item.value='';
        item.style.color = '';
    }

    // 방법 2) 일반 for문 사용
    /* for(let i=0; i<box.length; i++){
        box[i].style.backgroundColor = '';
        boxColor[i].value = '';
    }*/ 
    
   // transition-duration 값 초기화 
   document.getElementById('input1').value = '';
   document.getElementById('print1').innerText = '';
}

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