Skip to content

Instantly share code, notes, and snippets.

@born2fly

born2fly/index.html

Created March 24, 2017 16:27
Show Gist options
  • Save born2fly/bd4bb96e7504d334d9b2f80c0b37abfc to your computer and use it in GitHub Desktop.
Save born2fly/bd4bb96e7504d334d9b2f80c0b37abfc to your computer and use it in GitHub Desktop.
Download ZIP
Tube Search // source https://jsbin.com/kejexib
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tube Search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" link href="main.css">
<link href="normalize.css">
<style id="jsbin-css">
.container {
margin: 0 auto;
width: 600px;
padding: 10px;
border-radius: 5px;
background-color: #3da544
}
.header, h4 {
text-align: center;
}
.video-getter {
text-align: center;
}
.prevpage, .nextpage {
display: inline;
padding-left: 28%;
}
label{color: #efdd9b;}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>YouTube Video Search</h1>
</header>
<hr>
<main>
<h4>Enter a video search keyword related to a topic your are looking for.</h4>
<form class="video-getter">
<label for="videos">Keyword Search</label>
<input id="videos" type="text" placeholder="e.g. css tutorials, dogs, funny " name="tags" size="30" required>
<input type="submit" value="Submit">
</form>
</main>
</div>
<div class="results-container"><br>
<a href="#" class="prevpage">&lt; Previous Page</a>&nbsp;
<a href="#" class="nextpage"> Next Page &gt;</a>
<div class="search-results"></div><br>
<div class="results"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script id="jsbin-javascript">
// the parameters we need to pass in our request to YouTube's API --
var getVideo = function (tags, page) {
console.log(page);
var request = {};
if(page == "new"){
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10};
}else{
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10,
pageToken: page};
}
console.log(request);
// ajax call -- set the parameters -- youtube endpoint --
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search",
data: request,
dataType: "jsonp", //use jsonp to avoid cross origin issues --
type: "GET",
})
.done(function (result) {
// iterate thru results --
$.each(result.items, function (i, item) {
var answer = showVideo(item);
$('.results').append(answer);
// console.log(item);
});
console.log(result);
})
// if no results --
.fail(function (jqXHR, error) {
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
console.log(tags);
};
// find requested items and display them --
function showVideo(item) {
var videoID = item.id.videoId;
var videoThumb = item.snippet.thumbnails.medium.url;
var getTitle = item.snippet.title;
// console.log(videoID);
// console.log(videoThumb);
// console.log(getTitle);
return '<a href=https://youtube.com/watch?v=' + videoID + '>' + getTitle + '<br><img src="' + videoThumb + '"></a><br>';
}
// listener --
$(document).ready(function () {
var tags = '';
$('.video-getter').submit(function (e) {
e.preventDefault();
// reset results div --
$('.results').html('');
// read user input --
tags = $(this).find("input[name='tags']").val();
getVideo(tags, 'new');
});
$('.nextpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click nextpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAQ');
});
$('.prevpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click prevpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAA');
});
});
//---- work in progress -----------
// var nextPage = request.nextPageToken;
// var prevPage = request.prevPageToken;
</script>
<script id="jsbin-source-css" type="text/css">.container {
margin: 0 auto;
width: 600px;
padding: 10px;
border-radius: 5px;
background-color: #3da544
}
.header, h4 {
text-align: center;
}
.video-getter {
text-align: center;
}
.prevpage, .nextpage {
display: inline;
padding-left: 28%;
}
label{color: #efdd9b;}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// the parameters we need to pass in our request to YouTube's API --
var getVideo = function (tags, page) {
console.log(page);
var request = {};
if(page == "new"){
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10};
}else{
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10,
pageToken: page};
}
console.log(request);
// ajax call -- set the parameters -- youtube endpoint --
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search",
data: request,
dataType: "jsonp", //use jsonp to avoid cross origin issues --
type: "GET",
})
.done(function (result) {
// iterate thru results --
$.each(result.items, function (i, item) {
var answer = showVideo(item);
$('.results').append(answer);
// console.log(item);
});
console.log(result);
})
// if no results --
.fail(function (jqXHR, error) {
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
console.log(tags);
};
// find requested items and display them --
function showVideo(item) {
var videoID = item.id.videoId;
var videoThumb = item.snippet.thumbnails.medium.url;
var getTitle = item.snippet.title;
// console.log(videoID);
// console.log(videoThumb);
// console.log(getTitle);
return '<a href=https://youtube.com/watch?v=' + videoID + '>' + getTitle + '<br><img src="' + videoThumb + '"></a><br>';
}
// listener --
$(document).ready(function () {
var tags = '';
$('.video-getter').submit(function (e) {
e.preventDefault();
// reset results div --
$('.results').html('');
// read user input --
tags = $(this).find("input[name='tags']").val();
getVideo(tags, 'new');
});
$('.nextpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click nextpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAQ');
});
$('.prevpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click prevpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAA');
});
});
//---- work in progress -----------
// var nextPage = request.nextPageToken;
// var prevPage = request.prevPageToken;</script></body>
</html>
Raw
jsbin.kejexib.css
.container {
margin: 0 auto;
width: 600px;
padding: 10px;
border-radius: 5px;
background-color: #3da544
}
.header, h4 {
text-align: center;
}
.video-getter {
text-align: center;
}
.prevpage, .nextpage {
display: inline;
padding-left: 28%;
}
label{color: #efdd9b;}
Raw
jsbin.kejexib.js
// the parameters we need to pass in our request to YouTube's API --
var getVideo = function (tags, page) {
console.log(page);
var request = {};
if(page == "new"){
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10};
}else{
request = {
part: 'snippet',
q: tags,
key: "AIzaSyAPFRZbtrrI-aHcLX2R4kKx1JgsMzIMFtA",
maxResults: 10,
pageToken: page};
}
console.log(request);
// ajax call -- set the parameters -- youtube endpoint --
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search",
data: request,
dataType: "jsonp", //use jsonp to avoid cross origin issues --
type: "GET",
})
.done(function (result) {
// iterate thru results --
$.each(result.items, function (i, item) {
var answer = showVideo(item);
$('.results').append(answer);
// console.log(item);
});
console.log(result);
})
// if no results --
.fail(function (jqXHR, error) {
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
console.log(tags);
};
// find requested items and display them --
function showVideo(item) {
var videoID = item.id.videoId;
var videoThumb = item.snippet.thumbnails.medium.url;
var getTitle = item.snippet.title;
// console.log(videoID);
// console.log(videoThumb);
// console.log(getTitle);
return '<a href=https://youtube.com/watch?v=' + videoID + '>' + getTitle + '<br><img src="' + videoThumb + '"></a><br>';
}
// listener --
$(document).ready(function () {
var tags = '';
$('.video-getter').submit(function (e) {
e.preventDefault();
// reset results div --
$('.results').html('');
// read user input --
tags = $(this).find("input[name='tags']").val();
getVideo(tags, 'new');
});
$('.nextpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click nextpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAQ');
});
$('.prevpage').click(function (e) {
e.preventDefault();
console.log(tags + 'you click prevpage');
$('.results').html(' ');
getVideo(tags, 'CAUQAA');
});
});
//---- work in progress -----------
// var nextPage = request.nextPageToken;
// var prevPage = request.prevPageToken;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment