JavaScript Program to Check Leap Year

In this article, you will learn and get code to check whether a year is a leap year or not in JavaScript. Here are the list of JavaScript programs available here:

Check Leap Year or Not. This program doesn't allows user to enter the data
Check whether the given year by user is a Leap Year or Not. This program allows user to enter the data (year) using HTML TextBox

How to Check for Leap Year ?

A year is called as leap year, when

either it is divided by 4 but not by 100
or it is divided by 400

If you are curious to understand, how this formula made to find leap year, refer to Leap Year Formula Explained to get every required things about leap year.

Check Leap Year or Not in JavaScript

This is the simplest JavaScript program to check leap year or not. That is, this program does not allows user to enter the year.

<!doctype html>
<html>
<head>
<script>
var yr=2004;
if((yr%4==0) && (yr%100!=0))
  document.write(yr + " is a Leap Year");
else if(yr%400==0)
  document.write(yr + " is a Leap Year");
else
  document.write(yr + " is not a Leap Year");
</script>
</head>
<body>

</body>
</html>

Save this code in a file with .html extension. Open the file in a web browser. Here is the output:

Now change the value of yr variable with 1900 and open the file again, or refresh the web browser's window. Here is the output you'll see:

The function, document.write() writes data (inside its braces) into an HTML output.

Receive Year Input from User

This program uses HTML TextBox to receive the year input from user. That is, this program asks from user to enter the year, then checks and prints whether it is a leap year or not.

<!doctype html>
<html>
<head>
<script>
var yr, temp;
function fun()
{
  yr = parseInt(document.getElementById("year").value);
  if(yr)
  {
    temp = document.getElementById("resPara");
    temp.style.display = "block";
    if((yr%4==0) && (yr%100!=0))
      document.getElementById("res").innerHTML = "a Leap";
    else if(yr%400==0)
      document.getElementById("res").innerHTML = "a Leap";
    else
      document.getElementById("res").innerHTML = "not a Leap";
  }
}
</script>
</head>
<body>

<p>Enter the Year: <input id="year"><button onclick="fun()">Check</button></p>
<p id="resPara" style="display:none;">It is <span id="res"></span> Year</p>

</body>
</html>

Here is its sample output:

Now supply any year say 2008 (as input) and click on the button, Check. Here is the output you will see:

The following code:

style="display:none;"

is a CSS code, which states that, an HTML elements gets hidden, where it is written. Because it is written in a p (paragraph) tag whose id is resPara, therefore this paragraph gets hidden initially.

When user clicks on the button, Check, a JavaScript function fun() gets called. And all the statements of this function gets executed.

The following JavaScript statement:

yr = parseInt(document.getElementById("year").value);

states that, the int (integer) value of an HTML element whose id is year gets initialized to yr. And the following JavaScript statement:

temp.style.display = "block";

states that, an HTML element whose id is stored in temp variable gets visible after executing this code. And here is another JavaScript statement:

document.getElementById("res").innerHTML = "a Leap";

that states, the string value, a Leap gets written to an HTML element's output whose id is res.

Live Output of Previous Program

Here is the live output of previous program to check whether the year given by user is a Leap year or not in JavaScript:

Enter the Year:

JavaScript Online Test

« Previous Program Next Program »