Leap Year Program In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of leap year program in JavaScript, here we asking year dynamically for check whether user entered year is leap or not by some condition.
As we know rule of finding leap year (i.e) which year reminds zero when multiplying with 400 and 4 and also non zero reminder when multiples of 100 that will be leap year otherwise which year we can consider as not leap year.
Step By Step Guide On Leap Year Program In JavaScript :-
Here we defined two input tags one is for collecting year dynamically from user, another one for submits user input values and last one div for display result on webpage.
In script we collecting user input value of year and stored on variable ‘r’ by id ‘inpt’ and using if condition we checking which inputs are satisfying defined condition which is consider as leap year otherwise we can consider as not leap year and those result message are appended on div element ‘res’ by innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>LEAP YEAR PROGRAM</title>
</head>
<body>
<input type="text" id="inpt" placeholder="Enter Year">
<input type="submit" value="Check" onclick="fun()">
<div id="res"></div>
<script>
function fun(){
var r=document.getElementById('inpt').value;
if((r%4 == 0) && (r%100 != 0) || (r%400 == 0)){
document.getElementById('res').innerHTML="<br>"+r+" is leap year";
}
else{
document.getElementById('res').innerHTML="<br>"+r+" is not leap year";
}
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined input tag with id ‘inpt’ for collecting users input and submit type input tag defined for generate submit button and its defined with onclick event for initialize function fun() call defined in script.
- For displaying result on webpage we defined div tag with id attribute ‘res’. In script we defined function fun().
- Here we collecting users input dynamically and stored on variable ‘r’ then using if condition we checking which years meets that condition true it will leap year so we displayed message ‘is leap year’ with user entered year otherwise we that will be not leap year.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to check whether year is leap or not using javascript.
When we executes program on browser we can see the input box with submit button here user needs to give year for check which is leap or not.
After given input when user clicks on submit button function fun() will loads and verifying which year is leap or not by defined condition then displaying respective result message on webpage.
I hope this tutorial on leap year program in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
