Use first letters of first and last name as profile image in JavaScript, HTML and CSS
Samath
Posted by Samath
Last Updated: September 13, 2023
JavaScript HTML CSS

In this program we are going to learn how to set profile image as first letters of first and last name.

 

HTML:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index.css">

<title>Hello World</title>
</head>
<body>

    <div id="profileImg" class="profile"></div>

<script src="index.js"></script>
</body>
</html>

 

CSS:

.profile {
    border-radius: 50%;
    font-size: 100px;
    color: #fff;
    text-align: center;
    line-height: 200px;
    margin: 20px 0;
    width: 200px;
    height: 200px;
    background: #1b85d7;
    font-family: Arial, Helvetica, sans-serif;  
  }

 

JavaScript:

const firstLastName = "Samath Scott";

//1). Splits first and Last name into two. 
//2). Take the first letter of both first and last name
//3). Join the letters
//4). Capitalize the letters
const fistLastIntials = firstLastName.split(' ').map(n => n[0]).join('').toUpperCase();

document.getElementById('profileImg').innerHTML = fistLastIntials;
Default Image