YouTube API Search App

// searchbar handler

$(function() {

    var searchField = $('#query');

    var icon = $('#search-button');

    // focus event handler

    $(searchField).on('focus', function() {

        $(this).animate({

           width: '100%'

        },400);

        $(icon).animate({

            right: '10px'

        }, 400);

    });

    // blur event

    $(searchField).on('blur', function() {

        if(searchField.val() == '') {

            $(searchField).animate({

                width: '45%'

            },400, function() {});

            $(icon).animate({

                right: '360px'

            },400, function() {});

        }

    });

    $('#search-form').submit(function(e) {

        e.preventDefault(); // to prevent submitting instead of showing search results

    });

})

function search() {

    // set to empty

    $('#results').html('');

    $('#buttons').html('');

    // get from 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: 'AIzaSyAJzMHjoMzb-FU0viS6WCjFCjVz3xXk1s8'},

          function(data) {

              var nextPageToken = data.nextPageToken;

              var prevPageToken = data.prevPageToken;

              // lod search data

              console.log(data);

              $.each(data.items, function(i, item) {

                  // build html output function

                  var output = getOutput(item); // all item list

                  // append results as unordered list

                  $('#results').append(output);

              });

              var buttons = getButtons(prevPageToken, nextPageToken);

               // display buttons

              $('#buttons').append(buttons);

          }

    );

}

// next and prev buttons functions

function nextPage() {

    var token = $('#next-button').data('token');

    var q = $('#next-button').data('query');

        // set to empty

    $('#results').html('');

    $('#buttons').html('');

    // get from input

    q = $('#query').val();

    // run GET request on API

    $.get(

        "https://www.googleapis.com/youtube/v3/search", {

            part: 'snippet, id',

            q: q,

            pageToken: token,

            type: 'video',

            key: 'AIzaSyAJzMHjoMzb-FU0viS6WCjFCjVz3xXk1s8'},

          function(data) {

              var nextPageToken = data.nextPageToken;

              var prevPageToken = data.prevPageToken;

              // lod search data

              console.log(data);

              $.each(data.items, function(i, item) {

                  // build html output function

                  var output = getOutput(item); // all item list

                  // append results as unordered list

                  $('#results').append(output);

              });

              var buttons = getButtons(prevPageToken, nextPageToken);

               // display buttons

              $('#buttons').append(buttons);

          }

    );

}

function prevPage() {

    var token = $('#prev-button').data('token');

    var q = $('#prev-button').data('query');

        // set to empty

    $('#results').html('');

    $('#buttons').html('');

    // get from input

    q = $('#query').val();

    // run GET request on API

    $.get(

        "https://www.googleapis.com/youtube/v3/search", {

            part: 'snippet, id',

            q: q,

            pageToken: token,

            type: 'video',

            key: 'AIzaSyAJzMHjoMzb-FU0viS6WCjFCjVz3xXk1s8'},

          function(data) {

              var nextPageToken = data.nextPageToken;

              var prevPageToken = data.prevPageToken;

              // lod search data

              console.log(data);

              $.each(data.items, function(i, item) {

                  // build html output function

                  var output = getOutput(item); // all item list

                  // append results as unordered list

                  $('#results').append(output);

              });

              var buttons = getButtons(prevPageToken, nextPageToken);

               // display buttons

              $('#buttons').append(buttons);

          }

    );

}

// build output

function getOutput(item) {

    // definding all variable for data items

    var videoId = item.id.videoId;

    var title = item.snippet.title;

    var description = item.snippet.description;

    var thumb = item.snippet.thumbnails.high.url;

    var channelTitle = item.snippet.channelTitle;

    var videoDate = item.snippet.publishedAt;

    // build output strings

    var output = '<li>' +

        '<div class="list-left">' +

        '<img src="' + thumb + '">' +

        '</div>' +

        '<div class="list-right">' +

        '<h3><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/' + videoId + '">' + title + '</a></h3>' +

        '<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +

        '<p>' + description + '</p>' +   

        '</div>' +

        '</li>' +

        '<div class="clearfix"></div>' +

        '';

    return output;

}

// build getButtons function

