목표
버튼을 클릭할 때마다 배경색을 바꾸는 기능을 구현하기
원리
버튼을 클릭하면 클릭 이벤트가 발생한다. 클릭 이벤트에 대해 이벤트 헨들러를 등록을 한다. 이벤트 헨들러는 호출 될 때마다 색상코드가 들어가 있는 배열의 인덱스를 무작위로 가져온 후에 태그의 속성에 추가를 한다.
코드
HTML 코드
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<button>Give me color</button>
<script src="src/index.js"></script>
</body>
</html>CSS 코드
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
button {
font-size: 20px;
}Javascript 코드
const colors = [
"#ef5777",
"#575fcf",
"#4bcffa",
"#34e7e4",
"#0be881",
"#f53b57",
"#3c40c6",
"#0fbcf9",
"#00d8d6",
"#05c46b",
"#ffc048",
"#ffdd59",
"#ff5e57",
"#d2dae2",
"#485460",
"#ffa801",
"#ffd32a",
"#ff3f34",
];
const button = document.querySelector("button");
const body = document.querySelector("body");
function getRandomNumber() {
return Math.floor(Math.random() * colors.length);
}
function handleBtnClick() {
const firstColor = colors[getRandomNumber()];
const secondColor = colors[getRandomNumber()];
body.style.background = `linear-gradient(to left, ${firstColor}, ${secondColor}`;
console.log(firstColor, secondColor);
}
button.addEventListener("click", handleBtnClick);
배운 점
lineear-gradient() 함수를 backgroundColor에 계속 추가하려고 했다. 하지만 background에 넣어야하는 속성이었다. 추측은 할 수 있지만 틀릴 때마다 왜 안되는지를 계속 동일한 방법으로 확인했다. 안된다면 일단 형식을 제대로 썼는지부터 확인하자.