Color Clock 만들기

노마드코더 크롭 앱 만들기 강의를 보고 만들어본 시계 앱입니다. 초 단위로 배경 컬러가 랜덤하게 바뀌는 Color-Clock 을 만들었습니다.

1. 시계를 보여줄 html 코드를 작성합니다.

<div class="clock">
	<h1>00:00:00</h1>
</div>

2. 시계 동작을 구현할 clock.js 코드를 작성합니다.

정해진 시간마다 함수를 반복하는 setInterval 과 현재 시간을 나타내는new Date() 를 사용해 시계 동작을 만듭니다.

// 우선 시계 데이터를 담을 html 의 h1 태그를 선택합니다. 
const clock = document.querySelector(".clock h1")

// 1초 마다 '시간을 찍어서 보여주는 함수'를 실행합니다.
setInterval(getClock, 1000);

// getColck 함수를 작성합니다.
function getClock() {
    const date = new Date(); // new Date() 는 현재 시간 정보
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`
}

// padStart 는 숫자를 2자리 수로 보여주기 위해 붙여줌 ( 3 -> 03 )
// 문자열만 적용되므로 시간정보를 string 으로 묶어주고 적용

배치를 수정한 최종 코드는,

const clock = document.querySelector(".clock h1")

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`
}

getClock(); // 처음 접속시 1초 공백이 생기므로 setInterval 앞에서 먼저 실행
setInterval(getClock, 1000);

3. 랜덤하게 배경색을 바꾸어 주는 color.js 코드를 작성합니다.

배경색을 바꿔주는 함수를 배열에 담고, 해당 배열의 요소를 Math 함수를 사용해 랜덤하게 불러옵니다. 해당 함수는 setInterval 을 사용해 1초 마다 동작합니다.

// 배경으로 사용할 div 태그를 클래스 네임으로 선택하고
const clockBody = document.querySelector(".clock");

// 1초 마다 동작할 함수가 동작하게 세팅하고,
setInterval(changeColorAction, 1000);

// 1초마다 동작할 함수 changeColorAction 코드를 작성하고
function changeColorAction() {
  changeColor[Math.floor(Math.random() * changeColor.length)]();
}

// 이때 0 에서 1 사이 랜덤값인 Math.random() 에 배열 길이를 곱하면
// 0*3 < a*3 < 1*3 이런 식으로 곱해져서 0<a<3 가 되고
// floor 로 소수점 아래를 내리면, 0에서 2사이의 배열 index 를 돌게 됩니다.

// 함수안에 들어갈 배열 changeColor 를 작성하고,
let changeColor = [changeBlue, changeGreen, changeYellow, changeRed, changePurple]

// 배열 안에 들어간 요소들을 함수로 선언합니다.
function changeBlue() { clockBody.className = "clock blue"; }
function changeGreen() { clockBody.className = "clock green"; }
function changeYellow() { clockBody.className = "clock yellow"; }
function changeRed() { clockBody.className = "clock red"; }
function changePurple() { clockBody.className = "clock purple"; }

최종 코드는 아래와 같습니다.

const clockBody = document.querySelector(".clock");

function changeBlue() { clockBody.className = "clock blue"; }
function changeGreen() { clockBody.className = "clock green"; }
function changeYellow() { clockBody.className = "clock yellow"; }
function changeRed() { clockBody.className = "clock red"; }
function changePurple() { clockBody.className = "clock purple"; }

let changeColor = [changeBlue, changeGreen, changeYellow, changeRed, changePurple]

function changeColorAction() {
  changeColor[Math.floor(Math.random() * changeColor.length)]();
}

changeColorAction();
setInterval(changeColorAction, 1000);

4. css 코드를 작성해 스타일을 잡아줍니다.

linear-gradient 를 사용해 그라데이션 컬러를 적용했고, 부모 요소인 div 태그에 flex 속성을 주고 조절해 시계를 가운데 정렬했습니다.

/* reset */

body, h1 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: inherit;
    font-weight: inherit;
}

/* component */

body {
    background: #888;
}

.clock {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Audiowide', cursive;
}

h1 {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: .3px;
}

.blue {
    background-image: linear-gradient(150deg, rgba(33,214,204,1.00) 1%,rgba(33,81,226,1.00) 100%);
    background-position: center center;
    color: white;
}

.green {
    background-image: linear-gradient(150deg, rgb(31, 211, 61) 1%,rgb(6, 126, 201) 100%);
    background-position: center center;
    color: white;
}

.yellow {
    background-image: linear-gradient(90deg, rgb(211, 205, 31) 1%,rgb(249, 143, 5) 100%);
    background-position: center center;
    color: white;
}

.red {
    background-image: linear-gradient(150deg, rgb(227, 18, 105) 0%,rgba(206,112,33,1.00) 100%);background-position: center center;
    color: white;
}

.purple {
    background-image: linear-gradient(150deg, rgba(227, 18, 199, 0.913) 0%,rgb(114, 18, 223) 100%);background-position: center center;
    color: white;
}