[Javascript] Age Calculator ②Basic Function

winCow 2021. 4. 9. 14:27

정말 간단한 기능이고 최종 완성 단계도 아니지만, 처음으로 혼자서 생각하고 만들어낸 결과물이라 몹시 뿌듯하다.

1. HTML

<!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>만 나이 계산기</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- comment -->
  <div class="comment">생년월일을 입력해 주세요</div>
  <!-- input -->
  <div class = "input">
    <div><input type="text" class="year">년</div>
    <div><input type="text" class="month">월</div>
    <div><input type="text" class="date">일</div>
  </div>
  <!-- submit -->
  <input type="submit" value="확인" class="button">
  <!-- result -->
  <div class="result"></div>
</body>
<script src="main.js"></script>
</html>

2. CSS

:root {
  /* color */
  --color-black: #2c3e50;
  --color-white: #ecf0f1;

  /* size */
  --size-20px: 20px;
  --size-5px: 5px;
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
}

.comment {
  margin-top: calc(var(--size-20px)*5);
  font-size: var(--size-20px);
}

.input {
  display: flex;
  justify-content: center;
}

.input div {
  margin: var(--size-20px);
  display: flex;
  justify-content: baseline;
}

input {
  width: calc(var(--size-5px)*10);
  background-color: var(--color-white);
  text-align: right;
  border-radius: var(--size-5px);
}

.button {
  margin: calc(var(--size-20px)*2) 0;
  text-align: center;
  width: calc(var(--size-5px)*60);
  height: calc(var(--size-20px)*1.5);
}

.result {
  margin-top: calc(var(--size-20px)*2);
  font-size: var(--size-20px);
}

3. Javascript

// 3. 오늘 날짜를 가져옴
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();

// 2. getValue: 사용자가 입력한 textbox의 value를 각각 변수에 할당
function getValue() {
  const inputYear = document.querySelector('.year').value;
  const inputMonth = document.querySelector('.month').value;
  const inputDate = document.querySelector('.date').value;
  return {year: inputYear, month: inputMonth, date: inputDate};
}

// 1. querySelector로 버튼을 선택하고 버튼이 클릭되면(addEventListener) getValue를 실행함
function onButtonClick() {
  const button = document.querySelector('.button');
  button.addEventListener('click', () => {calculateAge(getValue())});
}

// 5. 출력(당신의 만 나이는 calculateAge의 return값입니다.)
function printAge(age) {
  const resultContainer = document.querySelector('.result');
  resultContainer.innerHTML = `<p>당신의 나이는 만 ${age}세입니다.</p>`

}

// 4. 나이를 계산하여 출력
function calculateAge(dateValue) {
  const { year, month, date } = dateValue;
  // 구조분해할당
  if (month > mm || (month = mm && date > dd)) {
    // 생일 아직 안지났으면 return yyyy-year-1
    return printAge(yyyy-year-1);
  } else {
    return printAge(yyyy-year);
  }
}

// 0. main system. 버튼을 클릭하면(onButtonClick) textbox의 값을 받아와(getValue) 계산을 수행(calculateAge)
onButtonClick();

프로그램이 작동되는 순서를 생각하고, 이를 기능별로 쪼개서 생각하고 함수를 만들고자 노력했다.

onButtonClick 함수에서 querySelector를 이용해 확인 버튼을 선택하고 addEventListener 매소드를 이용해 확인 버튼이 클릭될 때 calculateAge 함수를 콜백하도록 하였다. calculateAge 함수는 사용자가 입력한 textbox의 값을 인자로 전달해야 하므로, textbox의 값을 반환하는 getValue 함수를 인자로 삼았다.

getValue 함수에서 textbox의 값을 각각의 변수에 할당하고, 이를 객체로 반환하였다.

이렇게 반환된 객체를 calculateAge 함수에서 구조 분해 할당을 이용하여 각각의 변수에 할당하고, 생일이 지난 경우와 지나지 않은 경우를 나누어 계산하였다.

최종적으로 printAge 함수에서 calculateAge의 결과값을 전달받아 HTML에 출력하도록 하였다.

4. 개선점

정말 간단한 기본 기능만을 구현한 상태이므로 조금 더 세세하게 다듬을 필요가 있다.

- year, month, date 변수의 범위 제한 필요(범위를 초과할 경우 alert)

- 한국 나이도 출력되도록 기능 추가