Vue 2: Prime Number Tracker

Easy
0.0% Acceptance

Overview

In this lab, you will be creating a simple Vue.js 2 application to maintain and display a list of prime numbers. The application consists of a single button to add prime numbers and a list to display them.

Objective

Build a Vue.js 2 app where you maintain an in-memory array of prime numbers. This array should initially be empty. When a button is clicked, it should add the next prime number to the list and display the entire list of primes in an unordered list (ul). Use the v-for directive to display the list items.

Constraints

  1. Your list of prime numbers should be displayed using Vue's v-for directive.
  2. Allow a small delay for the DOM to update after clicking the button to add a new prime number.

Steps

  1. Initialize your app: Create a new Vue instance and define your data properties and methods.
  2. Create UI elements: Add a button to add prime numbers and a ul list to display them.
  3. Bind Actions: Connect the button to a method that adds the next prime number to your in-memory array.
  4. Display the List: Use the v-for directive to display the array of prime numbers as list items in the ul.

Challenges Information

Challenge 1: Make a Button with ID 'addprime'

Create a button element with an id attribute set to addprime. This button will be used to add prime numbers to a list.

Challenge 2: Make a ul List with ID 'prime-numbers'

Create an unordered list (ul) with an id attribute set to prime-numbers. This list will display the prime numbers.

Challenge 3: Add the First Prime Number

When the button with id='addprime' is clicked once, it should add the first prime number, 2, to the list (ul) with id='prime-numbers' as an li element. Note: Allow a small delay for the DOM to update.

Challenge 4: Add the Second Prime Number

When the button with id='addprime' is clicked again, the next prime number, 3, should be added to the list (ul) with id='prime-numbers' as an li element. Ensure the previous prime numbers are still present in the list.

Challenge 5: Add the Third Prime Number

When the button with id='addprime' is clicked again, the next prime number, 5, should be added to the list (ul) with id='prime-numbers' as an li element. Ensure the previous prime numbers are still present in the list.

Challenge 6: Add the Fourth Prime Number

When the button with id='addprime' is clicked again, the next prime number, 7, should be added to the list (ul) with id='prime-numbers' as an li element. Ensure the previous prime numbers are still present in the list.

Challenge 7: Add the Fifth Prime Number

When the button with id='addprime' is clicked again, the next prime number, 11, should be added to the list (ul) with id='prime-numbers' as an li element. Ensure the previous prime numbers are still present in the list.