JSFiddle - React, Tailwind, and code Playground

by FrostyZ

HTML

<div id="container">
            <header>
                <h1>Search<span>Video</span></h1>
                <p>Search all youtube video</p>
            </header>
            <section>
                <form id="search-form" name="search-form" onsubmit="event.preventDefault(); return search();">
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search YouTube...">
                        <input type="submit" name="search-btn" id="search-btn" value="search">
                    </div>
                </form>
                <ul id="results"></ul>
                <div id="buttons"></div>
            </section>
            <footer>
                <p>Copyright &copy; 2017 All Rights Reserved</p>
            </footer>
        </div>

CSS

*{
    padding:0;
    margin:0;
}

body{
    font-family:"Segoue", sans-serif;
    line-height:1.6em;
    color:#666;
    background:#e1e1e1 url(../img/creampaper.jpg);
    font-size:14px;
}
a{
    color:#333;
    text-decoration:none; 
}

JavaScript

//Searchbar Handler
$(function(){
    var searchField = $('#query');
    var icon = ('#search-btn');

    // Focus Event Handler
    $(searchField).on('focus',function(){
        $(this).animate({
            width:'100%'
        }, 400);
        $(icon).animate({
            right:'10px'
        }, 400);
    });

    //Blur Evend Handler
    $(searchField).on('blur', function(){
        if(searchField.val() == ''){
            $(searchField).animate({
                width:'45%'
            }, 400, function(){});
            $(icon).animate({
                right:'360px'
            }, 400, function(){});
        }
    })
});


function search(){
    // clear Results
    $('#results').html('');
    $('#buttons').html('');

    //Get Form Input
    q = $('#query').val();
    // Run GET Request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search",{
          part: 'snippet, id',
          q: q,
          type: 'video',
          key: 'AIzaSyAvwn7gqVOb0XTJFsJg2PKQEBgk3VJ-JHc'},
          function(data){
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;

            console.log(data);

            $.each(data.items, function(i, items){
              var output = getOutput(items);

              // Display Result
              $('#results').append(output);
            });
          }  
    );
}

// Build Output

function getOutput(items) {
    var videoId = items.id.videoId
    var title = items.snippet.title;
    var description = items.snippet.description;
    var thumb = items.snippet.thumbnails.high.url;
    var ChannelTitle = items.snippet.ChannelTitle;
    var videoDate = items.snippet.pubkishedAt;

    // Build Output String
    var output = '<li>' +
    '<div class="list-left">' +
    '<img scr="+thumb">' +
    '<div/>' +
    '<div class="list-right">' +
    '<h3>'+title+'</h3>'
    '<small>By <span class="cTtitle">'+ChannelTitle+'</span> on '+videoDate+'<small>'+
   ...