Test/index.html at master · bluefire2121/Test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Favorite Movies</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

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

    <!-- We'll be dumping our JSON contents in here -->
    <div id="movie-view"></div>

    <!-- This form will be where users input data about the movies -->
    <form id="movie-form">
      <label for="movie-input">Search for a movie</label>
      <input type="text" id="movie-input"><br>

      <!-- This button will trigger our AJAX call -->
      <input id="find-movie" type="submit" value="Movie Search">
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      // This .on("click") function will trigger the AJAX Call
      $("#find-movie").on("click", function(event) {
        // event.preventDefault() can be used to prevent an event's default behavior.
        // Here, it prevents the submit button from trying to submit a form when clicked
        event.preventDefault();
        // Here we grab the text from the input box
        var movie = $("#movie-input").val();
        // Here we construct our URL
     //  var queryURL = "https://www.omdbapi.com/?t=" + movie + "&y=&plot=short&apikey=40e9cece";
     //  var queryURL = "https://api.yelp.com/v3/businesses/search?";
     var queryURL = "https://api.amp.active.com/v2/search?query=running&category=event&start_date=2013-07-04..&near=San%20Diego,CA,US&radius=50&api_key=dpnyedhpuxsbbsm3h7tmd987";
        // Write code between the dashes below to hit the queryURL with $ajax, then take the response data
        // and display it in the div with an id of movie-view
        //------YOUR CODE GOES IN THESE DASHES. DO NOT MANUALLY EDIT THE HTML ABOVE.
        $.ajax({
          url: queryURL,
          method: "GET"
        }).done(function (response) {
          console.log(response);
          $("#movie-view").text(JSON.stringify(response, null, 4));
        });
        // -----------------------------------------------------------------------
      });
    </script>
  </div>
</body>

</html>