Create a profile card with Vanilla JS
A profile card is a card that contains information related to a user. The profile card we will be creating will display a user’s name, location, summary, phone, and email address.
Let’s get started.
First let’s create the following files:
Our profile card can be divided into two sections. One section will display a hero header, the other section will display the user’s information.
Now it is time to make our profile card look good. First we will import the font family Lato from Google Fonts.
For the profile card’s hero header, we will import an image from https://picsum.photos/. One cool thing about using this API is that it will allow us to set the dimensions of a random image depending on the path and parameters we define in the URL. For example, for our project we will need an image that is 480px by 382px. So all we have to do is: https://picsum.photos/480/382. To get a random image we simply have to append ?random to the URL. We will position the image using the background-image property and set background-size to cover so that the image leaves no white space in its' container. We will also set the background-position to center so that the image is horizontally and vertically centered.
We will also be using CSS Flexbox to align 3 elements which will contain a users’ phone, cell and email address. First we will set the display property of the parent of these 3 elements (.labels) to flex.
Next, we’ll apply the following CSS properties to the 3 elements that are inside .labels.
.flex-grow defines how the remaining space inside .labels should be distributed amongst the 3 elements. By setting .flex-grow to 1, we are evenly distributing the remaining space inside .labels to each of the 3 elements.
Learn more about CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
We are now up to the last component of our profile card. To populate our profile card with user content we will use https://randomuser.me. Randomuser is a free, open source API for generating random user data.
We will be using the Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to retrieve content from the Randomuser API. Since we are making a GET request, we only need to pass in a URL to the Fetch API. In order to retrieve data from one random user, we need to append the query parameter results=1 to the URL.
Randomuser.me API documentation: https://randomuser.me/documentation
Next we need to convert the response we get back from randomuser.me to JSON and finally pass that data to our module that we will create called ProfileCard.
Within the ProfileCard module, we will add several selectors that target parts of our HTML that we would like to populate with text and images.
We will also add a method called setData to the ProfileCard module.
setData is the method that will be called when we fetch data from the Randomuser API. It has a parameter called data which will be the data we get back from the API. We then use that data to populate the HTML nodes we selected.
Our profile card is now complete! Or is it? One thing we did not take into consideration when building our profile card is making it responsive. Other things you may consider modifying is the content, color and font of the profile card. Feel free to modify it to your liking!