iamaamir/getFakeProfiles.js

## getFakeProfiles.js
function getFakeProfiles(){
          return fetch('https://randomuser.me/api')
          .then(res => res.json())
          .then(res =>res['results'][0])
          .catch(e => e);
}

## test.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TEsting fake profiles</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Raleway', sans-serif;
        background-color: #efefef;
    }

    .section_team {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .section_team .avatar {
        position: relative;
        max-width: 200px;
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }


    .section_team .avatar>img {
        border-radius: 50%;
        border: 3px solid #598e96;
        width: 200px;
        height: 200px;
    }

    .section_team .linkedin {
        position: absolute;
        top: 0;
        right: 0;
    }

    .section_team .linkedin img {
        width: 40px;
    }

    .section_team .info {
        width: 80%;
        margin: 10px auto;
        text-align: center;
    }

    .text-blue {
        color: #277aba;
    }

    .text-gray {
        color: #959595;
    }
    .reload{
      position: absolute;
      bottom: 25px;
      right: 25px;
    }

    .reload button{
      font-size: 32px;
    }
    </style>
</head>

<body>

  <div class="reload">
      <button onclick="window.location.reload()">Reload</button>
  </div>
    <div class="section section_team">
        <div class="member">
            <div class="avatar">
                <img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
                <a href="#" class="linkedin">
                    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
                </a>
            </div>
            <div class="info">
                <h3 class="text-blue">Name</h3>
                <p class="text-gray">
                    <strong>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
                    </strong>
                </p>
            </div>
        </div>
        <div class="member">
            <div class="avatar">
                <img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
                <a href="#" class="linkedin">
                    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
                </a>
            </div>
            <div class="info">
                <h3 class="text-blue">Name</h3>
                <p class="text-gray">
                    <strong>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
                    </strong>
                </p>
            </div>
        </div>
        <div class="member">
            <div class="avatar">
                <img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
                <a href="#" class="linkedin">
                    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
                </a>
            </div>
            <div class="info">
                <h3 class="text-blue">Name</h3>
                <p class="text-gray">
                    <strong>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
                    </strong>
                </p>
            </div>
        </div>
    </div>
    <script>
    function getFakeProfiles() {
        return fetch('https://randomuser.me/api')
            .then(res => res.json())
            .then(res => res['results'][0])
            .catch(e => e);
    }

    var i = 0;
    document.querySelectorAll(".member").forEach(member => {
        getFakeProfiles().then(res => {
                return data = {
                    picture: res.picture.large,
                    name: res.name.first + " " + res.name.last
                }

            })
            .then(data => {
                member.querySelector(".profile-picture").src = data.picture;
                member.querySelector(".info h3").innerHTML = data.name;
            }).catch(e => {
                names = ["Aamir khan", "Prateek Dimri", "Parag Arora"];
                member.querySelector(".profile-picture").src = "https://randomuser.me/api/portraits/men/57.jpg";
                member.querySelector(".info h3").innerHTML = names[i++];
                names.length === i && (i = 0);
            })
    })
    </script>
</body>

</html>
	function getFakeProfiles(){
	return fetch('https://randomuser.me/api')
	.then(res => res.json())
	.then(res =>res['results'][0])
	.catch(e => e);
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>TEsting fake profiles</title>
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<style>
	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	background-color: #efefef;
	}

	.section_team {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	}

	.section_team .avatar {
	position: relative;
	max-width: 200px;
	margin: 0 auto;
	width: 200px;
	height: 200px;
	}


	.section_team .avatar>img {
	border-radius: 50%;
	border: 3px solid #598e96;
	width: 200px;
	height: 200px;
	}

	.section_team .linkedin {
	position: absolute;
	top: 0;
	right: 0;
	}

	.section_team .linkedin img {
	width: 40px;
	}

	.section_team .info {
	width: 80%;
	margin: 10px auto;
	text-align: center;
	}

	.text-blue {
	color: #277aba;
	}

	.text-gray {
	color: #959595;
	}
	.reload{
	position: absolute;
	bottom: 25px;
	right: 25px;
	}

	.reload button{
	font-size: 32px;
	}
	</style>
	</head>

	<body>

	<div class="reload">
	<button onclick="window.location.reload()">Reload</button>
	</div>
	<div class="section section_team">
	<div class="member">
	<div class="avatar">
	<img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
	<a href="#" class="linkedin">
	<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
	</a>
	</div>
	<div class="info">
	<h3 class="text-blue">Name</h3>
	<p class="text-gray">
	<strong>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
	</strong>
	</p>
	</div>
	</div>
	<div class="member">
	<div class="avatar">
	<img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
	<a href="#" class="linkedin">
	<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
	</a>
	</div>
	<div class="info">
	<h3 class="text-blue">Name</h3>
	<p class="text-gray">
	<strong>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
	</strong>
	</p>
	</div>
	</div>
	<div class="member">
	<div class="avatar">
	<img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/loader-256.png" alt="Aamir" class="profile-picture">
	<a href="#" class="linkedin">
	<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-256.png" alt="linkedin">
	</a>
	</div>
	<div class="info">
	<h3 class="text-blue">Name</h3>
	<p class="text-gray">
	<strong>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, libero.
	</strong>
	</p>
	</div>
	</div>
	</div>
	<script>
	function getFakeProfiles() {
	return fetch('https://randomuser.me/api')
	.then(res => res.json())
	.then(res => res['results'][0])
	.catch(e => e);
	}

	var i = 0;
	document.querySelectorAll(".member").forEach(member => {
	getFakeProfiles().then(res => {
	return data = {
	picture: res.picture.large,
	name: res.name.first + " " + res.name.last
	}

	})
	.then(data => {
	member.querySelector(".profile-picture").src = data.picture;
	member.querySelector(".info h3").innerHTML = data.name;
	}).catch(e => {
	names = ["Aamir khan", "Prateek Dimri", "Parag Arora"];
	member.querySelector(".profile-picture").src = "https://randomuser.me/api/portraits/men/57.jpg";
	member.querySelector(".info h3").innerHTML = names[i++];
	names.length === i && (i = 0);
	})
	})
	</script>
	</body>

	</html>