Ported the "Add Custom Link" feature to Frontend using JavaScript

[CharanMN7]

I wrote all of the JavaScript code in an index.js file. First, I removed the backend dependency of the Add Custom Link button.

Then, I added a data-index attribute to get the number of link fields when the page first loads, using the variables: lastsite_index and num_clinks. I stored this value inside a global variable called index, which I assumed to be beginning from 0. It was just to make sure if any changes were made to the number of link fields in the future.

After this, I created an event listener for the Add Custom Link button with code that allows it to add an extra custom field. And, I used a little arithmetic with the index variable to calculate the Custom Link number.

Finally, at the end, I used a little math again to calculate the position of the last custom link component and place the new custom link component after it.

I tested the whole thing locally on my laptop, and the PHP backend was able to handle these extra fields created entirely in the frontend. The resulting output had all the extra links I gave it. Here's the preview output:

(I didn't provide any icons)

[chriskthomas]

This looks good. I just have to made an edit on the github action to copy the js file.

[chriskthomas]

Thanks! It's already up. Great work!

[CharanMN7]

Thanks 🙌