[FEATURE] Implement Search Bar Design & Functionality for SocialRepo

[Param302]

Implement Search Bar Design & Functionality

Overview

Implement the search bar design in HTML/CSS only as provided in the following image, with the Add link button functionality. Also, make it functional. Whenever a user types anything it should search the provided text in li list items i.e. link container, in both the link as well as in alt text of it's respective social media icon and show only those in the social media links container i.e. ul.

Requirements

• Background color of parent container of search bar & add link button must be same as the background color of header. (Use declared CSS variables)
• The alignment of search bar and + (add link button) either be same as displayed in above image or you can be creative.
• Not the search bar should stays under the edit section only.
• Use Semantic HTML, avoid using div if possible.
• Remove Edit Panel text heading from edit section.

  <section id="edit">
      <!-- Search bar & add link button should be here -->
  </section>

• Must follow the Code Guidelines provided.
• Typing Anything in search bar must invoke a function in JS which searches the entered text in alt text of all social media icons as well as in the link of the user.
  • It should also display those li list items which has the entered text in ul container.
• If user cleared the search bar, then it should display all the social links li in ul container (which is default behaviour).
• To test the code, setup the extension by following these steps.
• Use the Color Palette provided. You can add a light purple color as the background of container.
• Don't use favicons for add link button, rather download the relevant png add icon and store it in logos folder.

Additional

• Apply focus, hover and active effect on search bar & add link button
• Add padding for better visual of icons.

Results while typing anything in search bar

1

2

If you have any suggestion or idea, you're welcome to share.

Let's implement SocialRepo's search functionality! 🙌

[HarshRaj2717]

Hey, I would like to work on this but am a bit busy rn, will come onto this by Tuesday evening and try to implement by end of the week.. you can assign this to me if it doesn't need to be implemented early.

[Jay-ARORA-5572]

I would like to contribute in this issue. Please assign to me #GSSoC2024

Add a comment

[Param302]

I would like to contribute in this issue. Please assign to me #GSSoC2024

Add a comment

Hey @Jay-ARORA-5572 , Good to see that you want to contribute in this issue. But let me clarify you that this is not under GSSOC or any other program.

Let me know your confirmation and I will assign you this issue.

[Jay-ARORA-5572]

Ok if not from GSSoC, I still want to contribute.

[ghanashyam-r]

Hey @Param302 could you assign this issue to me

[Param302]

Sure @ghanashyam-r , I am assigning you this issue.

[ghanashyam-r]

Sorry i am a bit busy please assign this to someone else

[shubhusion]

Hi @Param302 , Assign this issue to me

[Param302]

Hi @Param302 , Assign this issue to me

Sure @shubhusion , I am assigning it to you!