Ada-C8 · julmeier · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -3,11 +3,53 @@
   <head>
     <meta charset="utf-8">
     <title>Backbone Baseline</title>
+    <link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
   </head>
   <body>
     <main id="main-content">
-
+
+      <header class='logo'>
+        Saved by the Videos
+      </header>
+
+      <div class="search-form-container">
+        <form id="search-form">
+          <input id="keyword" type="text" name="query" placeholder="ex. Indiana Jones" />
+          <button id="submit-button" class="submit-btn button">Submit</button>
+        </form>
+        <ul class="errors">
+        </ul>
+      </div>
+
+        <div class="api-movies-container">
+          <h2>Search Results</h2>
+          <ul id="api-movies">
+          </ul>
+        </div>
+
+        <div class="store-library-container">
+          <h2>Store Library</h2>
+          <span id="store-library">
+          </span>
+        </div>
+
     </main>
+    <script type="text/template" id="api-movie-template">
+      <section class="single-api-movie">
+        <img class="image api-movie-image" src= <%- image_url %> />
+        <!-- <span class="title"><%- title %></span>
+        <span class="release-date"><%- release_date %></span> -->
+        <button id="add-movie-btn" class="add-movie-btn button">+</button>
+      </section>
+    </script>
+
+    <script type="text/template" id="store-movie-template">
+      <section class="single-store-movie">
+        <img class="image" src= <%- image_url %> />
+        <!-- <span class="title"><%- title %></div>
+        <span class="release-date"><%- release_date %></div> -->
+      </section>
+    </script>
 
     <script src="/app.bundle.js"></script>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "jasmine-core": "^2.8.0",
     "jasmine-expect": "^3.8.1",
     "module-resolver": "^1.0.0",
+    "script-loader": "^0.7.2",
     "style-loader": "^0.19.0",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.4"
@@ -59,6 +60,7 @@
     "backbone": "^1.3.3",
     "foundation-sites": "^6.4.4-rc1",
     "jquery": "^3.2.1",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "jscroll": "*"
   }
 }
diff --git a/src/app.js b/src/app.js
@@ -3,12 +3,56 @@ import 'foundation-sites/dist/css/foundation.css';
 import './css/styles.css';
 
 // Import jQuery & Underscore
-import $ from 'jquery';
 import _ from 'underscore';
+import $ from 'jquery';
+
+import StoreLibrary from 'collections/store_library';
+import StoreMovie from 'models/store_movie';
+import APIMovies from 'collections/api_movies';
+import APIMovie from 'models/api_movie';
+
+import StoreLibraryView from 'views/store_library_view';
+import StoreMovieView from 'views/store_movie_view';
+import APIMoviesView from 'views/api_movies_view';
+import APIMovieView from 'views/api_movie_view';
 
-// ready to go
 $(document).ready(function() {
 
-  $('#main-content').append('<p>Hello World!</p>');
+  $('.api-movies-container').hide();
+
+  const storeLibrary = new StoreLibrary();
+  storeLibrary.fetch();
+
+  const storeLibraryView = new StoreLibraryView({
+    model: storeLibrary,
+    template: _.template($('#store-movie-template').html()),
+    el: 'main'
+  });
+  storeLibraryView.render();
+
+  const apiMovies = new APIMovies();
+
+  const apiMoviesView = new APIMoviesView({
+    model: apiMovies,
+    template: _.template($('#api-movie-template').html()),
+    el: 'main'
+  });
+  apiMoviesView.storeLibrary = storeLibrary;
 
+  $('.submit-btn').on('click', function(e) {
+    e.preventDefault();
+    $('.errors').empty();
+    const query = $('input[name=query]').val();
+    apiMovies.fetch({data: {query:`${query}`}}).then(function(){
+      if (apiMoviesView.model.length === 0) {
+        $('.errors').append('<li>There are no movies with that keyword search.</li>');
+        $('.api-movies-container').hide();
+      } else {
+        $('.api-movies-container').show();
+        apiMoviesView.render();
+        console.log(apiMovies.length);
+      }
+    });
+  });
+  $('.store-library-container').jscroll();
 });