function getButtons(prevPageToken, nextPageToken) {

    if(!prevPageToken) {

        var btnoutput = '<div class="buttons-container">' +

                        '<button id="next-button" class="page-button" data-token="' + nextPageToken + '" data-query="' + q +'"' +

                        'onclick="nextPage();">Next Page</button></div>'

            ;

    } else {

        var btnoutput = '<div class="buttons-container">' +

                        '<button id="prev-button" class="page-button" data-token="' + prevPageToken + '" data-query="' + q +'"' +

                        'onclick="prevPage();">Previous Page</button>' +

                        '<button id="next-button" class="page-button" data-token="' + nextPageToken + '" data-query="' + q +'"' +

                        'onclick="nextPage();">Next Page</button>' +

                        '</div>'

    }

    return btnoutput;

}

* {

    margin:0;

    padding:0;

}

body {

    font-family: "Segoue", sans-serif;

    line-height: 1.6em;

    color: #666666;

    background: #e1e1e1 url(../images/creampaper.png);

    font-size: 14px;

}

a {

    color: #333333;

    text-decoration: none;

}

#container {

    width: 740px;

    background: #FFFFFF;

    margin: auto;

}

.cleafix {

    clear: both;

}

header {

    padding: 30px 20px;

    background: #F4F4F4;

}

header h1 {

    color: #000000;

    margin-bottom:5px;

}

header span {

    color: #DD2826;

}

section {

    padding: 30px 20px 20px 20px;

}

footer {

    padding: 20px;

    background: #F4F4F4;

    text-align: center;

}

#search-form {

    display: block;

    margin-bottom: 15px;

}

.field-container {

    display: block;

    position: relative;

    width: 90%;

    margin: 0 auto;

}

.search-field {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    display: block;

    width: 45%;

    padding: 11px 7px;

    padding-right: 43px;

    background: #FFFFFF;

    color: #CCCCCC;

    border: 1px solid #C8C8C8;

    font-size: 1.6em;

    border-bottom-color: #D2E2E7;

    -moz-border-radius: 1px;

    -webkit-border-radius: 1px;

    border-radius: 1px;

    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #F0F0F0;

    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #F0F0F0;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #F0F0F0;   

}

#search-button {

    position: absolute;

    right: 360px;

    top: 5px;

    height: 32px;

    width: 32px;

    border: 0;

    cursor: pointer;

    zoom: 1;

    filter: alpha(opacity-65);

    opacity: 0.65;

    background: transparent url(../images/search.png) top left no-repeat;

}

#search-button:hover {

    filter: alpha(opacity-90);

    opacity: 0.9;

}

/* style results */

#results li {

    padding: 10px 0;

    border-bottom: 1px doted #CCCCCC;

    list-style: none;

    overflow: auto;

}

.list-left {

    float: left;

    width: 20%;

}

.list-left img {

    width: 100%;

    padding: 3px;

    border: 1px solid #CCCCCC;

}

.list-right {

    float: right;

    width: 78%;

}

.cTitle {

    color: #5BB;

}

.button-container {

    margin-top: 25px;

}

.page-button {

    background: #F4F4f4;

    padding: 8px 13px;

    border: 1px solid #CCCCCC;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    margin: 10px;

    cursor: pointer;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>YouTube Search Engine API</title>

    <link rel="stylesheet" href="CSS/youtube.css">

    <link rel="stylesheet" href="CSS/jquery.fancybox.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/youtube.js"></script>

    <script src="js/jquery.fancybox.pack.js"></script>

    <script>

        $(document).ready(function() {

            $('.fancybox').fancybox();

        });

    </script>

</head>

<body>

    <div id="container">

        <header>

            <h1>Search<span> API</span></h1>

            <p>Search all YouTube videos</p>

        </header>

        <section>

            <form action="search-form" name="" id="search-form" onsubmit="return search();">

                <div class="field-container">

                    <input type="search" id="query" class="search-field" placeholder="Search YouTube...">

                    <input type="submit" name="search-button" id="search-button" value="">

                </div>

            </form>

            <ul id="results"></ul>

            <div id="buttons"></div>

        </section>

        <footer>

            <p>Copyright &copy; 2015, All rights reserved</p>

        </footer>

    </div>

</body>

</html>