자바스크립트 연습 프로젝트 Color Flipper

자바스크립트 DOM 조작 연습 프로젝트

Color Flipper 만들기

사용 개념

• arrays
• document.getElementById()
• addEventListener()
• document.body.style.backgroundColor
• Math.floor()
• Math.random()
• inner.HTML

javascript code

<script>
let backgroundColor = document.getElementById("back-color");
let whatColor = document.getElementById("what-color");
let button = document.getElementById("change-color");

let colors = [
  'green',
  'pink',
  '#0066ff',
  'yellow',
  '#dc143c'
];

function changeColor () {
  let random = Math.floor(Math.random() * 5);
  backgroundColor.style.backgroundColor = colors[random];
  whatColor.innerHTML = `Background Color : ${colors[random]}`
}

button.addEventListener("click", changeColor);
</script>

우선 다섯 가지의 색상이 들어있는 배열을 만든 후 button에 addEventListener onClick이벤트를 등록 하였다.

이벤트가 발생하면 changeColor 라는 함수에서 random이라는 변수에 Math.random 메서드를 사용해 5가지 색상을 랜덤으로 뜨도록 만들었고 이 과정에서 Math.floor을 사용하여 수수점 이하의 수는 버림 처리를 하여 정수만 반환 되도록 하였다.

마지막으로 random으로 반환되는 컬러를 document.body.style.backgroundColor를 활용하여 배경색으로 넣어주고 색상에 따라 무슨 컬러인지 알 수 있도록 innerHTML을 이용하여 색상을 알려주도록 하였다.