People you may know widget

Vanilla JS

by Arun Tummala

HTML

<section id="peopleSection">
  <h1>
    People you may know
  </h1>
</section>

CSS

* {
  font-family: sans-serif;
}
.person{
  padding:5px;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 5px;
}
.person img {
  float:left;
  min-width: 50px;
  min-height: 50px;
  margin:5px;
  border: 1ps solid #000;
}

JavaScript

var peopleJson = [{
"firstName": "John",
"lastName": "Doe",
"role": "Software Engineer",
"imgSrc": "",
"title": "name"
},{
"firstName": "John",
"lastName": "Doe 1",
"role": "Software Engineer 1",
"imgSrc": "",
"title": "name"
},{
"firstName": "John",
"lastName": "Doe 2",
"role": "Software Engineer 2",
"imgSrc": "",
"title": "name"
}];
var sectionContainer = document.getElementById('peopleSection'),
		documentFrag = document.createDocumentFragment();
		
    
peopleJson.forEach(function(value,index){
		var createPersonEl = document.createElement('div'),
    createImgEl = document.createElement('img'),
    createFirstNameEl = document.createElement('span'),
    createLastNameEl = document.createElement('span'),
    createRoleEl = document.createElement('div');
    
    createPersonEl.classList.add('person');
    createImgEl.setAttribute('src',value.imgSrc);
    createImgEl.setAttribute('alt',value.title);
    createFirstNameEl.createTextNode = value.firstName;
    createLastNameEl.innerHTML = value.lastName;
    createRoleEl.innerHTML = value.role;
    createPersonEl.appendChild(createImgEl);
    createPersonEl.appendChild(createFirstNameEl);
    createPersonEl.appendChild(createLastNameEl);
    createPersonEl.appendChild(createRoleEl);
    documentFrag.appendChild(createPersonEl);
});
sectionContainer.appendChild(documentFrag);