Leap year program in JavaScript with example

JavaScript program to check if a year is a leap year or not:

With this JavaScript example program, we will learn how to check if a year is a leap year or not. I will explain to you how to check for a leap year and how to write this programmatically in JavaScript.

A year is called a leap year if it is divisible by 4. For century years, it should also be divisible by 400.

Algorithm to check if a year is a leap year or not:

We can use the below algorithm to check for a leap year:

Take the year as input from the user and assign it to a variable.
Check if it is divisible by 4 or not. If not, it is not a leap year.
If it is divisible by 4, we have to check if it is a century year or not. We need to divide the number by 100. If it is divisible by 100, it is a century year. Else it is not a century year.
If it is not a century year, it will be a leap year because it is divisible by 4.
If it is a century year, check if it is divisible by 400 or not.
If it is divisible by 400, it is a leap year as it is divisible by 4 and also it is a century year. Else, it is not a leap year.

Example 1: JavaScript program to check if a year is a leap year or not:

The following JavaScript program can check if a year is a leap year or not:

let year = 2000;
let isLeapYear = false;

if (year % 4 === 0) {
  if (year % 100 === 0) {
    if (year % 400 === 0) {
      isLeapYear = true;
    } else {
      isLeapYear = false;
    }
  } else {
    isLeapYear = true;
  }
} else {
  isLeapYear = false;
}

if (isLeapYear) {
  console.log(`${year} is a leap year.`);
} else {
  console.log(`${year} is not a leap year.`);
}

Here,

The variable year is the year to check and isLeapYear is a boolean value. This value will be true if the year is a leap year. Else, it will be false.
It checks if the year is divisible by 4 or not. If not, it is not a leap year.
If yes, it checks if the year is divisible by 100 or not. If not, it is a leap year as it is divisible by 4.
If it is divisible by 100, it checks if it is divisible by 400 or not. If yes, it is a leap year. Else, it is not a leap year.
It assigns false to the isLeapYar variable if the year is not a leap year. Else, it assigns true to it.
Based on the value of isLeapYear, it prints a message to the user.

If you run this program, it will print the below output:

2000 is a leap year.

You can change the value of the year variable and try it for different years.

Example 2: JavaScript program to check if a year is a leap year or not with a separate function:

Let’s use a separate function to do the leap year calculation. This function will take the year as the parameter and return one boolean value. It will return true if the year is a leap year and false if it is not.

Below is the complete program:

function isLeapYear(year) {
  if (year % 4 === 0) {
    if (year % 100 === 0) {
      if (year % 400 === 0) {
        return true;
      }
    } else {
      return true;
    }
  }
  return false;
}

let year = 2000;

if (isLeapYear(year)) {
  console.log(`${year} is a leap year.`);
} else {
  console.log(`${year} is not a leap year.`);
}

With this approach, we have reduced the number of else statements. It is passing the variable year to the isLeapYear method. If it returns true, it moves inside the if statement, and it moves inside the else statement if it returns false.

Example 3: Leap year program with HTML and JavaScript:

We can use the above JavaScript snippet with HTML. The following program will take the year as input in an HTML input component box and show the result to the user in an h3 component.

Create one index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      function isLeapYear(year) {
        if (year % 4 === 0) {
          if (year % 100 === 0) {
            if (year % 400 === 0) {
              return true;
            }
          } else {
            return true;
          }
        }
        return false;
      }

      function checkLeapYear() {
        let year = document.getElementById("yearInput").value;
        if (isLeapYear(year)) {
          document.getElementById("result").innerText  = "It is a leap year";
        } else {
          document.getElementById("result").innerText  = "It is not a leap year";
        }
      }
    </script>
  </head>
  <body>
    Enter the year : <input id="yearInput" />
    <button onclick="checkLeapYear()">Check Leap year</button>
    <h3 id="result" />
  </body>
</html>

Here,

It has one input with id yearInput to read the user input year.
The button calls the function checkLeapYear on click. Inside this function, it reads the user-entered year value and calls the function isLeapYear to check if the year is a leap year or not. - Based on the return value of isLeapYear, it changes the text of the h3 component.

Open the index.html file in any browser and it will look as below:

You can enter different year values and click on the button to check the result.

CodeVsColor