index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<h1>D-Day</h1>
<div id="d-day-container">
<div class="d-day-child-container">
<span id="days">0</span>
<span>일</span>
</div>
<div class="d-day-child-container">
<span id="hours">0</span>
<span>시간</span>
</div>
<div class="d-day-child-container">
<span id="min">0</span>
<span>분</span>
</div>
<div class="d-day-child-container">
<span id="sec">0</span>
<span>초</span>
</div>
</div>
<div id="d-day-message"></div>
<div id="target-selector id">
<input id="target-year-input" class="target-input" size="5" /> -
<input id="target-month-input" class="target-input" size="5" /> -
<input id="target-date-input" class="target-input" size="5" />
</div>
<button onclick="starter()" class="btn">카운트다운 시작</button>
<button onclick="resetTimer()" class="btn">타이머 초기화</button>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 3rem;
}
.btn {
margin-top: 0.5rem;
font-size: 1.3rem;
}
#d-day-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1.6rem;
}
.d-day-child-container {
text-align: center;
margin-right: 1rem;
}
.d-day-child-container span {
font-size: 1.3rem;
}
.target-selector {
margin-top: 0.5rem;
}
script.js
const messageContainer = document.querySelector('#d-day-message');
const container = document.querySelector('#d-day-container');
const savedDate = localStorage.getItem('saved-date');
const intervalIdArr = [];
const dateFormMaker = function () {
const inputYear = document.querySelector('#target-year-input').value;
const inputMonth = document.querySelector('#target-month-input').value;
const inputDate = document.querySelector('#target-date-input').value;
const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
// const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate;
return dateFormat;
};
const counterMaker = function (data) {
if (data !== savedDate) {
localStorage.setItem('saved-date', data);
}
const nowDate = new Date();
const targetDate = new Date(data).setHours(0, 0, 0, 0);
const remaining = (targetDate - nowDate) / 1000;
if (remaining <= 0) {
// 만약, remaining이 0이라면, 타이머가 종료되었습니다. 출력
container.style.display = 'none';
messageContainer.innerHTML = '<h3>타이머가 종료되었습니다.</h3>';
messageContainer.style.display = 'flex';
setClearInterval();
return;
} else if (isNaN(remaining)) {
// 만약, 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다. 출력
container.style.display = 'none';
messageContainer.innerHTML = '<h3>유효한 시간대가 아닙니다.</h3>';
messageContainer.style.display = 'flex';
setClearInterval();
return;
}
const remainingObj = {
remainingDate: Math.floor(remaining / 3600 / 24),
remainingHours: Math.floor(remaining / 3600) % 24,
remainingMin: Math.floor(remaining / 60) % 60,
remainingSec: Math.floor(remaining) % 60,
};
const documentArr = ['days', 'hours', 'min', 'sec'];
const timeKeys = Object.keys(remainingObj);
const format = function (time) {
if (time < 10) {
return '0' + time;
} else {
return time;
}
};
let i = 0;
for (let tag of documentArr) {
const remainingTime = format(remainingObj[timeKeys[i]]);
document.getElementById(tag).textContent = remainingTime;
i++;
}
};
const starter = function (targetDateInput) {
if (!targetDateInput) {
targetDateInput = dateFormMaker();
}
container.style.display = 'flex';
messageContainer.style.display = 'none';
setClearInterval();
counterMaker(targetDateInput);
const intervalId = setInterval(() => {
counterMaker(targetDateInput);
}, 1000);
intervalIdArr.push(intervalId);
};
const setClearInterval = function () {
for (let i = 0; i < intervalIdArr.length; i++) {
clearInterval(intervalIdArr[i]);
}
};
const resetTimer = function () {
container.style.display = 'none';
messageContainer.innerHTML = '<h3>D-Day를 입력해 주세요.</h3>';
messageContainer.style.display = 'flex';
localStorage.removeItem('saved-date');
setClearInterval();
};
if (savedDate) {
starter(savedDate);
} else {
container.style.display = 'none';
messageContainer.innerHTML = '<h3>D-Day를 입력해 주세요.</h3>';
}