feat(client):Weird validation for portfolio inputs in the setting page

[Anujvaid45]

trafficstars

Checklist:

• [x] I have read and followed the contribution guidelines.
• [x] I have read and followed the how to open a pull request guide.
• [x] My pull request targets the main branch of freeCodeCamp.
• [x] I have tested these changes either locally on my machine, or GitPod.

Ref #49132

• In this issue as mentioned, I have added a image preview in the add portfolio section
• Due to this when a user enters a valid image URL, it will display a preview of the image
• Also I have added CSS file for the same
• I have also locally tested this feature and it's results are in positive direction

[ghost]

:eyes: Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[raisedadead]

Hi there,

Thanks for creating this pull request.

Please ensure you follow the PR checklist and not just tick things off; otherwise, we won't take you seriously. Respect the requirements to earn the respect of your fellow maintainers. You will also save everyone time :)

Since you are new here, please slow down and read our contributing guidelines, as we see that you may still need to catch up on a few things.

Here are some examples (expand)

1. Do not edit files directly on GitHub – while you can, it's not a good idea.

   Typos and formatting errors can break the tests.

2. Use the correct way to link issues.

   Add the issue number only in the description of the PR by updating the XXXXXX. Do not just add issue numbers everywhere and anywhere you feel like.

3. Keep mentions and review requests to a minimum.

   We understand you are excited about contributing, and our maintainers will get back to you when they can.

4. Do not work directly off your main branch.

   You can always create a new branch for the changes you are working on. That way, you can sync change to your PR branch as the main repository moves ahead while your PR is waiting in the merge queue.

Don't worry. You don't have to close this PR. Feel free to ask specific queries on improving your PR here; someone will guide you.

We are happy you are excited to contribute and appreciate you taking the time to help us. Looking forward to more contributions!

Happy Contributing.

[Anujvaid45]

Hello @raisedadead

• Sorry for missing few points in the contributing guidelines
• I have accordingly made changes
• Meanwhile my 2 tests are getting failed so currently I am working on it

[Anujvaid45]

Hello @raisedadead Could you please help me out solving these failed tests? I am not understanding what is to be done

[Anujvaid45]

Hello @Sboonny

• As mentioned , I have done all the required changes
• However, the PR tests are continuously getting failed
• It would be nice if you could help me out with this

[Sboonny]

is it okay to push a commit that sort the conflicts @Anujvaid45?

[Anujvaid45]

is it okay to push a commit that sort the conflicts @Anujvaid45?

Sorry,Couldn't understand what are you trying to say

[Sboonny]

Do you want me to sort the issue with package.json and pnpm-lock?

[Anujvaid45]

Please,It would be really helpful

[Anujvaid45]

hello @Sboonny Any update regarding the PR?

[Sboonny]

You can wrap the image in div and add the styles of the element to the wrapper to avoid the layout shifting, but still to avoid reworking and doing extra than needed, wait until a designer come up with mockup for this.

[Anujvaid45]

You can wrap the image in div and add the styles of the element to the wrapper to avoid the layout shifting, but still to avoid reworking and doing extra than needed, wait until a designer come up with mockup for this.

@Sboonny Okay,Will be Waiting for the reply

[Sboonny]

Sorry @Anujvaid45, this should have been discussed on the issue to save your time, this is an oversight from me.

To solve the looks:

• Add preview image, it is a similar strategy to the profile image, so you can copy it without worry.
• Make the image or its surrounding wrapper to follow the same dimensions of the profile image card.

if you need help, feel free to mention so in the forum or discord.

[Sboonny]

Sorry @Anujvaid45, this should have been discussed on the issue to save your time, this is an oversight from me.

To solve the looks:

• Add preview image, it is a similar strategy to the profile image, so you can copy it without worry.
• Make the image or its surrounding wrapper to follow the same dimensions of the profile image card.

if you need help, feel free to mention so in the forum or discord.

[raisedadead]

Hi,

We are closing old issues/pull requests that we think are stale. If you still need help or are fixing this, please open a new issue/pull request.

Thanks for your understanding.

Happy contributing.