JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="player">

</div>
<p class="hisname">

</p>
<input type="text" id="playerName">
<button id="getPlayer">
Get Player
</button>

CSS

.player{
  height: 300px;
  width:300px;
  background-size:cover;
}

JavaScript

function getPlayer(playerName) {

	var player = playerName.split(" ").join("-");
  var url = "http://tsnimages.tsn.ca/ImageProvider/PlayerHeadshot?seoId=" + player;
  jQuery(".player").css("background-image","url('"+url+"')");
  jQuery(".hisname").html(player);
}
jQuery("#getPlayer").on("click",function() {

	getPlayer(jQuery("#playerName").val())
})