[FEATURE] Implement Add Link Box in Edit Panel

[Param302]

Implement Add Link Box in Edit Panel

Description

Implement the add link-box feature for Edit Panel. Whenever user clicks on :heavy_plus_sign: button in edit panel, a new link-box will be created and added in #links-container ul (unordered list) at the top.

Requirements

• Whenever user clicks on add-link-btn button (:heavy_plus_sign:), a new link-box should be created via JS.
• The new link-box should be added to the top of #links-container ul (unordered list).
• The new link-box should be highlighted as shown in the 2nd image.
• The placeholder of input element should contain the random placeholder text which can be obtained via calling getRandomPlaceholderText().
• By default, the image of icon class should be a default.png which should be 🌐 icon.
  • You can download this icon from the internet.
  • Icon should be maximum of 256x256 pixels.
  • Icon should be of png type.
  • Icon should be stored in assets/logos folder.
• All the JavaScript code should be written in index.js
• Do NOT modify any code HTML/CSS files.
• Must follow the Code Guidelines provided.

Structure

Structure of a link-box container is defined as follows:

<li class="link-box">
    <img src="../assets/logos/drag.png" alt="dragger" class="dragger">
    <div class="link">
        <img src="../assets/logos/default.png" alt="default icon" class="icon">
        <input type="text" placeholder="<placeholder text>" />
        <button class="preview" disabled>
            <img src="../assets/logos/share.png" alt="preview link">
        </button>
    </div>
</li>

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

Let's implement SocialRepo's add link box feature! 🙌

[shubhusion]

Hi @Param302 , assign this issue to me

[Param302]

Hi @Param302 , assign this issue to me

Sure @shubhusion !

[DevvMaurya]

hi @Param302 assign this to me.! i can do it quickly.

[Param302]

hi @Param302 assign this to me.! i can do it quickly.

Hey @DevvMaurya , I appreciate your enthusiasm but this issue is already assigned, you can work on other issues, there are various issues to contribute.

https://github.com/Param302/SocialRepo/issues

[shubhusion]

Hi @Param302,

Due to other work commitments, I will be unable to complete it within the next 2-3 days. If you need it urgently, please ask @DevvMaurya to handle it. If he is unable to do so, I will take care of it once I am available.

[Param302]

Hi @Param302,

Due to other work commitments, I will be unable to complete it within the next 2-3 days. If you need it urgently, please ask @DevvMaurya to handle it. If he is unable to do so, I will take care of it once I am available.

Oh oky no worries!

@DevvMaurya are you still up for this? Let me know I will assign you the issue.

[DevvMaurya]

@Param302 Okay.! I'm ready..!

[Param302]

@Param302 Okay.! I'm ready..!

Oky, super fast 😅 Appreciated!

Please do a Pull Request @DevvMaurya

[DevvMaurya]

@Param302 Actually I already fixed this issue in my free hour😅. take a look.

[Param302]

@Param302 Actually I already fixed this issue in my free hour😅. take a look.

Great, I will check and merge it soon.