Sometimes, we want to set profile image as first letters of first and last name with JavaScript.

In this article, we’ll look at how to set profile image as first letters of first and last name with JavaScript.

How to set profile image as first letters of first and last name with JavaScript?

To set profile image as first letters of first and last name with JavaScript, we can add a div and make it round by setting the border-radius CSS property.

Then we can set the text inside the div by setting its textContent property.

For instance, we write:

<div id='profileImage'>

</div>

to add a div.

Then we write:

#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}

to add style the div.

We make it round by setting border-radius to 50%.

And we center the text by setting text-align to center and vertically center the text by setting line-height to match the height.

Next, we write:

const profileImage = document.getElementById('profileImage')
profileImage.textContent = 'JS

to select the div with getElementById and set the text by setting the textContent property.

Conclusion

To set profile image as first letters of first and last name with JavaScript, we can add a div and make it round by setting the border-radius CSS property.

Then we can set the text inside the div by setting its textContent property.