JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<form id="search" method="post" action="#">
<p><input id="search-name" type="text" placeholder="Type Region Here"></p>
<p><input id="search-submit" type="submit" value="Search For Region"></p>
</form>
<div id="images"></div>
</body>
CSS
img {
height: 100px;
float: left;
}
JavaScript
var name;
$("#search").submit(function(event){
event.preventDefault();
name = $("#search-name").val();
alert("Search Term Was: "+name);
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: name,
tagmode: "any",
format: "json"
})
.done(function( data ) {
alert('done');
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 0 ) {
return false;
}
});
})
.fail(function() {alert('fail')});
});