Add "View More" Button on Desktop/Laptop Devices

Issue: Add "View More" Button on Desktop/Laptop Devices

Description

Currently, all data is loaded at once on desktop/laptop devices. To improve the user experience and performance, limit the data displayed to 14 items at a time. A "View More" button should be added, which, when clicked, will load the next set of 14 items.

Requirements

Display a maximum of 14 items initially.
On clicking the "View More" button, load the next set of 14 items.
The button should only appear if there are more than 14 items available.
Ensure that the button continues to load more data until all items are displayed.
Once all data is loaded, the button should either disappear or be disabled.

Steps to Contribute

1. Fork the Repository

Click the Fork button at the top right of this repository's page to create a copy of the repo under your GitHub account.

2. Clone it to Your Local Machine

Open your terminal and use the following command to clone the repo:

git clone https://github.com/your-username/repo-name.git

3. Implement the "View More" Button

Step 1: Identify the section where the data is rendered in the code. Step 2: Update the logic to display only 14 items initially. Step 3: Add a "View More" button after the data list. Step 4: Implement a function that will load the next 14 items when the button is clicked. Step 5: Continue to load more data as long as items are available, and hide/disable the button once all items are displayed.

4. Ensure Responsiveness

The "View More" button should only be displayed on desktop/laptop devices. Make sure it is hidden on mobile/tablet views.

5. Test Your Changes

Test the functionality across different desktop screen sizes to ensure:

Data is properly limited to 14 items at first.

Clicking the "View More" button loads the next 14 items.
The button disappears or is disabled after all data has been loaded.
The feature does not interfere with mobile/tablet views.

6. Push Your Changes

After making the necessary changes, commit your updates using:

git add .
git commit -m "Add 'View More' button to load next 14 data items on desktop"

7. Create a Pull Request

Push your changes to your forked repository:

git push origin main

Go to the original repository and create a pull request with a description of the changes made.

Arijit-017 / ISTE-Contribution-React