아이디어
1) 해당 웹페이지와 같은 형태를 HTML과 CSS로 작성
2) 랜덤한 Hex color code를 생성하는 함수 작성
2-1)math.random()과 math.floor()를 사용을 사용
2-2)for를 이용해서 6개의 문자열을 합치자
2-3)for문을 돌리고 해당 값을 hex_color에 넘겨 준 후에는 hex_color를 초기화시켜준다.
3) 해당 함수를 적용하여 버튼 클릭 시 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code수정
정리할 것: Math. 함수, Hex color code, HTML과 JS연결방법, 문자열에 변수 넣기
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
font-size: 100px;
}
.center .content{
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="center">
<span class="content"></span><br>
<button class="content" style= "padding: 30px; font-size:20px; border-radius: 5px">CLICK ME!</button>
</div>
<script type="text/javascript" src="BC.js"></script>
</body>
</html>
const hex = "01233456789ABCDEF";
var hex_color = "";
const $span = document.querySelector("span");
const button = document.querySelector("button");
const $html = document.querySelector("html");
button.addEventListener("click", function buttonclick() {
for(let i=0; i<6; i++){
hex_color += hex[Math.floor(Math.random()*hex.length)];
console.log(hex_color);
$span.textContent = "HEX COLOR: " + hex_color;
$html.style = `background-color: #${hex_color}`; //벡틱을 이용한 문자열에 변수 넣기
};
hex_color = "";
});
console.log(hex_color);'바닐라코딩 사전학습 > 코드연습, 퀴즈, 과제' 카테고리의 다른 글
| Primitive / Reference 퀴즈 (0) | 2021.12.27 |
|---|---|
| Scope Quiz (0) | 2021.12.27 |
| Craousel (0) | 2021.12.24 |
| 김서방 찾기 / 가운데글자 가져오기 / 수박수박수박수 (0) | 2021.12.24 |
| Exercise - FizzBuzz/Biggest Number/Word position (0) | 2021.12.24 |