TIL (2022.01.31)

DAY 11

🔖 MISSION1: 더러운 코드를 고치자 🌟

💩 내 더러운 코드좀 봐주세요

제보자 J***님의 코멘트 :

자스챌 할때 크리스마스까지 남은 시간 계산기인데요, 모범답안에서 시,분을 초로 계산하는걸 다르게 했던 것 같은데~! 잘 모르겠어용ㅋㅋ 자스챌 복습하러 가야겠...

const merry = document.querySelector(".js-clock");

function getClock() {
const christmas = new Date("2021, 12, 25");
const date = new Date();
const timeGap = christmas - date;

const xDay = Math.floor(timeGap / (1000 * 60 * 60 * 24));
const xHours = Math.floor(
(timeGap - xDay * 1000 * 60 * 60 * 24) / (1000 * 60 * 60)
);
const xMinutes = Math.floor((timeGap % (60 * 60 * 1000)) / (60 * 1000));
const xSeconds = Math.floor((timeGap % (60 * 1000)) / 1000);

const day = String(xDay).padStart(2, "0");
const hours = String(xHours).padStart(2, "0");
const minutes = String(xMinutes).padStart(2, "0");
const seconds = String(xSeconds).padStart(2, "0");

merry.innerText = `${day}d ${hours}h ${minutes}m ${seconds}s`;
}

getClock();
setInterval(getClock, 1000);

🚽 이렇게 치워드렸습니다

function runChristmasTimer(){
    const clockInterval = 1000;

    setInterval(printLeftTime, clockInterval);
}

function printLeftTime(){   
    const clockField = document.querySelector(".js-clock");
    const leftTime = getLeftTime();

    const day = Math.floor(leftTime / (1000 * 60 * 60 * 24));
    const hours = String(Math.floor((leftTime/ (1000 * 60 *60 )) % 24 )).padStart(2, "0");
    const minutes = String(Math.floor((leftTime  / (1000 * 60 )) % 60 )).padStart(2, "0");
    const seconds = String(Math.floor((leftTime / 1000 ) % 60)).padStart(2, "0");

    clockField.innerText = `${day}d ${hours}s ${minutes}m ${seconds}s`;
}

function getLeftTime(){
    const nowDate = new Date();
    const christmasDate = new Date(nowDate.getFullYear(), 12, 25);

    if(nowDate > christmasDate){
        christmasDate.setFullYear(christmasDate.getFullYear() + 1);
    }
    return christmasDate.getTime() - nowDate.getTime();
}

runChristmasTimer();

• 1개의 함수에서 3개의 함수로 기능을 분리하였다.
• 변수명 및 함수명을 직관적으로 바꿨다.
• 들여쓰기와 세로 공백을 주었다.
• 기능 추가
  • 크리스마스가 2021년으로 되어 있어서, 현재 작업 시간인 2022년에는 계산기가 잘 작동하지 않았다. 그래서 매번 오늘 기준 다음 크리스마스를 바라볼 수 있게 수정하였다.

소감 3줄 요약

• 1개의 함수에서 3개의 함수로 기능을 분리하였다.
• 변수명 및 함수명을 직관적으로 바꿨다.
• 들여쓰기와 세로 공백을 주었다.