Ada-C7 · Allison-Northrop · Jun 13, 2017 · Jun 14, 2017 · Jun 14, 2017 · Jun 14, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -42,3 +42,15 @@ div {
   border-style: solid;
 }
 */
+
+/*.movie-list {
+  border: solid;
+}*/
+
+ul {
+  list-style-type: none;
+}
+
+.parent-div {
+  text-align:center;
+}
diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/_settings.css">
-    <link rel="stylesheet" type="text/css" href="css/foundation.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="css/_settings.css">
+  <link rel="stylesheet" type="text/css" href="css/foundation.css">
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
+  <title>Backbone Baseline</title>
+</head>
+<body>
+
+  <header>
+    <h1>Search</h1>
+  </header>
+  <main id='application'>
+    <section id='movie'></section>
+    <!-- <section id='movie-list'></section> -->
+    <section id='new-movie'></section>
+    <section id='movie-details'></section>
+    <section>
+      <form id="search-form">
+        <input type="text" name="query" id="queryParams"></input>
+        <button class="s-button button" type="submit">Search</button>
+      </form>
+
+    </section>
+    <button type="submit" class="list_store_rentals button">Available Rentals</button>
+<div class="checking">
+    <ul class="movie-list"></ul>
+  </div>
+  </main>
+
+  <!-- Templates -->
+<section class="row">
+  <script id="movie-card-template" type="text/template">
+    <div class="parent-div large-3 columns">
+    <li class="movie-name-temp"><%- movie.title %><br><img src="<%-movie.image_url%>"><br></li>
+    <!-- <img src="<%-movie.image_url%>"><br> -->
+    <% if (isSearchResult) { %> <!-- added with dan -->
+      <button class="add-movie button" type="submit">Add Movie</button>
+    <% } %>
+  </div>
+  </script>
+
+  <script src="/app.bundle.js"></script>
+</section>
+<footer>
+  Powered by Internet Movie Database
+</footer>
+
   </html>
diff --git a/src/app.js b/src/app.js
@@ -4,9 +4,50 @@
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import MovieList from './collections/movie_list';
+import MovieListView from './views/movie_list_view';
+
+var storeList = function(event) {
+  var movieList = new MovieList();
+  movieList.fetch();
+
+  var rentals = new MovieListView({
+    isSearchResult: false, //added with dan
+    model: movieList,
+    templateMovieList: _.template($('#movie-card-template').html()),
+    el: $('#application')
+  });
+  rentals.render();
+};
+
 
-  $('section.main-content').append('<p>Hello World!</p>');
+var databaseList = function(event) {
+  //prevent event default from taking place, which would be to refresh page
+  event.preventDefault();
+  //first we have to declare what the variable is with the expected value, which here we are saying can be anything
+  var queryParams = $('#queryParams').val();
+  //then we ask if the expected value, which can be anything, happens to be empty
+  if (queryParams == ''){
+    alert ("Search cannot be empty");
+  } else {
+    var searchList = new MovieList();
+    searchList.customUrl(queryParams);
+    searchList.fetch();
+    var searches = new MovieListView({
+      isSearchResult: true, //added with dan
+      model: searchList,
+      templateMovieList: _.template($('#movie-card-template').html()),
+      el: $('#application')
+    });
+    searches.render();
+  };
+};
 
+
+
+// ready to go
+$(document).ready(function() {
+  $(".list_store_rentals").click(storeList);
+  //submit will look for when a form is being submitted, whether that is from hitting enter or clicking submit button on form
+  $('#search-form').submit(databaseList);
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  customUrl: function(search) {
+    this.url = this.url + "?query=" + search;
+    console.log(this.url);
+    return this;
+  }
+});
+
+
+
+export default MovieList;