JSFiddle - React, Tailwind, and code Playground

by kobayashitakaki

HTML

<button id="ajax">get</button>
<div class="status">loading</div>
<div class="result">
  <p class="answer"></p>
</div>

CSS

img {
  width: 100%;
}

.result {
  position: relative;
  width: 500px;
}

.status {
  display: none;
  position: absolute;
  
  
  width: 200px;
  height: 2em;
  margin: auto;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background: rgba(100,100,100,0.7);
  opacity: 0.7;
  
}

.answer {
  position: fixed;
  display: none;
  left: 50px;
  text-align: center;
  font-size: 70px;
  font-weight: 800;
  color: #ffffff;
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}

JavaScript

$(function() {
	$('#ajax').on('click', function(){
  	$('.result img').remove();
    $('.result .answer').hide();
  	$('.status').show();
		$.get('https://yesno.wtf/api', function(data){
    	console.log(data);
      $('<img>').attr('src', data.image).appendTo('.result');
      $('.status').hide();
      $('.result .answer').text(data.answer)
      	.delay(1000).show('slow');
    });
  });
});