이것저것

크롬 Momentum 클론코딩(시계) 본문

JavaScript

크롬 Momentum 클론코딩(시계)

곰태태 2021. 5. 31. 17:55
반응형
SMALL

https://momentumdash.com/

 

Momentum Dash: Your space for focus

One of the easiest, most powerful ways I've changed my daily life is by using the @momentumdash plugin for Chrome. It shows you your to-do list right on your homepage, so whenever you get sidetracked, you get a reminder when you pull up a new tab about wha

momentumdash.com

크롬에서 쓰이는 momentum을 클론코딩해보자.

 

html에서 class명을 지을 때 단어로만 하게 되면 css나 js 어디서 쓰이는지 헷갈리므로 앞에 js-clock 이런 식으로 써주는 게 좋다고 한다.

또한 <div>를 치고 class="js-clock을 타이핑하는 방법도 있지만 div.js-clock하고 엔터를 치면 바로 생성된다.

h1, input 등 모두 사용된다.

<!DOCTYPE html>
<html>
    <head>
        <title>Somethings</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="js-clock">
            <h1>00:00</h1>
        </div>
        <script src="clock.js"></script>
    </body>
</html>
//clokc.js

// const clockContainer = document.querySelector(".js-clock");
// const clockTitle = clockContainer.querySelector("h1");
const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");

function init(){

}

init();

clockTitle의 경우 document에서 querySelector로 탐색하는 것이 아닌, js-clock의 자식 class를 찾을 것이므로 document대신 clockContainer를 사용했다.

 

현재시간을 알아보기 위해서 chrom의 Console창을 이용해보자

const date = new Date()로 현재시간을 date에 넣어준다.

그리고 date의 월, 일, 시간, 분 등 정보를 가져올 수 있다.

Day의 1은 월요일을 뜻한다.

//clock.js
const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();  //작동하나 확인하기위해 추가
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init(){
    getTime();
}

콘솔 창을 통해 확인했으니 코드를 추가해보자.

시간, 분, 초를 추가했고 나오는 것을 확인할 수 있다.

''대신 ``(빽콤마 - 숫자 1 옆에)를 사용하면 간단히 표시 가능하다.

하지만 실시간으로 바뀌지 않고 새로고침을 해야만 시간이 바뀐다.

이를 실시간으로 보여주게 하는 함수는 setInterval() 이라는 함수다.

setInterval은 두 인자 값을 받는데 첫 번째는 실행할 함수, 두 번째는 함수를 실행하고 싶은 시간을 입력한다.

시간은 millisecond가 기준이므로 1초는 1000으로 적어주면 된다.

const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();  //작동하나 확인하기위해 추가
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

setInterval에서 getTime을 쓰니 위에 getTime()을 안 써도 되나 싶었는데 지워보니 처음에 00:00으로 시작한다.

그리고 숫자가 1~9는 01이 아니라 1로 나오는데 깔끔하지 않다.

10보다 작으면 앞에 0이 붙는 조건을 넣어주자.

const clockContainer = document.querySelector(".js-clock"),
      clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = 2;
    const seconds = date.getSeconds();  //작동하나 확인하기위해 추가
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

시간이 한자리될 때까지 기다리기 힘드므로 분에 2를 넣어서 정상 작동하는 걸 확인해보았다.

이렇게 시계가 완성됐다.

반응형
LIST

'JavaScript' 카테고리의 다른 글

크롬 Momentum 클론코딩(ToDo List)  (0) 2021.09.03
크롬 Momentum 클론코딩(사용자)  (0) 2021.06.01
JavaScript에서 init을 왜 쓰는 걸까..??  (0) 2021.05.31
자바스크립트 기본 끄적끄적2  (0) 2021.05.28
자바스크립트 기본 끄적끄적  (0) 2021.05.25
'JavaScript' Related Articles more
Comments