Ada-C8 · SaraChandler · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -6,9 +6,42 @@
   </head>
   <body>
     <main id="main-content">
-
+      <header class="row">
+        <h1 class="logo">Video Store</h1>
+      </header>
+
+      <div class="search-bar">
+        <form id="search-form">
+          <input type="text" name="search" id="searchParams" />
+          <button type="submit" class="search button">Search me</button>
+        </form>
+      </div>
+
+      <h2>All the Searched Movies!</h2>
+        <div class="movies-list-container">
+          <ul id="results" class="results">
+
+          </ul>
+        </div>
+
+      <h2>All the Movies!</h2>
+      <button class="api-movies button">See all movies</button>
+        <div class="movies-list-container">
+          <ul id="movies" class="movies">
+          </ul>
+        </div>
+
     </main>
 
+    <script type="text/template" id="movie-template">
+      <h3 class="title"><%- title %></h3>
+    </script>
+
+    <script type="text/template" id="return-template">
+      <h3 class="title"><%- title %></h3>
+      <button class="add button">Add Movie To Library</button>
+    </script>
+
     <script src="/app.bundle.js"></script>
 
   </body>

diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,25 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import Movie from 'models/movie';
+import MovieList from 'collections/movie_list';
+import MovieListView from 'views/movie_list_view';
+import SearchListView from 'views/search_list_view';
+import SearchView from 'views/search_view';
 
-  $('#main-content').append('<p>Hello World!</p>');
-
-});
+  $(document).ready(function() {
+    const movies = new MovieList();
+    const movieListView = new MovieListView({
+          model: movies,
+          template: _.template($('#movie-template').html()),
+          el: 'main'
+      });
+      const results = new MovieList();
+      const searchListView = new SearchListView({
+            model: results,
+            template: _.template($('#return-template').html()),
+            el: 'main'
+        });
+    movieListView.render();
+    searchListView.render();
+  });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  parse(response) {
+    return response;
+  },
+});
+
+export default MovieList;
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+
+});
+
+export default Movie;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
@@ -0,0 +1,38 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import MovieView from '../views/movie_view';
+import Movie from '../models/movie';
+import MovieList from '../collections/movie_list';
+
+
+const MovieListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.searchTemplate = params.searchTemplate;
+    this.listenTo(this.model, 'update', this.render);
+  },
+  render() {
+    this.$('#movies').empty();
+    this.model.each((movie) => {
+      const movieView = new MovieView ({
+        model: movie,
+        template: this.template,
+        searchTemplate: this.searchTemplate,
+        tagName: 'li',
+        className: 'movie'
+      });
+
+      this.$('#movies').append(movieView.render().$el);
+    }); // end of each loop
+    return this;
+  }, // end of render
+  events: {
+    'click button.api-movies': 'getMovies'
+  },
+  getMovies: function (e) {
+    this.model.fetch();
+  },
+
+}); // end MovieListView
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,20 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import MovieList from '../collections/movie_list';
+
+const MovieView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.searchTemplate = params.searchTemplate;
+    this.listenTo(this.model, "change", this.render);
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+
+});
+
+export default MovieView;
diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js
@@ -0,0 +1,38 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import SearchView from '../views/search_view';
+import Movie from '../models/movie';
+import MovieList from '../collections/movie_list';
+
+
+const SearchListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render);
+  },
+  render() {
+    this.$('#results').empty();
+    this.model.each((movie) => {
+      const searchView = new SearchView ({
+        model: movie,
+        template: this.template,
+        tagName: 'li',
+        className: 'movie'
+      });
+
+      this.$('#results').append(searchView.render().$el);
+    }); // end of each loop
+    return this;
+  }, // end of render
+  events: {
+    'submit #search-form': 'getRequest',
+  },
+  getRequest: function (e) {
+    e.preventDefault();
+    const searchParams = this.$('#searchParams').val();
+    this.model.fetch({data: {query: searchParams}});
+  },
+
+}); // end MovieListView
+
+export default SearchListView;
diff --git a/src/views/search_view.js b/src/views/search_view.js
@@ -0,0 +1,26 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+import MovieList from '../collections/movie_list';
+
+const SearchView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, "change", this.render);
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+  events: {
+    'click button.add': 'addMovie',
+  },
+  addMovie: function(e) {
+    e.preventDefault();
+    this.model.save();
+
+  }
+
+});
+
+export default SearchView;