[FEATURE] Update Link Container

[Param302]

Update Link Container

Overview

Whenever a user enters a valid social media link in link container, it should displays the relevant social media icon in link container and enable the preview button.

Details

• Consider a prototype function isValidURL(url) in JS, which takes the URL as input and returns a bool: true if it's valid, else false.
• Whenever a user enters a URL, it should validate first using isValidURL(url).
• If the URL is valid, the preview button should be enabled (disabled by default).
• After validating, it should searches the relevant link through the socialLinks dict. The socialLinks dict is already generated in index.js file.

   const socialLinks = getSocialLinks();

• If the entered link is present in the values of socialLinks, retrieve the key.
  Hint: Make sure to replace or trim the <username>, also handle the entered username.
• After fetching the key, search the ${key}.png file in assets/logos folder, if the ${key}.png is present, fetch that logo and set it to icon class (img element).
• If the entered link is not present in socialLinks or no ${key}.png exists, it should use a default icon 🌐, you can download the default icon from internet in assets/logos folder.
• Write the functionality in index.js, style in style.css.
• Must follow the Code Guidelines provided.

Structure

Structure of the link container is defined as follows in index.html file.

<div class="link">
    <img src="../assets/logos/<key>.png" alt="discord icon" class="icon">
    <input type="text" placeholder="Paste Social Handle here" />
    <button class="preview">
        <img src="../assets/logos/share.png" alt="preview link">
    </button>
</div>

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

Let's implement SocialRepo's link container updator! 🙌

[kimchiiboiii]

Hey, can I be assigned this issue?

[Param302]

Hey, can I be assigned this issue?

Yeh sure @kimchiiboiii !
I am assigning you this issue, you can work on it.