Django 포스팅
Doyeon0430 | 2023년 09월 04일
이번시간에는 자바스크립트를 사용해 디데이 날짜를 설정하겠습니다.
시작 날짜와 오늘 날짜를 설정하고 디데이를 만들어서 며칠이 경과했는지 출력하는 코드입니다.
연인들끼리 날짜를 세거나 무언가를 계획할 때 사용할 수 있습니다.
그럼 지금부터 코드 리뷰 포스팅을 시작하겠습니다.
HTML 코드에는 총 3개의 키워드를 설정했습니다.
HTML 코드
<header>
<h1>날짜 계산기</h1>
</header>
<section>
<h2>시작 날짜</h2>
<p id="dDay"></p>
</section>
<section>
<h2>오늘 날짜</h2>
<p id="today"></p>
</section>
<section>
<h2>디데이 기준</h2>
<p id="countdown"></p>
</section>id 값을 넣어 결과물이 실시간으로 변화하도록 만들어줍니다.
CSS에서 반응형으로 코드를 제작했습니다.
CSS 코드
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
h1 {
font-size: 24px;
margin: 0;
}
section {
background-color: #fff;
margin: 20px;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#dDay, #today {
font-size: 32px;
font-weight: bold;
margin: 5px;
text-align: center;
}
#countdown {
font-size: 32px;
font-weight: bold;
margin: 5px;
text-align: center;
color: #ff5733;
}header에는 검정 테두리로 최상단 포지션을 잡아줬습니다.
section에는 흰색 테두리와 그림자 효과를 사용해 구역을 나눠줬습니다.
마지막으로 id 값에 글자 설정을 넣었습니다.
마지막으로 자바스크립트에서 날짜 값을 만들어줘야 합니다.
JavaScript 코드
const today = new Date();
const dDay = new Date('2023-09-01');
//시간 무시하기
today.setHours(0,0,0,0);
dDay.setHours(0,0,0,0);
const timeDifference = today - dDay;
const oneDay = 24*60*60*1000;
const daysPassed = Math.floor(timeDifference/oneDay)+1;
document.getElementById('dDay').textContent
= `${dDay.toLocaleDateString()}`;
document.getElementById('today').textContent
= `${today.toLocaleDateString()}`;
document.getElementById('countdown').textContent
= `${daysPassed}일`;today는 현재 날짜를 가리키는 변수입니다.
dDay는 지정된 날짜를 가리키는 변수입니다.
setHours로 시간을 초기화시켜야 정각에 날짜가 변경됩니다.
oneDay는 하루에 시간을 밀리초(ms) 단위로 정의합니다.
마지막으로 값들을 나눠주고 textContent를 통해 id 값에 넣어줍니다.
이제 HTML에서 'dDay', 'today', 'countdown'라는 id를 가진 요소에 각각 시작 날짜, 오늘 날짜, 디데이를 출력할 수 있습니다.
아래 플랫폼을 통해 결과물을 확인할 수 있습니다.
글을 마치며 자바스크립트를 사용해서 디데이 날짜를 구해봤습니다.
댓글 (0)
간편 댓글 작성
