[Mini Web Project] Background Changer

❗️ 요구사항

• 랜덤한 Hex color code를 생성하는 함수 작성하기(직접 작성해보세요.)
• 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기

추가사항(개인)

• 버튼을 클릭할때 마다 두 가지 색을 출력하여 그라데이션 효과를 추가해봤다.
  
  

💡 JS 코드

const h1 = document.querySelector("h1");
const body = document.querySelector("body");
const button = document.querySelector("button");

function hexCode() {
  let result = "#";
  let result2 = "#";
  let hexNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
  
  for (let i = 0; i < 6; i++) {
		let chosenColor = hexNumber[Math.floor(Math.random() * hexNumber.length)];
		result += chosenColor;
	}
  
  for (let i = 0; i < 6; i++) {
		let chosenColor2 = hexNumber[Math.floor(Math.random() * hexNumber.length)];
		result2 += chosenColor2;
	}
  
  body.style.background =`lineargradient(toright,${result},${result2})`;
  h1.textContent = `HEX COLOR: ${result}, ${result2}`;
  
  button.addEventListener("click", hexCode);
}

hexCode();

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