[FEATURE] Implement Confirmation Message Popup of Link Copied

[Param302]

Implement Confirmation Message Popup of Link Copied

Overview

Implement a confirmation message box in Home panel which should show {social_handle} profile copied. with a checkmark before the text.

Requirements

• Create an element in #home panel, which should be shown as a popup stating {social_handle} profile copied.
• The element should only be visible to user, whenever use clicks the specific profile icon.
  • The event listener 'click' is already handled in createSocialLinks(key, value) function inside index.js.
  • You have to write the JS code inside showCopyMessage(key) function in index.js file.
• Style
  • It should appear in center bottom of the Home panel only.
  • It should have the same background color as of header.
  • The popup box should contain checkmark (you can use emoji ✅ or any unicode character) and the text.
  • The popup should get auto hide after 3 seconds.
  • The popup must have the position as absolute so it doesn't interrupt the style of home panel.
  • The popup must be absolute to #home.
• Must follow the Code Guidelines provided.
• To test the code, setup the extension by following these steps.
• The Layout should be written in index.html under #home element only, The design should be added in style.css and the functionality should be implemented in index.js only.

Structure

• Structure of showCopyMessage(key) in index.js file is as follows:

   function showCopyMessage(key) {
       console.log(`Copied ${key} to clipboard!`);
   	// Your code should be added here
   };

• Structure of #home panel in index.html file is as follows:

   <section id="home">
       <ul id="socialLinks">
       </ul>
   	<!-- Your code should be added here -->
   </section>

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

Let's implement SocialRepo's confirmation popup! 🙌

[kesharibhai84]

Hi @Param302 i would like to work on this issue, i am new to open source contribution, if there is any contribution guidelines please do let me know.

[Param302]

Hi @Param302 i would like to work on this issue, i am new to open source contribution, if there is any contribution guidelines please do let me know.

Hey @kesharibhai84 sure!
I am assigning you the issue, there are some basic Contribution Guidelines which every contributor has to follow.

If you have doubts, please let me know.

[kesharibhai84]

Hi @Param302 ,after setting up the project i found that i am not even able to add profile links and not even able to search for social website when im searching with the help of search box. then how can i go further for checking whether the link has been copied or not

[Param302]

Hi @Param302 ,after setting up the project i found that i am not even able to add profile links and not even able to search for social website when im searching with the help of search box. then how can i go further for checking whether the link has been copied or not

The searching is not working in SocialRepo as of now, but you can add via + button, don't close the extension after adding, make sure you are doing everything in same window.

You can try this by opening index.html in live server too, just don't refresh or close after adding, do it in same time.

[Param302]

Hey @kesharibhai84 ,
Is it working?
Or if you are facing any issue except search bar, please share the video of same.

[sameer2799]

Hi @Param302 , hope this issue is still open. I have worked at it. Do take a look at it. I have added bare minimum style, though i will need help with the styling part. I am attaching video and my code changes.

Screencast.from.10-07-24.10.12.08.PM.IST.webm