Over time, the number of contributors could exceed a thousand. We should separate the Card details from the app.js file by creating a separate json file. So, any new contributor who wishes to add their card will do so in the json file. This would easily maintain the contents of the app.js.

How to proceed ?

• Create a cardDetails.jsonfile
• Move the content of cardDetailsArray into cardDetails.json file
• Update the cardDetailsArray varaible so that it import cardDetails.json

Hi everyone.

Is there anything I can do to help this open source project here?

Element Misalignment

• The "Add Your Contribution" and "Search" elements are in a single row, but they are not aligned properly.
• "Search" Element can be made vertically center to make it visually more appealing

Visibility issue on medium-sized screens

• On medium-sized screens (760px - 1100px), the "Search" element is hidden.

Steps to Reproduce:

1. Open the application on a device with a medium-sized screen (e.g., tablet).
2. Navigate to the section containing the "Add Your Contribution" and "Search" elements.
3. Observe the alignment of the elements in the row.
4. Check if the "Search" element is visible on medium-sized screens.

ScreenShot

The current banner in the project serves as a vital element but may benefit from enhancements to improve its visual appeal, messaging, or functionality. This task aims to elevate the banner's overall quality and effectiveness.

Tasks:

• Refine the visual aesthetics, retaining the colour scheme and layout.
• Add animation or interactive elements to make the banner more engaging.
• Enhance the banner's responsiveness across different screen sizes and devices.

Acceptance Criteria:

• Improved banner design is visually appealing and grabs user attention effectively.
• Any text or call-to-action within the banner is retained, clear and easily readable.
• Banner enhancements do not negatively impact page load times or usability.

This issue aims to implement a search functionality that when a letter is keyed in, all names starting with letter shows and the results sorted alphabetically based on the entered letter. Additionally, this enhancement includes the creation of a function to sort names under the searched letter.

Tasks:

• Develop a search feature that accepts user input to search for names.
• Implement an alphabetical sorting function for displaying names under the searched letter.
• Create a filter mechanism to categorize names according to the searched letter.
• Integrate the search functionality with the alphabetical sorting feature.
• Perform thorough testing to ensure accurate search results and alphabetical sorting.

Acceptance Criteria:

• Users can input letters to search for specific names.
• Search results are sorted alphabetically and displayed under the respective searched letter.
• Names are properly indexed and categorized based on the entered letter.
• The implemented search functionality works smoothly without any glitches or errors.

The current interface displays all objects at once, resulting in a long list as more objects are added. Introducing pagination will improve the user interface by limiting the number of objects shown per page, enhancing readability and user experience.

Tasks:

• Implement pagination functionality using HTML, CSS, and JavaScript.
• Design a user-friendly pagination UI element.
• Integrate pagination logic to display a set number of objects per page.
• Ensure seamless navigation between pages without affecting existing functionalities.

Acceptance Criteria:

• Pagination controls are visible and intuitive for users.
• Objects are displayed in a paginated manner, reducing clutter on a single page.

Currently, the project lacks the ability for users to select their preferred language. Adding a language selector will allow users to switch between different languages, improving accessibility and usability for a wider audience.

Tasks:

• Integrate language translation functionality.
• Create language-specific versions of content or utilize a translation service/API.
• Design and style the language selector to be user-friendly and accessible.
• Test thoroughly to ensure proper functionality and accurate translations for selected languages.

Acceptance Criteria:

• The language selector is prominently displayed and easily accessible to users.
• Users can switch between languages, and the content is displayed in the selected language.
• Ensure compatibility and responsiveness across various devices and screen sizes.

🚀 Feature Proposal

Proposed Solution
Integrate a dynamic solution that fetches contributors' avatars from their GitHub profiles and displays them in the Readme. This will not only showcase the diverse community contributing to the project but also add a personal touch to the documentation.

Motivation

Adding dynamically fetched contributors' avatars to the Readme file is not just a cosmetic enhancement; it's a visual celebration of our contributors' invaluable efforts. This addition fosters a stronger sense of community, encouraging both new and existing contributors to feel recognized and connected to the project. Let's make our Readme reflect the vibrant and diverse community that drives the success of our open-source endeavor.

Example ( Following will be exactly added to your readme file.)

🤝 Contributors

Thanks go to these wonderful people: