Please follow these steps to complete this exercise.

Imagine you're building a website for a portfolio, and you want to have a profile card element that can be configured and reused easily, it's interactive and of course pretty.

• Implement a custom HTML element: Profile card -> <profile-card> </profile-card>
  • Use Vanilla JS, CSS and HTML for your component
  • Add tests for the element, you can use selenium or follow a more challenging approach doing unit tests for it.
  • What if you wanted it to preserve its own styling among websites?

• Consider creating a branch and storing your work there
• Use your imagination and feel free to ask questions

I created two different implementations, with and without templates.

The framework used for unit testing was Jest using Testing Library for querying.

Using Shadow DOM helps preserve it's own styling without clashing with other contents of the page.

You can see the app working on: https://hopeful-elion-9d1be3.netlify.app/

Clone the branch using the following command:

git clone -b profile-card https://github.com/Frenagon/interview.git

If you haven't already, install yarn on your computer and execute the following command on the root of your project:

yarn install

That's it!, you can run the project on a local server.

If you want to run the tests just execute the following command on the console:

yarn test