What are the links to the NFTs? (core project) + autofill principal in field

[pk-devs]

Hey,

I have uploaded some artwork on my website but I would like to add a

LINK TO NFT

so the visitor can copy paste the link and use the minter.

Once the canister with my webpage is deployed on --network ic , what will the links to them be? (at the moment the path is as follows: ~/src/minter_assets/assets/green.svg. )

By my first question you probably understand that I am a beginner so no surprise that there will be a second question :)

I've been researching how to autofill the field with the principal id once the wallet is connected but I am lost.. can someone point me to some resources on how to make this happen?

I have found so many different JavaScript solutions and I have tried 3 of them and no one works so if someone can push my into the right path I would be very grateful.

Thanks!

[saikatdas0790]

The easiest way I can think of to do this is as follows:

• On the authenticate method that you are calling from your frontend, return the principal ID of the user who just logged in to your frontend JS
• Have a text (p, label, span, etc.) tag in your frontend markup that is going to be populated with the returned principal ID

BONUS: Have a COPY button next to the text element containing the principal that interacts with the user's clipboard and puts the principal into their clipboard for use elsewhere. More documentation here

[pk-devs]

Thank you for your help and input. I have never used html, css or even a terminal before this course (I did read up on it before the course but no practice) so please be patient with my basic questions and that it takes time for me to grasp JavaScript.

A bit length answer but want to provided background and insights.

Status:

I have a label as text in .html which I want to populate with the principal with the id="principal". I have used Stoic for authentication. I can return the principal in the console by the code: console.log(identity.getPrincipal().toText());

As far as I can understand, I can access the principal by the code "identity.getPrincipal().toText());

Now, when I want to access this Principal and use it to populate my label I have written the following code in index.js (is this the right place to put the code?) :

I added an eventListener so I can run the code once the button is clicked. here is that code:

const owner_button = document.getElementById("principal");
owner_button.addEventListener("click", autoFill);

Now I want to create a function that populates the label (correct workflow? and I am still in index.js):

function autoFill() {
document.getPrincipal().toText.value = Principal;

var x = document.getPrincipal();

And this is where I am stuck I think. How do I tell it to populate my label?

I am far off from solving it? Down the wrong path or what's your input?

Yesterday I tried more than 3 different resources of JavaScript codes to get it to work but they all confused me so I don't know my own name anymore hehe.

So, my question here is if you can point me to some resources that will help me reach my goal?

I tried playing around with this yesterday: https://benalexkeen.com/autofilling-forms-with-javascript/ and this: https://www.w3schools.com/howto/howto_js_autocomplete.asp

Is the solution in that code?

I feel like I am just missing a few lines of codes but I cannot find the resources to help me connect the dots and finish the function.

I am very grateful for all help and I am having a blast coding even though I cannot get it all to work... yet! :)

[saikatdas0790]

I found some boilerplate example here

So, basically have the same thing in your code except it updates the innerHTML with the value returned by identity.getPrincipal().toText()

[pk-devs]

Thank you very much for this and all other support here in discussions and in the devs hours, thanks! I will continue trying to get this to work but first a little break :)

Good luck on all your adventures!