[Javascript] Background Changer

Background Changer

TODO

✏️ 랜덤한 Hex color code를 생성하는 함수 작성하기 (직접 작성해보세요.)

✏️ 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기

Day 1

• 위 이미지와 같은 페이지 만들기

Day 2

• 랜덤한 Hex color code를 생성하는 함수 작성하기 (직접 작성해보세요.)

Hex Code란?

0~9까지의 숫자와 A~F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드를 의미합니다.
예를 들면 000000, 3474FF 등 모두 유효한 Hex Code입니다. CSS에서는 Hex Code앞에 #를 붙여 색상값으로 이용할 수 있습니다.

예) #3474FF

Day 3

• 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기

---

script

function hex() {
  let code = "";			                    
  const POSSIBLE = "ABCDEF0123456789";	     

  for (let i = 0; i < 6; i++) {
    code += POSSIBLE.charAt(Math.floor(Math.random() * POSSIBLE.length));       
  }

  $background.style.backgroundColor = "#" + code;                                  
  const hexCode = "HEX COLOR : #" + code;
  $codeWrapper.textContent = hexCode;   

---

✏️ html과 css를 적용한 코드 👇

https://github.com/newsilver1028/Mini_Web_Project

✏️ 문제 출처

https://book.vanillacoding.co/starter-kit/step-4/interacting-with-webpages/background-changer