[javascript] JavaScript eventListener 실습1 - 랜덤 색상 생성기

eventListener를 통해 버튼을 클릭 시 색상이 랜덤으로 변화되도록 코드로 구현해보자

      1) - [ ] 버튼을 클릭하면 배경 색상이 변경됩니다.
      2)   - 문서 전체의 색상을 변경하려면 어떤 태그의 배경 색이 변해야 될까요?
      3)   - 버튼을 "클릭" 했을 때, 색상이 변경되려면 어떤 이벤트가 필요한가요?
      4) - [ ] 버튼을 클릭했을 때 h2 태그의 색상 값이 변경됩니다.
      5)    - h2 태그의 content(내용)을 변경하려면 어떤 속성값을 변경해야 할까요?
      6) - [ ] 색상을 나타내는 방식에는 헥스 코드(#RRGGBB)와 10진 코드 (R,G,B) 두 가지 방식이 있습니다.
      7)    - 이 프로젝트에서는 10진 코드(r, g, b) 방식을 사용합니다.
      8)    - rgb(r, g, b)에서 red, green, blue 숫자 범위는 0이상 255이하 입니다.
      9)      즉, 각 색상마다 0 ~ 255 사이의 랜덤한 값을 생성해야 합니다.

 

먼저 전체 html, css코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자

 

/* 방법1 */
    let color = document.querySelector('h2');
    let button = document.querySelector('button');
    let body = document.querySelector('body');
    
    button.addEventListener('click', function(e){
    	let red = Math.floor(Math.random() * 256);
    	let green = Math.floor(Math.random() * 256);
    	let blue = Math.floor(Math.random() * 256);
    	body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
    	color.innerText = `rgb(${red}, ${green}, ${blue})`;
    })

 

 

/* 방법2
    const colorBtn = document.querySelector('button');
    const bodyColor = document.querySelector('body');
    const colorValue = document.querySelector('h2');

    const randomColor = (()=> {
    	bodyColor.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
    })

    colorBtn.addEventListener('click',()=>{
    	const bodyColor = document.querySelector('body');
    	randomColor();
    	colorValue.textContent = bodyColor.style.backgroundColor;
    })
*/

 

 

 

/* 방법3 (가장 좋은 예시)
    const button = document.querySelector('button');
    const h2 = document.querySelector('h2');

	//  버튼을 "클릭"했을 때
	button.addEventListener('click', function () {
		// red, green, blue 변수에 각각 0 ~ 255 범위의 랜덤한 숫자 생성
		// 0 <= random < 1
		let r = Math.floor(Math.random() * 256);
		let g = Math.floor(Math.random() * 256);
		let b = Math.floor(Math.random() * 256);

		const newColor = `rgb(${r}, ${g}, ${b})`; 
		// rgb(red, green, blue) 형태로 문자열을 newColor 변수에 저장하기

		document.body.style.backgroundColor = newColor; // 배경색 변경하기
		h2.innerText = newColor; 
		// newColor 변수에 저장한 rgb() 컬러 코드를 h2의 내용(content)으로 바꾸기
	});
*/