CLICK ME 버튼을 누르면 배경색이 바뀌는 프로젝트!! 공부하면서 주석 달아봤다.
<body>
<nav>
<div class="nav-center">
<h4>color flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li> //simple 클릭시 index.html로 이동한다.
<li><a href="hex.html">hex</a></li> //hex 클릭시 hex.html로 이동한다.
</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> //click me 버튼 생성
</div>
</main>
<!-- javascript -->
<script src="hex.js"></script>
</body>index.html
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; //colors 변수에 색깔 배열 넣기
const btn = document.getElementById("btn"); // id "btn"에 접근하는 함수
const color = document.querySelector(".color"); // 클래스값이 color인 첫번째 요소에 접근한다.
btn.addEventListener("click", function () { //addEventListener: 이벤트를 등록한다.
const randomNumber = getRandomNumber(); //getRandomNumber은 자바스크립트 함수가 아니라 그냥 정의한 함수임
// console.log(randomNumber);
document.body.style.backgroundColor = colors[randomNumber]; // 배경색을 colors 배열에서 랜덤으로 가져오고 그것으로 문서의 배경색을 설정한다.
color.textContent = colors[randomNumber]; // color text를 randomnumber값으로 바꾼다.
});
function getRandomNumber() {
return Math.floor(Math.random() * colors.length); //colors 배열 수 안에서 난수 생성 그리고 math.floor를 사용해서 int로 값 받기
}main.js
✏️ Course created by John Smilga. Check out his YouTube channel:
/ codingaddict
'JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 If문 중첩 제거하기 (JAVASCRIPT) (0) | 2023.04.18 |
|---|---|
| 자바스크립트 /value, textContent , innerHTML, innerText 사용 (0) | 2023.04.18 |
| 자바스크립트 배열 (JAVASCRIPT ARRAY) (0) | 2023.04.18 |
| 자바스크립트 형 변환 (JAVASCRIPT ) (0) | 2023.04.18 |
| Modal Project (0) | 2023.03.30 |
댓글