Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution to Profile card component challenge using, Custom Element

#fetch#accessibility
imad 3,310

@imadbg01

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I manage to use web component to solve this challenge, I create a custom DOM Element using Shadow DOM and HTML templates, and as a add bonus to this challenge I want to use Random User API, to fetch more users and make component more dynamic, but I wasn't able to render data intro component, *I have data in console *, the reason for that I guess attributeChangedCallback Method , I new that is not part for this challenge, but any help with how can I update the attribute on the DOM when API response sync, are more than welcomed.

Community feedback

faizan 2,420

@afaiz-space

Posted

Hey @imadbg01,

  • circle background image set in the body element of the CSS file. also, remove it from the HTML file.
1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord