JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<div class="container">
<h1>
My First Jfiddle
</h1>
<div id="text-and-button">
<p>
Click below if you dare
</p>
<div class="mystery-button" data-cat-picture="https://idsb.tmgrup.com.tr/ly/uploads/images/2020/10/27/thumbs/1200x600/67871.jpg">
Mystery Button
</div>
  <div id="cat-pic">
  </div>
</div>
</div>

CSS

h1 {
  font-family: fantasy;
  text-shadow: 5px 5px red;
}

#text-and-button {
  width: 48%;
  display: inline-block;
  float: left;
  background-color: #68f7a1;
  padding: 10px;
  }

p {
  color: red;
  font-family: fantasy;
  font-size: 12px;
 }

.mystery-button {
  font-family: fantasy;
  color: red;
  background-color: black;
  width: 100px;
}

#cat-pic {
 width: 48%;
 height: 300px;
 display: inline-block;
 background-size: contain;
 background-repeat: no-repeat;
}

JavaScript

$('.mystery-button').on('click', function() {
	var catpicUrl = $(this).attr('data-cat-picture')
  
  $('#cat-pic').empty()
  
  $('#cat-pic').css('background-image', `url(${catpicUrl})`)
})