How to Categorize a Year as a Leap or Non-Leap Using VueJS?
In this article, we will demonstrate the way to categorize a year as a Leap or Non-Leap using VueJS. 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 divisible by 400 or 4 (but not by 100) it is a leap year, otherwise, it’s not.
Steps for Installation & Configuration:
Step 1: Run the following command in your command line to create a workspace for your Vue project.
npm create vue@latest
Step 2: Now, install the Vuesax package to use its styled components using the below command.
// For npm users
npm install vuesax@next
// For yarn usersyarn add vuesax@next
Step 3: After creating your Vue project move into the folder to perform different operations by visiting the folder using the below command.
cd <your-project-name>
Step to run the application:
Type the following commands in the terminal to run the application.
npm install
npm run dev
Project Structure
Example: The below example demonstrates categorization of a year as a Leap or Non-Leap using VueJS? change the App.vue code with the below code.
HTML
< template > < div class = "grid" > < form @ submit.prevent = "checkLeapYear" > < vs-row > < vs-col :sm = "size" > < vs-input type = "number" v-model = "year" input-style = "border" placeholder = "Enter the year" /> </ vs-col > < vs-col :sm = "size" > < vs-button color = "#2f8d46" type = "gradient" > Check </ vs-button > </ vs-col > </ vs-row > </ form > < div v-for = "(item, index) in leapYearArray" :key = "index" > < p >Year: {{ item.year }}</ p > < p > Leap Year: {{ item.isLeapYear ? 'Yes' : 'No' }} </ p > < hr >< br > </ div > </ div > </ template > < script > export default { data() { return { year: null, size: 6, leapYearArray: [] } }, methods: { checkLeapYear() { if (this.year === null) { return; } const yearValue = parseInt(this.year); let isLeapYear = false; if ((yearValue % 4 == 0) && (yearValue % 100 != 0)) { isLeapYear = true; } else if (yearValue % 400 == 0) { isLeapYear = true; } this.leapYearArray.push({ year: yearValue, isLeapYear: isLeapYear }); this.year = null; } } } </ script > |
Output:
Contact Us