How To Create Leap Year Checker Using JavaScript

Submitted by alpha_luna on Monday, April 25, 2016 - 16:21.
If you are looking for on How To Create Leap Year Checker Using JavaScript then you are at the right place. This simple program will ask the user to type a year in the textbox then the program will give you a message alert if the given year is a leap year or not. We all know that leap year occurs only every four years. And this year 2016 is a Leap Year. JavaScript Source Code This script will determine the given year if it is a Leap Year or Not.
  1. <script type="text/javascript">
  2. function check_year() {
  3.          var input = document.getElementById("year_input").value;
  4.  var year = parseInt(input);
  5. if (isNaN(year)) {
  6.  alert("Enter a valid year");
  7. document.getElementById("result").innerHTML = "";
  8. document.getElementById("year_input").value="";
  9. document.getElementById("year_input").focus();
  10. }
  11.  else if ((year & 3) == 0 && ((year % 25) != 0 || (year & 15) == 0))
  12. {
  13. document.getElementById("result").innerHTML =
  14. "The year <b style='color:blue;'>" + year + "</b> is a <b style='color:blue;'>LEAP Year</b>";
  15. }
  16. else {
  17.  document.getElementById("result").innerHTML =
  18. "The year <b style='color:red;'>" + year + "</b> is <b style='color:red;'>NOT A LEAP Year</b>";
  19.  }
  20.  }
  21. function clear_textbox(){
  22.  document.getElementById("result").innerHTML = "";
  23.  document.getElementById("year_input").value="";
  24.  document.getElementById("year_input").focus();
  25.  
  26. }
  27. </script>
HTML Code This source code where the user types their desired year in the textbox.
  1. <table style="border:blue 1px solid; margin-top: 182px;" width="100%">
  2.         <tr>
  3.                 <td colspan="2" style="text-align:center; color:blue;"><h2>Leap Year Checker</h2></td>
  4.         </tr>
  5.         <tr>
  6.                 <td style="text-align:center; font-size:18px; font-family:cursive; color:red;">
  7.                         Type desired year
  8.                         <br />
  9.                         <input type="text" id="year_input" style="border:blue 1px solid; width:180px; text-align:center; font-size:18px;" maxlength="4" autofocus>
  10.                 </td>
  11.         </tr>
  12.         <tr>
  13.                 <td colspan="2" height="15"></td>
  14.         </tr>
  15.         <tr>
  16.                 <td colspan="2" style="text-align:center;">
  17.                         <input type="submit" value="Check" style="border:blue 1px solid; margin-right:30px; color:blue; background:azure; font-size:18px; width:70px; cursor:pointer;" onclick="check_year()" />    
  18.                         <input type="submit" value="Clear" style="border:red 1px solid; color:red; background:azure; font-size:18px; width:70px; cursor:pointer;" onclick="clear_textbox()" />
  19.                 </td>
  20.         </tr>
  21.         <tr>
  22.                 <td colspan="2" height="20"></td>
  23.         </tr>
  25. <p id="result"></h1>
Output: This is the output if the user enters an invalid value in the textbox. Invalid This is the output if the user enters a year and the result is Leap Year. Leap Year This is the output if the user enters a year and the result is Not a Leap Year. Not Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Check an year for leap year
check year if a leap year
leap year

Add new comment

About text formats
  • 84 views