자바스크립트로 만나이를 구해보자 (후편)

https://koreanraichu.tistory.com/367

자바스크립트로 만나이를 구해보자 (전편)

내 어제 만나이 구현하는걸 짜면서 몇가지 추가할 게 있는데 출근해야 해서 못했다고 한 게 있었다. 네가지 있었는데 오늘은 그걸 다 구현해볼거다. 근데 생각보다 자잘한 기능이라 금방 끝남둥.

---

날짜 시작이랑 끝 정하기

이거는 JS선에서 건들 게 아니라 HTML파일에 있는 인풋태그를 건드리면 된다. input type=date 속성 중에 min이랑 max가 있는데 말 그대로 최대최소.
 

<input type="date" required pattern="\d{4}-\d{2}-\d{2}" min="1900-01-01" max="2900-12-31">

미디움 이놈들 HTML 무시하네 ㅡㅡ 저 패턴은 입력한 연도를 yyyy-mm-dd로 넘기는건데 일단 패스. 그 오른쪽에 min이랑 max 보여요? 이게 날짜 입력을 1900년 1월 1일~2900년 12월 31일로 제한한다는 얘기다.
 

그래서 최소값 저기 있음.
 

CSS 조정

이건 별거 없고 걍 마진 패딩 배경색 이런거 조절한게 다다.
 

현재 날짜 표시하기

저 스크린샷에 텍스트 한 줄 추가된 게 보이는가? 바로 오늘 날짜다. 말 그대로 오늘 날짜이기때문에 다른 날 저거 실행해보면 날짜가 다르게 뜬다.
 
사실 추가하는 절차는 간단하다. 일단 h1 아래에 h2 하나를 만들어준 다음, 자바스크립트로 가져와서 내용을 오늘 날짜로 수정하면 된다. 그래서 HTML에 한 줄, 자바스크립트에는 두 줄(가져와서 내용 바꿔야 함) 추가한 게 다다.
 

now.innerText = `오늘은 ${todayYear}년 ${todayMonth}월 ${todayDate}일입니다. `;
//오늘 날짜 표시란

백틱 만쉐이
 

미래 날짜 처리하기

UI/UX 그리고 기능 하나 만들때는 정말 여러 경우의 수를 고려해야 한다. 내 팩토리얼 짠거 보면 양수 팩토리얼 나오지 0! 나오지 소수점(정확히는 정수가 아닌 유리수) 감마펑션 때렸지 음수는 응 못해~ 했잖음? 세상은 넓고 사람들은 다양하므로 급나 나노 반도체 단위로 고려해야 할 게 많다. 잔걱정 많은 성격이 이럴 때는 도움이 된다니까... 
 
아무튼. 미래 날짜라는 게 무슨 소리냐... 오늘이 2024년 1월 16일인데 생일이 2024년 1월 30일이면 아직 안 태어난거다 그죠? 무슨 백투더퓨처도 아니고. 막말로 내가 91년생이면 90년에는 엄마 반 아빠 반이거나 엄마 뱃속에 있거나 둘 중 하나였음.
 

calButton.addEventListener('click',function(event){
    if (todayMonth > new Date(birthday.value).getMonth() + 1) { //현재 날짜의 월이 생일보다 크다면
        //만나이 겟또 
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear()}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
    else if (todayMonth == new Date(birthday.value).getMonth() + 1 && todayDate >= new Date(birthday.value).getDate()) { //현재 날짜의 월이 생일과 같'고' 현재 날짜의 일이 생일보다 같거나 크다면
        //만나이 겟또
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear()}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
    else if (todayYear - new Date(birthday.value).getFullYear() -1 < 0) { //생년월일로 미래의 날짜를 입력한다면?
        alert('미래 날짜로 만 나이를 계산할 수 없습니다!') //응 계산 못해요 

    }
    else { //아녀?
        //응 멀었어
        yourAge.innerText = `만 ${todayYear - new Date(birthday.value).getFullYear() - 1}세입니다. `;
        yourAge_div.appendChild(yourAge);
    }
})

탭 정리하기 귀찮아서 일괄로 넣었는데, 저기 세번째 else if를 보면 다른 if들과 달리 innerText가 아니고 alert가 들어가 있다. 위에도 썼지만 생일이 현재 날짜보다 미래라는 건 아직 태어나지 않았다는... 그니까 엄마 반 아빠 반이거나 아직 뱃속에 있을 시기니까 만 나이라는 개념이 있을 수가 없다.
 
사실 저거 if를 또 몇개나 들이 부어야 하나 했는데 미래 날짜로 하면 만나이 걍 음수되더라… 그래서 만나이 계산했는데 음수뜨면 알림창 ㄱㄱ하게 했다. 그거 말고 뭐 크게 수정된 건 없음.