JSFiddle - React, Tailwind, and code Playground

by isuru_nan

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
	<form name="theForm" onsubmit="return checkLeapYear()">
		<label for="year">Year: </label>
		<input type="text" name="year">
		<input type="submit" value="Submit">
	</form>

    <script src="src/script.js"></script>
  </body>
</html>

JavaScript

function checkLeapYear() {
	event.preventDefault();
	
	let yearValue = document.forms["theForm"].elements.year.value;
	
	if (yearValue.trim() === "") {
		alert("Year value cannot be blank");
		return false;
	}
	
	if (isNaN(yearValue)) {
		alert("Enter a valid year");
		return false;
	}
	
	if (yearValue % 100 === 0 && yearValue % 400 === 0) {
		alert(yearValue + " is a leap year");
		return true;
	}
	
	if (yearValue % 100 !== 0 && yearValue % 4 === 0) {
		alert(yearValue + " is a leap year");
		return true;
	}

	alert(yearValue + " is not a leap year");

	return false;
}