250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- html5
- MAC
- 비전공자
- 프론트엔드
- IOS
- php
- css3
- keyframes
- button
- 백엔드
- react
- 비전공 개발자
- SWIFT
- 자바스크립트
- hover
- ipad
- effect
- jQuery
- CSS
- 애니메이션
- 개발자
- Animation
- iOS 개발자
- front-end
- 풀스택
- javascript
- xcode
- image
- HTML
- iPhone
Archives
- Today
- Total
비전공자 개발일기
Background color picker 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BACKGROUND COLOR PICKER</title>
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
</head>
<body>
<div class="center">
<h1>Background Color Picker</h1>
<button class="btn">Click me!</button>
<h3 class="cetner" id="hex">#</h3>
</div>
</body>
</html>
.center {
padding-top: 70px;
margin: auto;
text-align: center;
}
.btn {
margin: auto;
text-align: center;
}
function getHex() {
let letters = "0123456789ABCDEF";
let color = "#";
for(let i = 0; i < 6; i++) {
color += letters[(Math.floor(Math.random() * 16))];
}
return color;
}
function changeColor() {
let hex = getHex();
document.getElementById("hex").innerHTML = hex;
document.getElementsByTagName("BODY")[0].style.backgroundColor = hex;
}
document.querySelector(".btn").addEventListener("click", changeColor);
728x90
LIST
'Javascript' 카테고리의 다른 글
Toast Notification (0) | 2022.06.29 |
---|---|
Word Counter (0) | 2022.06.20 |
Date Calculator (0) | 2022.06.15 |
Javascript Modal Popup Box (0) | 2022.06.07 |
Create Date Time Day (0) | 2022.05.31 |