JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input">

<input id=firstDate type=date>
-
<input id=secondDate type=date>

</div>

<button onclick="updateLeaps();">
Laske
</button>

<br>

<p id="output">
Karkauspäiviä: 
</p>

<script>

var dInput1 = document.getElementById("firstDate");
var dInput2 = document.getElementById("secondDate");

var output = document.getElementById("output");


function compareDates(d1, d2) {
if (d2[0]>d1[0]) return 1;
if (d2[0]<d1[0]) return -1;

if (d2[1]>d1[1]) return 1;
if (d2[1]<d1[1]) return -1;

if (d2[2]>d1[2]) return 1;
if (d2[2]<d1[2]) return -1;

return 0;

}

function dateOk(d) {
	for (let i=0; i<3; i++) {
  if (typeof d[i] !== "number") return false;
  }
  return true;
}


function isLeap(y) {
return y%4===0 && y%100!==0;
}



function updateLeaps() {
	var d1 = dInput1.value.toString().split("-").map(x=>parseInt(x));
	var d2 = dInput2.value.toString().split("-").map(x=>parseInt(x));
  
  if ( [d1, d2].every(dateOk) && compareDates(d1, d2)>=0 ) {
  
  var leaps = 0;
  for (let y=d1[0]; y<=d2[0]; y++) {
  if (isLeap(y)) {
  
  if (y===d1[0]) {
  if (d1[1]<=2) leaps += 1;
  } else if (y<d2[0]) {
  leaps += 1;
  } else { //y===d2[0]
  if (d2[1]>2 || (d2[1]===2&&d2[2]===29)) {leaps += 1;}
  
  }
  }
  
  }
  
  output.innerHTML = "Karkauspäiviä: "+leaps;


} else {
output.innerHTML = "Epäkelpo syöte!";

}

}


</script>