Vanilla JS. D-day(feat. fixed)

* 노마드코더 강의를 보고 만든 고정된 날짜 값에 대한 디데이를 만들었다가, 고정된 값이 아닌 입력값을 기반으로 만들어 보면 어떨까해서 유동적으로 입력값을 넣으면 계산되는 디데이 계산기도 만들어 보았다.(이건 다음 시간에)

* 오늘은 고정된 값에 대한 것만 업로드.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Merry Christmas</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>2023 크리스마스</h1>
    <br />
    <h2 id="clock"></h2>
    <script src="app.js"></script>
    
</body>
</html>

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

function Dday() {
    const target = new Date("2023-12-25"); // 고정된 날짜 값
    const today = new Date(); // 현재 시간
    const diff = target - today;
    const d = Math.floor(diff / (1000*60*60*24)); 
 	/* 처음 봤을 때 이해가 안되서 가만히 보다가, 1밀리초가 1초가되려면 1000을 곱하고, 1초가 1분이 되려면 60을 곱하고, 
	1분이 1시간이 되려면 60을 곱하고, 1시간이 하루가 되려면 24를 곱한다 라고 생각했음. 
    	(개인적으로 이해하려고 생각한거라 틀릴지도..)*/
    const h = Math.floor((diff / (1000*60*60)) % 24);
    const min = Math.floor((diff / (1000*60)) % 60);
    const s = Math.floor(diff/ 1000 % 60);
    clock.innerText = `${d}일 ${h}시 ${min}분 ${s}초`;
}

Dday();
setInterval(Dday, 1000);