[JS]나이 계산기

이번에 만들어 볼 프롤젝트는 태어난 날부터 지금까지 며칠이 지났는지는 계산하는 앱을 만들어 보려고 합니다. 

이 프로젝트에서는 년도별 월별 일별에 따라 계산이 달라지기 때문에 이전 프로젝트들에 비해 조금 더 복잡한 조건문들이 사용되었습니다. 

 

가장 초기화면의 모습입니다. 프로젝트의 이름이 적혀있고 날짜를 지정할 수 있는 창과 버튼이 있습니다.

달력 버튼을 누르게 되면 날짜를 지정할 수 있는 달력이 나타나게 됩니다. 이 프로젝트는 과거의 날짜에서 오늘까지의 날짜를 계산하는 것이기 때문에 오늘 이후의 날짜들은 선택할 수 없게 비활성화가 되어 있습니다.

저는 제 나이를 밝히고 싶지는 않아서 2000년 1월 1일부터 오늘까지의 날을 계산해보았습니다. 

21세기가 된지 벌써 24년 하고도 8개월 9일이나 지나있습니다. 

 

시간이 정말 빠르네요 ㅎㅎ 

그럼 어떤 코드들이 사용되어 있는지 확인해 봅시다. 

---

1. HTML요소 선택 및 초기화 

let userInput = document.getElementById("date");
userInput.max = new Date().toISOString().split("T")[0];
let result = document.getElementById("result");

• let userInput = document.getElementById("date"): date라는 id를 가진 HTML 요소(입력 필드)를 선택하여 userInput이라는 변수에 저장합니다.
• userInput.max = new Date().toISOString().split("T")[0]: 사용자가 오늘 이후의 날짜를 입력하지 못하도록 max 속성을 오늘 날짜로 설정합니다. new Date().toISOString().split("T")[0] 코드는 현재 날짜를 YYYY-MM-DD 형식으로 변환하는 역할을 합니다.
• let result = document.getElementById("result"): 결과를 표시할 result라는 id를 가진 HTML 요소를 선택하여 result 변수에 저장합니다.

2. 나이계산함수 CalculateAge()

function calculateAge() {
  let birthDate = new Date(userInput.value);
  let d1 = birthDate.getDate();
  let m1 = birthDate.getMonth() + 1;
  let y1 = birthDate.getFullYear();

  let today = new Date();

  let d2 = today.getDate();
  let m2 = today.getMonth() + 1;
  let y2 = today.getFullYear();

  let d3, m3, y3;
  y3 = y2 - y1;
  if (m2 >= m1) {
    m3 = m2 - m1;
  } else {
    y3--;
    m3 = 12 + m2 - m1;
  }
  if (d2 >= d1) {
    d3 = d2 - d1;
  } else {
    m3--;
    d3 = getDaysInMonth(y1, m1) + d2 - d1;
  }
  if (m3 < 0) {
    m3 = 11;
    y3--;
  }
  result.innerHTML = `You are <span>${y3}</span> years,<span>${m3}</span> months and <span>${d3}</span> days old`;
}

 

• function calculateAge() { ... }: 이 함수는 사용자가 입력한 생년월일(userInput.value)을 받아 현재 나이를 계산하고, 그 결과를 HTML 요소에 표시합니다.
• let birthDate = new Date(userInput.value);: 사용자가 입력한 생년월일을 Date 객체로 변환하여 birthDate 변수에 저장합니다.
• let d1 = birthDate.getDate(): birthDate 객체에서 일을 추출합니다.
• let m1 = birthDate.getMonth() + 1: birthDate 객체에서 월을 추출합니다. (자바스크립트에서 월은 0부터 시작하므로 +1을 해줍니다.)
• let y1 = birthDate.getFullYear(): birthDate 객체에서 연도를 추출합니다.
• let today = new Date(): 현재 날짜를 나타내는 Date 객체를 생성합니다.
• let d2 = today.getDate(): 현재 날짜에서 일을 추출합니다.
• let m2 = today.getMonth() + 1: 현재 날짜에서 월을 추출합니다.
• let y2 = today.getFullYear(): 현재 날짜에서 연도를 추출합니다.
• let d3, m3, y3: 나이 계산을 위한 변수를 선언합니다.
• y3 = y2 - y1: 기본적으로 현재 연도에서 출생 연도를 빼서 나이를 계산합니다.
• if (m2 >= m1) { ... } else { ... }: 생월과 현재 월을 비교하여 만 나이를 계산합니다. 현재 월이 생월보다 이전이면 나이를 한 살 줄여줍니다.
• if (d2 >= d1) { ... } else { ... }: 생일과 현재 일을 비교하여 월을 조정합니다. 현재 일이 생일보다 이전이면 한 달을 빼고 일수를 조정합니다.
• if (m3 < 0) { ... }: 월 계산 후 월이 음수로 나오면 11개월로 설정하고 나이를 한 살 줄여줍니다.
• result.innerHTML = ...: 최종적으로 계산된 나이(년, 월, 일)를 HTML 요소에 표시합니다.

3.월별 일수 계산 함수 

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

 

• function getDaysInMonth(year, month) { ... }: 특정 연도와 월에 해당하는 일수를 계산하는 함수입니다.
• return new Date(year, month, 0).getDate(): 주어진 연도와 월에 맞는 마지막 날짜를 반환합니다. 여기서 new Date(year, month, 0)은 지정된 월의 마지막 날을 의미합니다.

이렇게 하면 완성입니다!