LAHacks/giphysandbox.html at master · sbaum1994/LAHacks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
</head>

<script type="text/javascript">
	function PostData() {
	    // 1. Create XHR instance - Start
	    var xhr;
	    if (window.XMLHttpRequest) {
	        xhr = new XMLHttpRequest();
	    }
	    else if (window.ActiveXObject) {
	        xhr = new ActiveXObject("Msxml2.XMLHTTP");
	    }
	    else {
	        throw new Error("Ajax is not supported by this browser");
	    }
	    // 1. Create XHR instance - End

	    // 2. Define what to do when XHR feed you the response from the server - Start
	    // puts the response in div1
	    xhr.onreadystatechange = function () {
	        if (xhr.readyState === 4) {
	            if (xhr.status == 200 && xhr.status < 300) {
	            	//DO STUFF HERE WITH YOUR HTML FILE TO EXTRACT WHAT WE WANT
	            	//IN YOUR CASE GIFS

	            	var json_data = $.parseJSON( xhr.response );
	            	var url_array = new Array();
	            	var j = 0;

	            	$.each(json_data.data, function(i,item){
	            		var photoURL = "http://media.giphy.com/media/" + item.id + "/giphy.gif";

	            		var str = "<img src=\"" + photoURL + "\" />";

	            		console.log(photoURL);
	            		url_array[j] = str;
	            		j++;
	            	});

	            	console.log(url_array);
	            	console.log(json_data);

	            	//what i did to get quotes:
	            	//var $jQueryObject = $($.parseHTML(xhr.response));
	            	//var $jQueryObject = $($.parsJSON(text));

	            	//var quotes = $jQueryObject.map(function(){
	            	//	return $(this).find(".quoteText").map(function(){
	            	//		return $(this).html();
	            	//	}).get().join("");
	            	//}).get();
	            	//document.getElementById('div1').innerHTML = quotes;

	                document.getElementById('div1').innerHTML = url_array;
	                //this above needs to be replaced by whatever you want
	            }
	        }
	    }
	    // 2. Define what to do when XHR feed you the response from the server - Start

	    var mood = document.getElementById("mood").value;

	    // 3. Specify your action, location and Send to the server - Start
	    xhr.open('POST', 'giphyscrape.php');
	    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xhr.send("mood=" + mood);
	    // 3. Specify your action, location and Send to the server - End
	}
</script>

<form>
    <label for="mood">Mood :</label>
    <input type="text" name ="mood" id="mood" onblur="PostData()" />
    <div id="div1"></div>
    <input type="button" value ="Check" onclick="PostData()" />
</form>