diff --git a/src/collections/api_movies.js b/src/collections/api_movies.js
@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import APIMovie from 'models/api_movie';
+import StoreMovie from 'models/store_movie';
+import StoreLibrary from 'collections/store_library';
+
+const APIMovies = Backbone.Collection.extend({
+  model: APIMovie,
+  sync: function(method, model, options) {
+      switch(method) {
+        case 'read':
+        options.url = 'http://localhost:3000/movies';
+
+          // options.url = 'http://localhost:3000/movies/' + 'search';
+          return Backbone.sync(method, model, options);
+      }
+    }
+});
+
+export default APIMovies;
diff --git a/src/collections/store_library.js b/src/collections/store_library.js
@@ -0,0 +1,15 @@
+import Backbone from 'backbone';
+import StoreMovie from 'models/store_movie';
+
+const StoreLibrary = Backbone.Collection.extend({
+  model: StoreMovie,
+  sync: function(method, model, options) {
+      switch(method) {
+        case 'read':
+          options.url = 'http://localhost:3000/movies';
+          return Backbone.sync(method, model, options);
+      }
+    }
+});
+
+export default StoreLibrary;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,44 +1,90 @@
 @include foundation-everything;
 
 main {
-    background: lightblue;
+  background-image: url('https://i.pinimg.com/originals/2c/6b/a3/2c6ba31d76936549fb3376552cb4070c.jpg');
+  background-size: 1000px 1000px;
+  font-family: 'Londrina Solid', cursive;
 }
 
-header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+button:hover {
+  background-color: #e22ef7;
 }
 
-#completed-checkbox {
+div {
   display: inline;
 }
 
-label {
-  display: inline;
+#search-form, .errors {
+  margin-right: 20%;
+  margin-left: 20%;
+  width: 60%;
+  text-align: center;
 }
 
-button.success {
-  margin-right: 1.2rem;
-  display: inline;
+.logo {
+  font-size: 5rem;
+  text-align: center;
+  /*text-shadow: 10px 10px #f7add3;*/
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
+#store-library, #api-movies {
+  margin-right: 10%;
+  margin-left: 10%;
+  display: inline-flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-aside label {
-  color: #FFFFFF;
+
+.logo, .api-movies-container h2, .store-library-container h2 {
+  color: #f4c842;
+  text-shadow: 6px 4px 0 #000;
+  background: url('https://i.pinimg.com/736x/41/79/3a/41793a2a1b0406da3f4e0d29b2e3de3a--pattern-print-print-patterns.jpg');
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: 'Londrina Solid', cursive;
 }
 
-.completed {
-  text-decoration: line-through;
+.api-movies-container h2, .store-library-container h2 {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 4rem;
+  text-shadow: 6px 4px 0 #e22ef7;
 }
 
-div {
-  display: inline;
+.errors {
+  color: white;
+  font-size: 2rem;
+  list-style: none;
+}
+.title {
+  display: block;
+}
+
+.single-api-movie, .single-store-movie {
+  margin: 1em;
+  box-shadow: 13px 13px #08c4d0;
+  position: relative;
 }
-/*
-* {
+
+.single-api-movie img, .single-store-movie img{
   border-style: solid;
+  border-width: medium;
+  border-color: #2eebf7;
+  width: 185px;
+}
+
+#submit-button:hover, #add-movie-btn:hover {
+  background-color: #2eebf7;
+}
+
+.add-movie-btn {
+  position: absolute;
+  background-color: #e22ef7;
+  bottom: 10px;
+  right: 10px;
+}
+
+.submit-btn {
+  background-color: #e22ef7;
 }
-*/
diff --git a/src/css/stylesheet.css b/src/css/stylesheet.css
@@ -0,0 +1,48 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 20, 2017 */
+
+
+
+@font-face {
+    font-family: 'kirvyregular';
+    src: url('kirvy-regular-webfont.woff2') format('woff2'),
+         url('kirvy-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'gravitylight';
+    src: url('gravity-light-webfont.woff2') format('woff2'),
+         url('gravity-light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'gravityregular';
+    src: url('gravity-regular-webfont.woff2') format('woff2'),
+         url('gravity-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'geosanslightregular';
+    src: url('geosanslight-webfont.woff2') format('woff2'),
+         url('geosanslight-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}