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 is the list of JavaScript programs available here:

Check Leap Year or Not. This program doesn't allow the user to enter the data.
Check whether the year given by the user is a leap year or not. This program allows the user to enter the data (year) using an HTML text box.

How do I check for a leap year?

A year is called a 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 is made to find leap years, refer toLeap Year Formula Explained to get all the required information about leap years.

Check Leap Year or Not in JavaScript

This is the simplest JavaScript program to check if a year is a leap year or not. That is, this program does not allow the 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 the yr variable to 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 the User

This program uses an HTML text box to receive the year input from the user. That is, this program asks the 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 that states that an HTML element gets hidden where it is written. Because it is written in a p (paragraph) tag whose id is resPara, this paragraph gets hidden initially.

When the user clicks on the button "Check," the JavaScript function fun() gets called. And all the statements of this function get 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 the 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 the Previous Program

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

Enter the Year:

JavaScript Online Test

« Previous Program Next Program »

Liked this post? Share it!