whatever/within-a-year.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Is it within a year?</title>
		<style>
			form {
				/* Just to center the form on the page */
				margin: 0 auto;
				width: 400px;
				/* To see the outline of the form */
				padding: 1em;
				border: 1px solid #ccc;
				border-radius: 1em;
			}

			ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			form li + li {
				margin-top: 1em;
			}

			label {
				/* To make sure that all labels have the same size and are properly aligned */
				display: inline-block;
				width: 90px;
				text-align: right;
			}

			input,
			textarea {
				/* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
				font: 1em sans-serif;
				/* To give the same size to all text fields */
				width: 300px;
				box-sizing: border-box; /* To harmonize the look & feel of text field border */
				border: 1px solid #999;
			}

			input:focus,
			textarea:focus {
				/* To give a little highlight on active elements */
				border-color: #000;
			}

			textarea {
				/* To properly align multiline text fields with their labels */
				vertical-align: top;
				/* To give enough room to type some text */
				height: 5em;
			}

			.button {
				/* To position the buttons to the same position of the text fields */
				padding-left: 90px;
				/* same size as the label elements */
			}

			button {
				/* This extra margin represent roughly the same space as the space between the labels and their text fields */
				margin-left: 0.5em;
			}
		</style>
	</head>

	<body>
		<form>
			<ul>
				<li>
					<label for="claim-date">DOS:</label>
					<input type="text" id="claim-date" />
				</li>
				<li>
					<label for="host-date">Host received:</label>
					<input type="text" id="host-date" />
				<!-- </li> -->
				<!-- <li class="button"> -->
					<button type="submit" onclick="doCalculate();">Calculate</button>
				</li>
			</ul>
		</form>

<script>
const setDateBackOneYear = function(date) {
    lastYear = date.getFullYear() - 1;
    month = date.getMonth() + 1;
    dayNo = date.getDate();
    return new Date(`${lastYear}/${month}/${dayNo}`)
}

const compareDates = function(claimDate, hostDate) {
    cc = new Date(claimDate);
    h  = new Date(hostDate);
    backh = setDateBackOneYear(h);
    if (cc > backh) {
        return "Within filing limit";
    } else {
         if (!(cc < backh)) {
            return "There's exactly one year between the 2 dates";
         }
        return "Outside of 12-month filing limit";
    }
}

const doCalculate = function() {
    const cdate = document.getElementById('claim-date').value;
    const hdate = document.getElementById('host-date').value;
    alert(compareDates(cdate, hdate));
}
</script>
	</body>
</html>