2022.05.16 - javascript 퀴즈(5) / HEX CODE 배경 색 랜덤 변경

/*

  다음과 같은 조건을 만족하는 화면을 만들어 주세요!
  
  📌 버튼 클릭시 랜덤한 HEX CODE가 배경 색으로 변경되어야 합니다.
  📌 현재 HEX CODE가 <p> 태그의 텍스트로 표시되어야 합니다.

*/

[ html ] 

<div class="wrapper">
  <p>HEX CODE: #3474FF</p>
  <button>Change Color</button>
</div>

[ CSS ] 

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #3474FF;
}

p {
  font-size: 50px;
}

button {
  font-size: 20px;
  padding: 10px;
  border-radius: 6px;
}

[ JS ] -> html, css는 건들지말고, js만 변경하여 코드 작성 

/*

  다음과 같은 조건을 만족하는 화면을 만들어 주세요!
  
  📌 버튼 클릭시 랜덤한 HEX CODE가 배경 색으로 변경되어야 합니다.
  📌 현재 HEX CODE가 <p> 태그의 텍스트로 표시되어야 합니다.

*/
const btn = document.querySelector("button");
const Wrapper = document.querySelector(".wrapper");
const text = document.querySelector("p");


btn.addEventListener("click", function(){
  const arr = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
  let code = "#";
  for(let i=0; i<6; i++) {
    const random = Math.floor(Math.random() * arr.length);
    code += arr[random]; 
  }
  Wrapper.style.backgroundColor = code; 
  text.textContent = "HEX CODE : " + code;
  
});

==> js 풀이

1. 버튼, 배경색을 변경할 wapper 부분, 글자를 변경할  p 태그를 각각 변수로 선언

2. btn (버튼) 클릭시 실행될 함수를 작성한다.

3. hex code 가 랜덤으로 생성될 수 있도록 숫자0~1, 알파벳a~f 를 담아 배열을 만들어준다.

4. hex code 에 필수로 들어가는 "#" 을 선언하고

5. 0~6개의 코드가 랜덤하게 반복되도록 btn 함수안에 반복문 작성 ( 이때, math.floor 로 소수점 이하를 버리고 정수로 만들어준다.)

6. code("#") 과 random 숫자+알파벳 더한 결과를 더하기 할당 연산자(+=)로

오른쪽 피연산자의 값을 변수에 더한 결과를 다시 변수에 할당한다.

7. 나온 랜덤 결과값으로 배경색을 변경할 수 있게 style 적용하고

8. 나온 랜덤 결과값으로 textcontent를 통해 텍스트를 바꿔준다.