9.02 AI SCHOOL - 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 3편

// > 5강 배운 내용을 토대로 웹사이트 적용

var hex = document.getElementById('hex');
var btn = document.getElementById('btn');

//console.log(hex);
//console.log(btn);
/*
btn.addEventListener('click', function(){
//console.log("클릭");

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , "a", "b", "c", "d", "e", "f"];
var color = '#';

for (var i = 0; i < 6; i++) {
	var random = Math.floor(Math.random() * arr.length);

	color += arr[random];


}
//console.log(color);  //for 밖이면 완료된 조합만 보여준다.
document.body.style.backgroundColor = color;   // 중요!!

//js에서 html을 삽입
hex.textContent = color;

});
*/

btn.addEventListener('click', createColor);

function createColor(){
//console.log("클릭");

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , "a", "b", "c", "d", "e", "f"];
var color = '#';

for (var i = 0; i < 6; i++) {
	var random = Math.floor(Math.random() * arr.length);

	color += arr[random];


}
//console.log(color);  //for 밖이면 완료된 조합만 보여준다.
document.body.style.backgroundColor = color;   // 중요!!

//js에서 html을 삽입
hex.textContent = color;

}// 기능차제를 함수로 만들어서 인자로 전달. 이방법이 많이 씀. 따로 함수만들어서 함수명을 전달.

//hex 코드 조합 #000fff;
//숫자 : 0~9
// 알파벳 : a~f
//# 제외하고 6글자 조합 숫자+알파벳

//# + 0 + #0
//#0 + f =#0f;
//#0f + a = #0fa;
//#0fa + a = #0faa
//#0faa + b = #0faab
//#0faab + c =