How To Create Leap Year Checker Using JavaScript

[Buddy]

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
    
    >
    
24. </
    
    table
    
    >
    
25. <p
    
    id
    
    =
    
    "result"
    
    ></
    
    h1
    
    >
    

Output:

This is the output if the user enters an invalid value in the textbox.

This is the output if the user enters a year and the result is Leap Year.

This is the output if the user enters a year and the result is Not a Leap Year.

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.

Download