Ada-C8 · nkiruka · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/app.js b/app.js
@@ -0,0 +1,21 @@
+import Backbone from 'backbone';
+
+import $ from 'jquery';
+import _ from 'underscore';
+
+import Movie from './models/movie'
+import MovieList from './collections/movie_list';
+import MovieView from './views/movie_view';
+import MovieListView from './views/movie_list_view';
+
+
+
+
+$(document).ready( () => {
+console.log("in document ready");
+
+movieListView.render();
+
+
+
+}); // end document ready
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-    <main id="main-content">
-
-    </main>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
-  </html>
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto" rel="stylesheet">
+  <title>Video Store</title>
+</head>
+<body>
+
+  <header class="hero">
+    <div class="hero-section-text">
+      <h1>Video Store</h1>
+      <span><h5>
+        <button id="show-movies" class="movie-button button secondary hollow">Check out what's in stock!</button>
+      </h5></span>
+    </div>
+  </header>
+
+
+  <main id="main-content">
+    <!-- MESSAGES -->
+    <span id="status-msg"></span>
+    <span id="confirmation-msg"></span>
+
+    <section class="flex nav">
+      <div>
+        <span id="title"><h2>Video Store</h2></span>
+      </div>
+      <div>
+        <!-- SEARCH -->
+        <form id="movie-search-form">
+          <ul class="form-style">
+            <li>
+              <input id="query" type="text" name="query" placeholder="Enter a movie title">
+            </li>
+            <li>
+              <input type="submit" class="button secondary">
+            </li>
+          </ul>
+        </form>
+      </div>
+    </section>
+
+    <!-- LIST OF MOVIES -->
+    <section class="movie-list-container">
+      <ul id="movie-library">
+      </ul>
+    </section>
+  </main>
+
+  <footer>
+    &copy; 2017 Sara Frandsen, Nkiru Onwuneme, Amy Cash
+  </footer>
+  <!-------------------------->
+  <!-------------------------->
+
+  <!-- STATUS MESSAGE -->
+  <script type="text/template" id="status-msg-template">
+  </script>
+
+  <!-- SINGLE MOVIE TEMPLATE -->
+  <script type="text/template" id="movie-template">
+      <div id="item">
+      <h3><%- title %></h3>
+      <h5>(<%- release_date %>)</h5>
+      <p><%- overview.substr(0,50) %>...</p>
+      <img src="<%- image_url %>" />
+      <button class="btn-add alert button" style="<%- external_id ? '' : 'display:none;' %>">Add to Library</button>
+    </div>
+  </script>
+
+  <script src="/app.bundle.js"></script>
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,67 @@
-import 'css/_settings.css';
-import 'foundation-sites/dist/css/foundation.css';
-import './css/styles.css';
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+// CSS
+import './css/foundation.css';
+import 'css/_settings.css';
+import './css/style.css';
+
+import MovieList from 'collections/movie_list';
+import MovieListView from './views/movie_list_view';
+
+let moviesTemplate;
 
 // ready to go
 $(document).ready(function() {
+  // TEMPLATES
+  moviesTemplate = _.template($('#movie-template').html());
+  // overviewTemplate = _.template($('#movie-template').html());
+  // createNewMovieTemplate = _.template($('#create-new-movie-template').html());
+  const movies = new MovieList();
+  console.log("Set up movieList");
+
+  const movieListView = new MovieListView ({
+    model: movies,
+    template: _.template($('#movie-template').html()),
+    el: 'main',
+  });
+  console.log("before fetch");
 
-  $('#main-content').append('<p>Hello World!</p>');
+  movies.fetch(); //bb will call rails s
+
+  $('#movie-search-form').on('submit', function(event) {
+    event.preventDefault();
+    let queryText = $('#query').val().trim();
+    if (queryText.length > 0) {
+      movies.fetch({
+        reset: true, //instead of merging by default, clear out
+        data:  { query: queryText }
+      });
+    }
+    else {
+      movies.reset();
+    }
+    // console.log(query);
+  });
+
+/// HEADER ANIMATIONS ///
+  $('#show-movies').on('click', function(event) {
+    movies.fetch({
+      reset: true,
+    });
+    $('header').slideUp(1000); //show library list
+    $('#movie-search-form').slideDown(1000);
+    $('#movie-library').slideDown(1000); //header height
+  });
+
+  $('#title').on('click', function(event) {
+    movies.fetch({
+      reset: true,
+    });
+    $('#movie-library').slideDown(1000);
+  });
+
+/// RESULTS ANIMATIONS ///
 
 });
+
+//instruct bb to retrieve data
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies/',
+});
+
+export default MovieList;