JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<div id="banner-message">
  <p>Hello World</p>
  <input type="text" id="videoId" value="MXioTHYKdjs">
  <button>Search</button>
</div>
<pre id="result">
  
</pre>
<pre id="failed">
  
</pre>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#result, #failed {
  background: #fff;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem;
  text-align: left;
  overflow-x: scroll;
}

#failed{
  background: #faa;
}

JavaScript

$(document).ready(function(){
	// find elements
	var $banner = $('#banner-message')
  var $videoId = $('#videoId')
	var $button = $('button')
  var $result = $('#result')
  var $result = $('#failed')
  
  // handle click and add class
	$button.on("click", function(){
  	$.ajax({
    	url: 'https://www.googleapis.com/youtube/v3/videos',
      type: 'GET',
      data: {
      	id: $videoId.val(),
        part: 'id,snippet,contentDetails,liveStreamingDetails,player,recordingDetails,statistics,status,topicDetails',
        key: 'AIzaSyC9UpbyPmbpUwMGkA5q0fjlasSvwiFG850'
      }
    }).done((result) => {
    	$result.text(JSON.stringify(result, null, 2))
    }).fail((result) => {
    	$result.text(JSON.stringify(result, null, 2))
    })
	})
})