Question

我正在尝试使用Giphy API在JavaScript中创建GIF搜索引擎，现在我陷入了需要连接搜索栏和输出的最后一步。我需要从搜索栏中获取输入，并需要与从API提取数据的URL进行连接，并且需要显示输出。与您的想法朋友一起帮助我。

//1.grabing the input first


document.querySelector(".js-find").addEventListener('click',function(e){
    var input = document.querySelector("input").value;
    pushtopage(input);

});

document.querySelector(".js-userinput").addEventListener('keyup',function(e){
    var input = document.querySelector("input").value;
    if(e.which === 13){
        pushtopage(input);
    }
});

//2.Fetching data from API

var url = "http://api.giphy.com/v1/gifs/search?q=Good+Morning&api_key=5rCzgA1boJzu13W1iU36cyoAMaqVDz0u";

// AJAX Request
var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open( 'GET', url );
GiphyAJAXCall.send();

GiphyAJAXCall.addEventListener('load',function(e){
  var data = e.target.response;
  pushtopage(data);
});



//displaying the GIFs
function pushtopage(input){
    var response = JSON.parse(input);
    var imageUrls = response.data;


    imageUrls.forEach(function(image){
     var src = image.images.fixed_height.url;
     console.log(src);
     var container = document.querySelector(".js-container");
    container.innerHTML += "<img src=\" " + src + " \" class=\"container-image\">";
    });
 
    
}

body {
	width: 80%;
	max-width: 1024px;
	margin: 0 auto;
}

.container-padding50 {
	padding-top: 50px;
}

.container-textinput {
	width: 80%;
	display: inline-block;
	padding: 20px;
	font-size: 16px;
	font-family: Helvetica, sans-serif;
}

.container-button {
	width: 10%;
	display: inline-block;
	padding: 20px;
	background-color: skyblue;
	color: white;
	font-size: 16px;
	font-family: Helvetica, sans-serif;

	border: 1px solid white;
	border-radius: 5px;
}

.container-image {
	width: 20%;
	display: block;
	float: left;
	margin-right:3%;
}

<!doctype html>
<html>
	<head>
		<title>Giphy Search Engine</title>
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div class="container container-padding50">

			<input type="text" class="js-userinput container-textinput" placeholder="what you want enter here!" />

			<button class="js-find container-button">Find gif!</button>
		</div>
		<div class="container container-padding50 js-container">
		
		</div>
		<script src="javascript/main.js"></script>
	</body>
</html>

如何连接搜索框并输出

0 个答案: