- Background Changer
HEX Color Code란 RGB 방식의 '색상 코드' 표기법이다. #뒤에 여섯 자리의 글자가 오는데, 이는 0~9까지의 숫자 4개와 A~F까지의 알파벳 2개로 이루어져 있다. 예를 들면, #75E9A3, #F0C433 이런 것이다. 한 자리에 16가지가 들어갈 수 있으므로 16진수라고 보면 되겠다. 그렇다면 이런 헥스 코드로 만들 수 있는 색상의 수는 총 16^6으로 16,777,216개이다.
1. 요구 사항
- 위와 같은 UI를 만든다.
- CLICK ME 버튼을 클릭 시 #3474FF(헥스 코드)가 랜덤하게 바뀐다.
- CLICK ME 버튼을 클릭 시 헥스 코드가 바뀜과 동시에, 바뀐 헥스 코드에 일치하는 배경색으로 바뀐다.
2. 나의 풀이
- HTML + CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Background Changer</title>
<style>
.wrap {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
font-size: xx-large;
}
button {
font-size: xx-large;
padding: 20px;
border-radius: 5px;
background-color: gray;
color: white;
border: black;
}
</style>
<script defer src="js_vanilla_BackgroundChanger.js"></script>
</head>
<body>
<div class="wrap">
<p>
HEX COLOR :
<span>#0021FQ</span>
</p>
<button>CLICK ME</button>
</div>
</body>
</html>display: flex과 flex-direction: Column을 통해 HEX COLOR 문단과 CLICK ME 버튼을 열로 나열했다.
align-items: center와 justify-content: center를 통해 HEX COLOR 문단과 CLICK ME 버튼을 정중앙에 배치시켰다.
defer src를 통해 JavaScript 파일을 불러왔다.
- JavaScript
var arr = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"E",
"F",
];
var button = document.querySelector("button");
var body = document.querySelector("body");
var span = document.querySelector("span");
button.addEventListener("click", function hexCode() {
let result = "#";
for (var i = 0; i < 6; i++) {
var randomNumber = Math.floor(Math.random() * arr.length);
var randomIndex = arr[randomNumber];
result += randomIndex;
}
body.setAttribute("style", "background-color: " + result);
span.textContent = result;
});일단 헥스 코드를 구성하는 16가지의 글자로 이루어진 배열부터 만들었다. 이부분은 힌트를 참조했다...
CLICK ME라는 버튼을 "click"하면 function hexCode()가 실행되도록 이벤트를 추가했다.
- function hexCode()
1. 일단 헥스 코드가 #부터 시작할 수 있게, 또한 계속해서 변수가 재할당 될 수 있도록 let result = "#"을 선언했다.
2. 헥스 코드는 #을 제외한 6개의 글자로 이루어지므로 6번 반복되는 for문을 만들었다.
3. 0부터 1미만의 난수를 추출하는 Math.random과 뒤의 소수를 없애는, 내림시키는 Math.floor를 사용하면 무작위의 정수를 출력시킬 수 있다.
Math.random() 실행 시 0.336288..., 0.749572..., 0.182934과 같은 0과 1사이의 난수가 추출된다. 여기에 10을 곱하면, 즉 Math.random() * 10을 실행하면 3.36288..., 7.49572..., 1.82934...와 같은 숫자가 출력된다. 여기에 Math.floor까지 실행하면, 즉 Math.floor(Math.random() * 10) 실행 시 숫자가 내림되므로 3, 7, 1과 같은 0부터 10미만의 정수가 랜덤하게 출력되는 것이다.
중간에 10이 아니라 16을 곱했다면 0부터 16미만의 정수가 랜덤하게 출력된다. 이를 통해서 배열의 Index가 랜덤하게 추출되는 코드를 짤 수 있는데, 그대로 짠 것이 var randomNumber이다. 이러한 0부터 16미만의 랜덤한 정수를 arr 배열의 Index로 넣으면, arr 배열의 value들을 랜덤하게 추출할 수 있다.
그리고 result += randomIndex를 통해, for문 안에서 6번 실행될 때마다 문자열이 계속해서 더해질 수 있도록 했다.
ex)
i = 0, result = "#" + "A" = "#A"
i = 1, result = "#A" + "6" = "#A6"
i = 2, result = "#A6" + "B" = "#A6B"
...
4. 마지막으로 setAttribute를 통하여 body에 style 속성을 추가하고 background-color가 result 값(for문을 마치면 최종적으로는 헥스 코드가 되어있다)에 맞게 설정되도록 했다. 또한 textContent를 통해 UI에 나타나는 헥스 코드 또한 result 값이 나타나도록 했다.
'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글
| Step 5. JavaScript in Depth - Koans (0) | 2022.01.05 |
|---|---|
| Step 4. Interacting with WebPages(5) (0) | 2021.12.27 |
| Step 4. Interacting with Webpages(3) (0) | 2021.12.16 |
| Step 4. Interacting with Webpages(2) (0) | 2021.12.16 |
| Step 4. Interacting with Webpages(1) (0) | 2021.12.13 |
