Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to categorize a year as a Leap or Non-Leap using Vue?
Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them.
In this article, we will use the Vue filters to check whether a string is a Leap year or not. A leap year has 366 days, whereas a non-Leap year has only 365 days. We can use logic to check whether a year is a Leap or not. If a year is divisble by 400 or 4 it is a leap year, else it is not a leap year.
if (year % 100 === 0) {
if (year % 400 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
} else {
if (year % 4 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
}
Steps
We can follow these steps to categorize a year as a leap or non-leap year −
Define a function called leapyear that takes a year parameter.
Check if the year is divisible by 100 using the modulus operator (%) to get the remainder when the year is divided by 100. If the remainder is 0, it means the year is evenly divisible by 100.
If the year is divisible by 100, check if it is also divisible by 400. If the remainder when the year is divided by 400 is 0, it means the year is a leap year. Return the string "Leapyear" in this case.
If the year is divisible by 100 but not by 400, it is not a leap year. Return the string "Non-Leapyear" in this case.
If the year is not divisible by 100, it may still be a leap year if it is divisible by 4. Check if the remainder when the year is divided by 4 is 0. If it is, the year is a leap year. Return the string "Leapyear" in this case.
If the year is not divisible by 100 and not divisible by 4, it is not a leap year. Return the string "Non-Leapyear" in this case.
Example: Checking if a year is a Leap year or not
First, we need to create a Vue project. To do this you can refer to this page. Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Defining the years & checking if its leap or not
const parent = new Vue({
el: "#parent",
data: {
year1: 2021,
year2: 1996,
year3: 1900,
year4: 2000,
year5: 1997,
},
filters: {
leapyear: function (year) {
if (year % 100 === 0) {
if (year % 400 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
} else {
if (year % 4 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
}
},
},
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<!-- Checking if an year is leap or not -->
<p><strong>{{year1}} : </strong>
{{ year1 | leapyear }}
</p>
<p><strong>{{year2}} : </strong>
{{ year2 | leapyear }}
</p>
<p><strong>{{year3}} : </strong>
{{ year3 | leapyear }}
</p>
<p><strong>{{year4}} : </strong>
{{ year4 | leapyear }}
</p>
<p><strong>{{year5}} : </strong>
{{ year5 | leapyear }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>{{year1}} : </strong> {{ year1 | leapyear }} </p>
<p><strong>{{year2}} : </strong> {{ year2 | leapyear }} </p>
<p><strong>{{year3}} : </strong> {{ year3 | leapyear }} </p>
<p><strong>{{year4}} : </strong> {{ year4 | leapyear }} </p>
<p><strong>{{year5}} : </strong> {{ year5 | leapyear }} </p>
</div>
<script>
// Defining the years & checking if its leap or not
const parent = new Vue({
el: "#parent",
data: {year1: 2021, year2: 1996, year3: 1900, year4: 2000, year5: 1997,},
filters: {
leapyear: function(year) {
if (year % 100 === 0) {
if (year % 400 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
} else {
if (year % 4 === 0) {
return "Leapyear";
} else {
return "Non-Leapyear";
}
}
},
},
});
</script>
</body>
</html>
In the above example, we check for five years and display if the particular year is a leap year or non-leap year.
66 Views
