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! 🙌