Open AI Pokemon Card search
OpenAI Prompt: Generate a jquery ajax function that queries the pokemontcg.io v2 API when a button is clicked using the value of a text input, then outputs the resulting card images into a search result div: Generate an html file that includes this function and its respective html elements:
HTML
<html>
<head>
<title>Pokemon Card Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input id="search_name" type="text" value="Pikachu">
<button id="search_button">Search</button>
<div id="search_results"></div>
<script>
function queryAPI() {
$.ajax({
url: "https://api.pokemontcg.io/v2/cards?q=name:" + $("#search_name").val(),
type: "GET",
success: function(response) {
for (let i = 0; i < response.data.length; i++) {
if (response.data[i].images) {
$("#search_results").append("<img id='" + response.data[i].id + "' src='" + response.data[i].images.small + "'>");
}
}
}
});
}
$("#search_button").on("click", function() {
$("#search_results").html('');
queryAPI();
});
</script>
</body>
</html>