becsegal · March 27, 2018 04:02
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head><title>Giphy Search</title></head>
 <body>

 <form>
    <input id='search'><button>Search</button>
 </form>

 <h1>Results</h1>
 <p><a id='search-link' href='#' target='_blank'></a></p>
 <div id='results'>
    No results. Search for something!
 </div>


 </body></html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css","editor.javascript","editor.html","instructions"]}
diff --git a/script.js b/script.js
 // Slides for this lesson: 
 // http://goo.gl/WXk5WU 

 // See the instructions for more info!

 $(document).ready(function() {
    $( "form" ).submit(function( event ) {
        // preventDefault stops the normal page refresh that happens when a form is submitted:
        event.preventDefault();
        
        // STEP 1: assign the input value to searchTerm
        var searchTerm = $('#search').val();
        $('h1').text("Results for " + searchTerm);
        search(searchTerm);
    });
 });

 function search(searchTerm) {
    // STEP 2: build the searchUrl
    var apiKey = 'dc6zaTOxFJmzC';
    var searchUrl = 'https://api.giphy.com/v1/gifs/search?q=' + searchTerm + '&api_key=' + apiKey;
    
    $('#search-link').attr('href', searchUrl);
    $('#search-link').text(searchUrl);
    
    $.ajax({
        url: searchUrl,
        method: 'GET',
        success: function(response) {
            showResults(response);
        }
    });
 }

 // STEP 3: Update the showResults function to display the gifs on the page
 function showResults(results) {
    console.log('Showing results');
    // Clear the old results display 
    // (empty the results div)
    $('#results').empty();
    
    // Show the images from the new results
    results.data.forEach(function(data) {
        $('#results').append("<img src=" + data.images.fixed_width.url + ">");
    });
 }


diff --git a/styles.css b/styles.css
 body {
    font-family: sans-serif;
 }

 input {
    font-size: 1.5em;
    padding: 5px;
    border: 1px solid black;
 }
 button {
    font-size: 1.5em;
    padding: 5px 10px;
    background: #8ebfdb;
    border: 1px solid black;
    border-left: 0px;
 }
 img {
    padding: 5px;
    vertical-align: middle;
 }
	<!doctype html>
	<html>
	<head><title>Giphy Search</title></head>
	<body>

	<form>
	<input id='search'><button>Search</button>
	</form>

	<h1>Results</h1>
	<p><a id='search-link' href='#' target='_blank'></a></p>
	<div id='results'>
	No results. Search for something!
	</div>


	</body></html>
	// Slides for this lesson:
	// http://goo.gl/WXk5WU

	// See the instructions for more info!

	$(document).ready(function() {
	$( "form" ).submit(function( event ) {
	// preventDefault stops the normal page refresh that happens when a form is submitted:
	event.preventDefault();

	// STEP 1: assign the input value to searchTerm
	var searchTerm = $('#search').val();
	$('h1').text("Results for " + searchTerm);
	search(searchTerm);
	});
	});

	function search(searchTerm) {
	// STEP 2: build the searchUrl
	var apiKey = 'dc6zaTOxFJmzC';
	var searchUrl = 'https://api.giphy.com/v1/gifs/search?q=' + searchTerm + '&api_key=' + apiKey;

	$('#search-link').attr('href', searchUrl);
	$('#search-link').text(searchUrl);

	$.ajax({
	url: searchUrl,
	method: 'GET',
	success: function(response) {
	showResults(response);
	}
	});
	}

	// STEP 3: Update the showResults function to display the gifs on the page
	function showResults(results) {
	console.log('Showing results');
	// Clear the old results display
	// (empty the results div)
	$('#results').empty();

	// Show the images from the new results
	results.data.forEach(function(data) {
	$('#results').append("<img src=" + data.images.fixed_width.url + ">");
	});
	}
	body {
	font-family: sans-serif;
	}

	input {
	font-size: 1.5em;
	padding: 5px;
	border: 1px solid black;
	}
	button {
	font-size: 1.5em;
	padding: 5px 10px;
	background: #8ebfdb;
	border: 1px solid black;
	border-left: 0px;
	}
	img {
	padding: 5px;
	vertical-align: middle;
	}