Check out my website here!
I want to enhance the functionality of my site by triggering a Google Images search when the 'enter' key is pressed, instead of just relying on a button click.
This is the HTML structure:
<p>Enter your search term for images</p>
<input id="search-term" type="text">
<button id="go-search">Search!</button>
<div id="search-results"></div>
<div style="width: 150px; margin:0 auto;">
Here's the application.js code snippet:
$(document).on('keypress', '#search-term', function(event) {
if (event.keyCode === 13) {
findImagesOnGoogle({
keywords: $('#search-term').val(),
container: '#search-results'
})
}
});
$(document).on('click', '#search-results img', function() {
var url = $(this).data('url');
$("#workspace img").remove();
var img = $("<img>").attr('src', url);
$("#workspace").append(img);
});
In my Sublime Text editor, I have each section of CSS, JS and HTML neatly organized in separate tabs for easy access.