9/4/2017 - 5:02 PM

Working Movie App

Working Movie App

<!DOCTYPE html>
<html lang="en">

  <meta charset="utf-8">
  <title>Favorite Movies</title>
  <style type="text/css">
    input {
      margin: 10px;


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

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

    <!-- Rendered Buttons will get Dumped Here  -->
    <div id="buttons-view"></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="add-movie" type="submit" value="Add a Movie Bro">

    <script src=""></script>
    <script type="text/javascript">
      // Initial array of movies
      var movies = ["The Matrix", "The Notebook", "Mr. Nobody", "The Lion King"];

      // displayMovieInfo function re-renders the HTML to display the appropriate content
      function displayMovieInfo() {

        var movie = $(this).attr("data-name");
        var queryURL = "" + movie + "&y=&plot=short&apikey=40e9cece";

        // Creating an AJAX call for the specific movie button being clicked
          url: queryURL,
          method: "GET"
        }).done(function(response) {

          // Creating a div to hold the movie
          var movieDiv = $("<div class='movie'>");

          // Storing the rating data
          var rating = response.Rated;

          // Creating an element to have the rating displayed
          var pOne = $("<p>").text("Rating: " + rating);

          // Displaying the rating

          // Storing the release year
          var released = response.Released;

          // Creating an element to hold the release year
          var pTwo = $("<p>").text("Released: " + released);

          // Displaying the release year

          // Storing the plot
          var plot = response.Plot;

          // Creating an element to hold the plot
          var pThree = $("<p>").text("Plot: " + plot);

          // Appending the plot

          // Retrieving the URL for the image
          var imgURL = response.Poster;

          // Creating an element to hold the image
          var image = $("<img>").attr("src", imgURL);

          // Appending the image

          // Putting the entire movie above the previous movies


      // Function for displaying movie data
      function renderButtons() {

        // Deleting the movies prior to adding new movies
        // (this is necessary otherwise you will have repeat buttons)

        // Looping through the array of movies
        for (var i = 0; i < movies.length; i++) {

          // Then dynamicaly generating buttons for each movie in the array
          // This code $("<button>") is all jQuery needs to create the beginning and end tag. (<button></button>)
          var a = $("<button>");
          // Adding a class of movie to our button
          // Adding a data-attribute
          a.attr("data-name", movies[i]);
          // Providing the initial button text
          // Adding the button to the buttons-view div

      // This function handles events where a movie button is clicked
      $("#add-movie").on("click", function(event) {
        // This line grabs the input from the textbox
        var movie = $("#movie-input").val().trim();

        // Adding movie from the textbox to our array

        // Calling renderButtons which handles the processing of our movie array

      // Adding a click event listener to all elements with a class of "movie"
      $(document).on("click", ".movie", displayMovieInfo);

      // Calling the renderButtons function to display the intial buttons