HTML / CSS
<!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>Document</title>
<style>
div > input {
width: 35px;
text-align: right;
}
</style>
</head>
<body>
<div>
<input type="text" id="years" placeholder="XXXX" />
<input type="text" id="month" placeholder="XX" />
<input type="text" id="days" placeholder="XX" />
<button id="ymdCalc">click</button>
</div>
<p id="myDay"></p>
</body>
</html>
Javascript
<script>
const $ymdCalc = document.querySelector("#ymdCalc");
function yourDay() {
const $days = document.querySelector("#days").value;
const $month = document.querySelector("#month").value;
const $years = document.querySelector("#years").value;
let result;
if (
$years < 0 ||
$days < 0 ||
$days > 31 ||
$month < 0 ||
$month > 12
) {
alert("잘못된 날짜입니다.");
return;
}
if ($days === "") {
if ($month === "" && $years !== "") {
result = $years + "년 ";
} else if ($years === "") {
result = "";
} else {
result = $years + "년 " + $month + "월 ";
}
} else {
result = $years + "년 " + $month + "월 " + $days + "일 ";
}
return (document.querySelector("#myDay").innerHTML = result);
}
$ymdCalc.addEventListener("click", yourDay);
</script>결과
설명
조건문을 이용해서
연도를 입력받으면 연도만,
월까지 입력받으면 연도와 월,
일까지 입력받으면 연, 월, 일 전부를 출력해주는 아주 간단한 코드
연도가 0 이하이거나, 제대로 된 일, 월을 입력하지 않으면 경고창을 출력한다
좀 더 재밌게 만드려면
예를들어 2월은 28일까지만(윤년의 경우엔 29일), 11월은 30일 까지만 입력할 수 있다거나,
입력받은 날자로 특정 날짜까지 얼마나 남았는지 계산기를 만들어 볼 수도 있겠다
원래 만들던건 인자를 세개 입력받아서 인자가 한개면 연도, 두개면 월, 세개면 일까지
출력하는 코드였다
근데 그렇게 함수만 만드려니까 너무 심심해서 간단하게나마 HTML/CSS 까지 만들어봤다
조건문이 계속 겹쳐있으니까 너무 코드가 난잡하고
훨씬 깔끔하게 만들어보고 싶었는데 잘 안됐다
Always, we are friend 🧡