JSFiddle - React, Tailwind, and code Playground

determining leap years

by jonchius

HTML

<div id="controls">
<p><strong><label for="year">Is it a leap year?</label></strong></p>
  <input id="year" type="text">
  <button id="check">check</button>
</div>

<div id="leapyear">
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

* { 
  font-family: 'Source Sans Pro', 'Lucida Grande', Verdana
}

input, button, label {
  font-size: 24pt;
}

button {
  background: #000;
  color: #fff;
  border: 0;
}

JavaScript

/* 
[leapyear]
a function that checks to see which in an array of years are leap years
*/

$('#check').on('click', function() {
	if (checkLeap(parseInt($('#year').val(),10))) {
		$('#leapyear').html('<p><strong>' + $('#year').val() + ' </strong> is a leap year </p>');
  } else {
  	$('#leapyear').html('<p><strong>' + $('#year').val() + ' </strong> is not a leap year');
  }
});

function checkLeap(year) {
 
 	// leap year if "divisible by 4 and indivisible by 100" or "divisible by 400"
  if (((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0))) {
  	return true;
  } else { 
  	return false;
  }
  
}