Color Flipper
: 버튼 클릭 시 배경색이 랜덤하게 변하며 해당 배경색의 색상 코드를 출력하는 사이트
사용 언어
- HTML
- CSS
- Javascript
구조
- index.html - 'Simple' 버전
- app.js - 'Simple' 버전
- hex.html - 'hex' 버전
- hex.js - 'hex' 버전
- styles.css - 사이트 css
코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/> <!-- 문자 코드 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> // meta 정보의 이름, 내용
<title>Color Flipper || Simple</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" /> <!-- 참조할 파일 -->
</head>
<body>
<nav> <!-- 다른 웹 페이지로 연결 -->
<div class="nav-center">
<h4>Color Flipper</h4>
<ul class="nav-links">
<li>
<a href="index.html">Simple</a> <!-- 링크된 페이지의 URL -->
<!-- Simple 선택 시 해당 페이지로 이동-->
</li>
<li>
<a href="hex.html">hex</a>
<!-- hex 선택 시 hex 페이지로 이동-->
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>
Background Color :
<span class="color">#f1f5f8</span>
<!-- 스타일이나 속성의 범위를 적용하기 위해 감싸주는 태그 -->
</h2>
<button class="btn btn-hero" id="btn">Click Me</button>
</div>
</main>
<!-- javascript -->
<script src="app.js"></script>
<!-- 외부 스크립트 파일의 URL -->
</body>
</html>
app.js - 'Simple'
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
// Simple 선택 시 나오는 색상들 선언
// JS 내장 함수에 의해 색상 명 or 색상 코드를 넣어도 반영이 된다!
const btn = document.getElementById("btn"); // 'click me' 버튼 가져오기
~~ const color = document.querySelector(".color"); ~~
// HTML 문서 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 반환
btn.addEventListener("click", function () {
// .addEventListener() - document의 특정요소(id, class, tag 등) 의 event(click하거나 마우스를 올리면 함수 실행 등)를 등록
const randomNumber = getRandomNumber(); // 랜덤 숫자 가져오기
document.body.style.backgroundColor = colors[randomNumber];
// html파일(document)의 <body>태그의 backgroundColor를 랜덤 색(colors[randomNumber])으로 지정한다.
color.textContent = colors[randomNumber]; // 랜덤으로 가져온 텍스트 내용 변경
});
function getRandomNumber() {
// 랜덤 숫자 생성 메서드 (범위: 0 ~ 3 (colors.length = 4))
return Math.floor(Math.random() * colors.length);
// Math.floor - 소수점 이하를 버림
}
hex.js - 'hex'
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");
btn.addEventListener("click", function () { // 클릭을 누르면
let hexColor = "#"; // 색상코드 변수 준비
for (let i = 0; i < 6; i++) {
hexColor += hex[getRandomNumber()];
// 색상 코드에 숫자를 랜덤으로 저장
}
document.body.style.backgroundColor = hexColor;
color.textContent = hexColor;
});
function getRandomNumber() {
return Math.floor(Math.random() * hex.length);
}
깃허브
https://github.com/kwonboryong/ColorFlipper.git
출처
https://www.vanillajavascriptprojects.com/
https://youtu.be/3PHXvlpOkf4?si=1r74utW6O3u36e14
http://www.kiss7.kr/db/board.php?bo_table=siteblog&wr_id=17
https://www.w3schools.com/cssref/css_selectors.php
https://coding-levup.tistory.com/18