rgtalbot · July 30, 2016 17:32
diff --git a/WorkingMovieApp_Easier.html b/WorkingMovieApp_Easier.html
 <html>
 <head>
    <title>Favorite Movies</title>
    <style type="text/css">
        button, div, form, input {
            margin: 10px;
        }
    </style>
 </head>
 <body>

 <div class="container">
    <h1>Movie Search</h1>

    <!-- Movies will Get Dumped Dere -->
    <div id="moviesView"></div>

    <form id="movie-form">
        <label for="movie-input">Add a Movie Bro</label>
        <input type="text" id="movie-input"><br>

        <!-- Button triggers new movie to be added -->
        <input id="addMovie" type="submit" value="Add a Movie Bro">
    </form>
    <div id="JSONview"></div>

    <script src='jquery.min.js'></script>
    <script type="text/javascript">

        // Initial array of movies
        var movies = ['The Matrix', 'The Notebook', 'Mr. Nobody', 'The Lion King'];

        // ========================================================

        // Generic function for dumping the JSON content for each button into the div
        function displayMovieInfo() {
            var movie = $(this).data('name');
            var queryURL = "http://www.omdbapi.com/?t=" + movie + "&y=&plot=short&tomatoes=true&r=json";
            $.ajax({url: queryURL, method: 'GET'})
                    .done(function (response) {
                        var newDiv = $('<div>')
                                .attr('id', 'movie');
                        $('#JSONview').prepend(newDiv);
                        var image = $('<img>')
                                .attr('src', response.Poster);
                        $('#movie').append(response.Title + '<br>');
                        $('#movie').append(response.tomatoRating + '<br>');
                        $('#movie').append(response.Rated + '<br>');
                        $('#movie').append(response.Year + '<br>');
                        $('#movie').append(response.Plot + '<br>');
                        image.appendTo($('#movie'));
                        $('#movie').append('<hr>');
                    })

            return false;
        }

        // ========================================================

        // Generic function for displaying movie data
        function renderButtons() {
            $('#moviesView').empty();
            $.each(movies, function (index, value) {
                var singleMovie = $('<button>')
                        .addClass('movie btn btn-primary')
                        .attr('data-name', value)
                        .html(value);
                $('#moviesView').append(singleMovie);
            });
        }

        // ========================================================

        // This function handles events where one button is clicked
        $('#addMovie').on('click', function () {
            var textInput = $('#movie-input').val();
            if (textInput != "") {
                movies.push(textInput);
                renderButtons();
            }
            $('#movie-input').val("");
            return false;
        })

        // ========================================================

        // Generic function for displaying the movieInfo
        $(document).on('click', '.movie', displayMovieInfo);


        // ========================================================

        // This calls the renderButtons() function
        renderButtons();

    </script>

 </div>
 </body>
 </html>
	<html>
	<head>
	<title>Favorite Movies</title>
	<style type="text/css">
	button, div, form, input {
	margin: 10px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h1>Movie Search</h1>

	<!-- Movies will Get Dumped Dere -->
	<div id="moviesView"></div>

	<form id="movie-form">
	<label for="movie-input">Add a Movie Bro</label>
	<input type="text" id="movie-input"><br>

	<!-- Button triggers new movie to be added -->
	<input id="addMovie" type="submit" value="Add a Movie Bro">
	</form>
	<div id="JSONview"></div>

	<script src='jquery.min.js'></script>
	<script type="text/javascript">

	// Initial array of movies
	var movies = ['The Matrix', 'The Notebook', 'Mr. Nobody', 'The Lion King'];

	// ========================================================

	// Generic function for dumping the JSON content for each button into the div
	function displayMovieInfo() {
	var movie = $(this).data('name');
	var queryURL = "http://www.omdbapi.com/?t=" + movie + "&y=&plot=short&tomatoes=true&r=json";
	$.ajax({url: queryURL, method: 'GET'})
	.done(function (response) {
	var newDiv = $('<div>')
	.attr('id', 'movie');
	$('#JSONview').prepend(newDiv);
	var image = $('<img>')
	.attr('src', response.Poster);
	$('#movie').append(response.Title + '<br>');
	$('#movie').append(response.tomatoRating + '<br>');
	$('#movie').append(response.Rated + '<br>');
	$('#movie').append(response.Year + '<br>');
	$('#movie').append(response.Plot + '<br>');
	image.appendTo($('#movie'));
	$('#movie').append('<hr>');
	})

	return false;
	}

	// ========================================================

	// Generic function for displaying movie data
	function renderButtons() {
	$('#moviesView').empty();
	$.each(movies, function (index, value) {
	var singleMovie = $('<button>')
	.addClass('movie btn btn-primary')
	.attr('data-name', value)
	.html(value);
	$('#moviesView').append(singleMovie);
	});
	}

	// ========================================================

	// This function handles events where one button is clicked
	$('#addMovie').on('click', function () {
	var textInput = $('#movie-input').val();
	if (textInput != "") {
	movies.push(textInput);
	renderButtons();
	}
	$('#movie-input').val("");
	return false;
	})

	// ========================================================

	// Generic function for displaying the movieInfo
	$(document).on('click', '.movie', displayMovieInfo);


	// ========================================================

	// This calls the renderButtons() function
	renderButtons();

	</script>

	</div>
	</body>
	</html>