바닐라 js 초보 문제
이 문제 40개 있던데 하나씩 풀어봐야지...
일단 오늘은 클릭할때마다 배경색 변하는거 했다
생각보다 css에서 시간이 너무 걸렸어...
코드는 그냥 이벤트함수로 안하고 HTML에서 onclick 썼다.
- 일단 생각 정리
color flipper
- 버튼 누르면 랜덤으로 배경색깔이 바뀌게
- 바뀐 배경색깔명 화면 출력
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Color Flipper</title>
<style> @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital@1&display=swap');</style>
<link href="Color_Flipper.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="namebox">
<span>background color : </span> <span id="colorname"> </span>
</div>
<div class="btnbox">
<button class="btn" onclick="btnClick()">CLICK ME</button>
</div>
</div>
<script src="Color_Flipper.js"></script>
</body>
</html>CSS
@charset "UTF-8";
.wrap{
height: 100%; width: 100%;
position: absolute;
}
.wrap div{
width: 800px;
top: 200px; left: 350px;
position: relative;
text-align: center; padding-top: 50px;
}
.btnbox{height: 100px;}
.btn{
width: 130px; font-size: 20px;
font-family: 'Ubuntu', sans-serif;
background-color: transparent; padding: 15px;
★transition: all 0.3s linear;★
}
.namebox{
font-family: 'Ubuntu', sans-serif;
background-color: black; color: white;
font-size: 30px; height: 50px; padding-bottom: 25px;
}
.btn:hover{
background-color: black; color: #fff;
}
JS
const colors=[색상명 146개]
function btnClick(){
let color=''; // 색상 난수 담을 변수 선언
color=Math.floor(Math.random()*colors.length);
//아 이거 그냥 숫자 나오는 거였지...나온 숫자를 배열 인덱스에 하나씩 넣어줘야 할듯
//그니까 여기서 숫자가 나오면 그 숫자에 해당하는 인덱스의 컬러가 나오도록
//colors[color] 이렇게해서 백그라운드 주려면 무조건 여기서 style 해줘야되네...
wrap.style.backgroundColor= colors[color]
document.getElementById('colorname').innerHTML= colors[color]
}과정
color=Math.floor(Math.random()*colors.length);
이거 숫자인거 생각안하고 그냥 이거만 뽑아내는 멍청한 짓을 한번하고
여기서 숫자뽑아서 인덱스로 사용했다.
js에서 style 적용법을 하나 더 알아냈어
원래 그냥<div style="width: 100px;"></div> 이것만 알았는데
그냥 문서객체 하나 가져와서 변수명.style.width="100px" 이렇게!
결과
버튼에 마우스 효과도 줬는데 캡쳐로는 못보여줘서 슬프네...
