JavaScript 버튼 클릭 시 이미지 추가, 랜덤 그라데이션 컬러 변경

결과물

• 버튼
• 랜덤한 그라데이션

HTML

 

<div id="background">
	<button class="clickBtn">Give me color</button>
</div>

• 이번에도 HTML 내용은 별것 없음
• Color 라고 되어있지만 javscript code 만 살짝 변경한다면 이미지 변경도 가능

해당 결과물을 제작하기 위해 알아야 할 것 3가지
1. linear-gradient() - 그라데이션을 만들기 위한 background 속성
2. Math.floor() - 올림, 내림, 반올림 중 내림 하는 함수
3. Math.random() - 랜덤한 숫자를 뽑아내는 함수

 

JavaScript (Change Gradient)

const colorPacks = ["red","green","blue","black","white","yellow","gray","aqua","antiquewhite","brown"]
// 이미지 배열
// "#11111" 로 작성하여도 상관이 없음

const colorBtn = document.querySelector(".clickBtn");
// colorBtn 변수에 HTML button 담기

colorBtn.addEventListener("click", colorChange);
// colorBtn click 시 colorChange 함수 호출

function colorChange(){
	const choseColor = colorPacks[Math.floor(Math.random() * colorPacks.length)];
	// 1. Math.random 사용시 0 이하의 소수점이 출력
	// 2. colorPacks의 배열길이 즉 0~9 = 10을 곱해줄 것
	// 3. 1~10 랜덤한 소수점자리가 있는 숫자 출력
	// 4. 반올림 할 경우 11이 나올 수 있어 해당 값을 Math.floor 내림
	// 5. choseColor의 값은 colorChange() 함수가 호출될때마다 red, gray 등 랜덤한 텍스트 획득
    
	const choseColor2 = colorPacks[Math.floor(Math.random() * colorPacks.length)];
	// 1. 그라데이션은 앞 뒤 값이 필요하기 떄문에 같은 방식으로 하나의 변수를 더 받아줌
	
	const bgColor = document.querySelector("#background");
	// 1. background 클래스를 가진 태그를 받아온다
    
	bgColor.style.background = `linear-gradient(90deg,${choseColor},${choseColor2})`;
	// 1. bgColor의 css 속성 background = linear-gradient() 를 버튼 눌릴때마다 조작
}

 

JavaScript (Create Img)

const imgPacks = ["0.jpg","1.jpg","2.jpg"]
// 위와 같은 방법으로 이미지를 랜덤하게 변경 하기 위한 이미지 배열을 만들어 준다.
// 해당 방식은 HTML에 따로 <img src="0.jpg"> 처럼 추가로 작성할 필요가 없음

function randomCreateImg() {
	const choseImg = imgPacks[Math.floor(Math.random() * imgPacks.length)];
	// 랜덤 값 * 이미지 배열의 길이
	// imgPacks.length = 3 (0, 1, 2) 이므로 1.84578435 ~3.1231253 라는 1~3 이 포함된 숫자를 얻음
	// 소수점을 Math.floor 로 내림하여 제거

	const bgImage = document.createElement("img");
	// HTML 내부에 img 속성을 가진 태그가 없으니 document 안에 img 속성을 새롭게 만들어준다.

	bgImage.src = `img/${choseImg}`;
	// 새롭게만들어진 img의 src를 지정해준다
	// 현재 프로젝트 내부 img 폴더 및 0~2.jpg가 존재하여야 한다

	document.body.appendChild(bgImage);
	// appendChild는 body 안에 새로운 요소를 만든다
	// 즉, body 내부에 <img src = "img/0~2.jpg"> 태그를 만들어 버린다.

}

colorBtn.addEventListener("click", randomCreateImg);

 

CSS

#background {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(90deg, red, blue);
	display: flex;
	justify-content: center;
	align-items: center;

}

.clickBtn {
	width: 100px;
	height: 50px;
}