[jQuery] 연습문제 | 입력받은 색상으로 변하는 박스 만들기 - transition box

 

지금까지 배운 jQuery를 사용해서 사용자의 입력값에 따라
박스의 색이 변하는 transition-box를 구현해보자
단계별로 풀어보자

 

 

1. 입력값에 따라 박스 색이 변하는 기능

• 색상명을 입력하고 버튼을 누르면 박스색이 입력값에 따라 바뀐다.

 

 

 

🎊코드 확인하기

 

<div class="area" id="box1"></div>
    <input type="text" class="inputColor" id="input1" /><br />
    <button type="button" id="btn1">색 변경</button>

    <script>
      // 첫번째 박스
      $("#btn1").on("click", function () {
        const color = $("#input1").val();
        $("#box1").css("backgroundColor", color);
      });
    </script>

 

 

2. 입력값에 따라 색이 변하는 여러개의 박스

• 색상명을 모두 입력하고 버튼을 누르면 모든 박스색이 한번에 바뀐다.
• 힌트! 배열을 사용할 것

 

🎊코드 확인하기

    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>

    <div>
      <input type="text" class="inputColor input2" />
      <input type="text" class="inputColor input2" />
      <input type="text" class="inputColor input2" />
      <input type="text" class="inputColor input2" />
      <input type="text" class="inputColor input2" />
      <input type="text" class="inputColor input2" />
    </div>
    <button type="button" id="btn2">색변경</button>

    <script>
      const arrdiv = $(".div2");
      const arrinput = $(".input2");
      $("#btn2").on("click", function () {
        for (i = 0; i < arrdiv.length; i++) {
          let color = $(arrinput[i]).val();
          console.log(color);
          $(arrdiv[i]).css("backgroundColor", color);
        }
      });
    </script>

 

 

3. 입력값에 따라 색이 변하는 여러개의 박스2

• 색상명을 입력할때마다 박스색과 input 입력창의 색이 변한다
• 힌트! 이벤트 "keyup",
• input이 입력된 해당 박스만 색이 바뀌어야 한다: 이전 요소를 선택하는 prev() 사용하기

 

 

🎊코드 확인하기

 

<div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <div class="box">
      <div class="area div3"></div>
      <input type="text" class="inputColor input3" />
    </div>
    <script>
      $(".input3").on("keyup", function () {
        let color = $(".input3").val();
        $(this).prev().css("backgroundColor", color);
        $(this).css("borderColor", color);
      });
    </script>