# JS練習_Youtube 搜尋器

製作一個youtube搜尋頁面，讓使用者可以輸入關鍵字，依照關鍵字搜尋符合關鍵字的內容影片並有上/下頁功能的選擇。
- 成品畫面

## 功能
- 輸入內容
- 使用者輸入的內容，搜尋影片
- 有上一頁/ 下一頁按鈕，頁面跳轉

## JS
### 申請API key
前往一個Google cloudclub Platform 建立專案
輸入專案名稱
進來專案內容後，點選建立憑證，API 金鑰
點選旁邊的資訊主頁，點選啟用API和服務，搜尋我們這次要使用的API `Youtube Data API v3`

使用$(document).ready() 確定DOM 的完全載入
1. 設定key的變數
2. 加入form 的 `submit`事件
- 設定防呆機制
- 呼叫`videoSearch()`

### videoSearch()
- 參數：key/ search/ maxResult
- 先將要展示搜尋結果那個html內容清除
- 使用jQuery `get`方法，設定傳入的url像這邊是我們是使用youtube的search API，在官方的說明文件中先貼上search API文件中的url
`https://www.googleapis.com/youtube/v3`
，再做其他參數欄位設定。

console.log出來JSON結果的資料
觀察我們需要的資料data裡面的items

- 將每個`data.items`透過`forEach`方式取得每一筆item的資料，並呼叫`getOutput`方法創造html內容，將內容貼在 `$('#videos')`後。
- 創造一個button 點擊時，會觸發`getButton()`

### getButton()
判斷token 是否為`prevPageToken`，並設定button的html內容屬性，及點擊會促發`nextPage()`與`prevPage()`函式。
- 倘若是 ->會有兩個button，Previous/ Next button。
- 倘若不是 -> 只會有Next button。

function getButton(prevPageToken, nextPageToken){
    let q;
    if(!prevPageToken){
        var btnOutput = '<div class="button-container">' + '<button id="next-button" class="paging-button" data-token="' +nextPageToken+'" data-query="'+q+'"+ onclick="nextPage();">Next Page</button></div>'; 
    }else{
        var btnOutput = '<div class="button-container">' + 
        '<button id="prev-button" class="paging-button" data-token="' +prevPageToken+'" data-query="'+q+'"+ onclick="prevPage();">Previous Page</button>'+
        '<button id="next-button" class="paging-button" data-token="' +nextPageToken+'" data-query="'+q+'"+ onclick="nextPage();">Next Page</button> </div>'; 
    }

    return btnOutput;
}

### getOutput(item)
設定一些從JSON檔觀察出的變數，建立成output字串(有標題、圖片及文字的html內容)，return output內容至呼叫函式的地方。


function getOutput(item){
  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 String
  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;
}

==＊== return 很重要，要是沒有return 東西只是被創造出來，不會丟回去html裡。
### nextPage() / prevPage()
使用搜尋功能搜出影片後，在頁面會出現一個`next page`的button，點擊促發nextPage()函式，這裡函式跟`videoSearch()`很像，主要差別在，由上面我們先跑出來的data，觀察出要帶入下一頁或上一頁的資訊必須要有一個token，才可以帶入，這裡先定義token及q的變數，再帶入`$.get`中，之後跑出來的data，一樣創造html內容

//nextpage button
function nextPage(){

    let token = $('#next-button').data('token');
    console.log(token)
    let q = $('#next-button').data('query');

    $('#videos').html('');
    $('#button').html('');

    q = $("#search").val();

    $.get("https://www.googleapis.com/youtube/v3/search",{
        key: 'AIzaSyCSwkueGwGH8xdWDDgcMMAdXDRxKg0uEiE',
        type: 'video',
        part: 'snippet, id',
        pageToken: token,
        q: q,
    }, 
    function(data){

        let prevPageToken = data.prevPageToken;
        let nextPageToken = data.nextPageToken;
        console.log(data);
        
        data.items.forEach(item => {
            video = getOutput(item);
            $("#videos").append(video);
        });

        //show button
        let buttons =getButton(prevPageToken, nextPageToken);
        $('#button').append(buttons);
    })
}

### fancybox
FancyBox是一套jQuery 的套件，可以可以套用在圖片及影片上呈現放大燈箱的效果。
- [fancyBox CDN](https://cdnjs.com/libraries/fancybox)
- [官方document](http://fancyapps.com/fancybox/3/docs/#video)

==注意==
再index.html中，最後要有啟用的動作，不然會沒有效果。

    <script>
        $('[data-fancybox]').fancybox({
          youtube : {
            controls : 0,
            showinfo : 0
          },
          vimeo : {
            color : 'f00'
          }
        });
    </script>

###### tags: `javascript`