<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>

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;
}

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}일`;