Ada-C8 · JNEdrozo · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/.gitignore b/.gitignore
@@ -71,3 +71,5 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+.env
diff --git a/dist/favicon.png b/dist/favicon.png
diff --git a/dist/index.html b/dist/index.html
@@ -2,14 +2,96 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Backbone Baseline</title>
+    <title>JAMNY | Video Rentals</title>
+
+    <!-- STYLESHEETS -->
+    <link href="https://fonts.googleapis.com/css?family=Bungee|Roboto|Poppins" rel="stylesheet">
+
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
   </head>
   <body>
     <main id="main-content">
-
+      <header>
+        <h1 id="home" class="btn-rental-lib float-left small-6 columns" >Video Rentals</h1>
+        <section id="search-form" class="float-right small-6 columns">
+          <form id = "search-movies">
+            <input id="search-input" name="movie-query" placeholder="  Search for a Movie in TMBD"/>
+            <button class="btn-search alert button button">Search</button>
+          </form>
+        </section>
+      </header>
+      <section id = "movies-container" class="movies-container">
+        <h2>Rental Movies</h2>
+        <section class="movies-list-container">
+          <!-- <ul id="movies" class="movies">
+          </ul> -->
+
+          <div class="movies">
+            <div class="grid-container">
+              <div id="movies"class="grid-x grid-padding-x small-up-2 medium-up-3">
+
+            </div>
+          </div>
+        </section>
+      </section>
+
+      <section id = "movie-details-container" class="movie-details-container">
+      </section>
+
+      <section id = "add-movie-form">
+        <form id = "add-movies">
+
+        </form>
+      </section>
+
     </main>
 
     <script src="/app.bundle.js"></script>
 
+    <script type="text/template" id= "movie-template">
+      <!-- <div class="small-6 columns">
+        <img src="<%- image_url %>" class = "image_url" />
+      </div>
+
+      <div class="small-6 columns">
+        <h3 class="title"><%- title %></h3>
+        <p class="release_date">(<%- release_date.slice(0,4) %>)</p>
+        <button class="btn-movie-details success button expanded">View Movie Details</button>
+      </div> -->
+
+      <div class="cell">
+        <div class="card btn-movie-details">
+          <section>
+            <img src="<%- image_url %>" class = "image_url" />
+          </section>
+
+          <div class="card-section">
+            <h4 class="title"><%- title %></h4>
+            <strong><p class="release_date">(<%- release_date.slice(0,4) %>)</p></strong>
+          </div>
+        </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="movie-details-template">
+
+      <div id="movie-details-container">
+        <img id="movie-photo"src="<%- image_url %>" class="image_url"/>
+
+        <div id="movie-info">
+          <h3 class="title"><%- title %></h3>
+          <p class="release_date"><strong>Release Date: <%- release_date%></strong></p>
+          <p class="overview"><strong>Overview:</strong> <%- overview %></p>
+          <span>
+            <%= external_id ? '<button class="btn-add-movie button success">Add Movie to Library</button>' : '<p id = "rental-availability"><strong>This movie is now in our rental library.</strong></p>' %>
+          </span>
+          <span>
+            <%= external_id ? '<button class="btn-all-movies button">Back to Results</button>' : '' %>
+          </span>
+        </div>
+      </div>
+
+    </script>
+
   </body>
   </html>
diff --git a/src/app.js b/src/app.js
@@ -5,10 +5,43 @@ import './css/styles.css';
 // Import jQuery & Underscore
 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';
+import MovieDetailsView from 'views/movie_list_view';
+
+let bus = {};
+bus = _.extend(bus, Backbone.Events);
 
-// ready to go
 $(document).ready(function() {
+  const rentalMovies = new MovieList();
+  rentalMovies.fetch();
+
+  console.log('FETCHED MOVIES:');
+  console.log(rentalMovies);
+  // $('#results-container').hide();
+
+  const movieListView = new MovieListView({
+    model: rentalMovies,
+    template: _.template($('#movie-template').html()),
+    detailsTemplate: _.template($('#movie-details-template').html()),
+    el: 'main',
+  });
+
+  movieListView.render();
+
+  const searchedMovies = new MovieList();
+
+  const resultsListView = new MovieListView({
+    model: searchedMovies,
+    libary: rentalMovies,
+    template: _.template($('#movie-template').html()),
+    detailsTemplate: _.template($('#movie-details-template').html()),
+    el: 'main',
+  });
+
 
-  $('#main-content').append('<p>Hello World!</p>');
+  // $('#main-content').append('<p>Hello World!</p>');
 
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,17 @@
+import Backbone from 'backbone';
+import Movie from 'models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  search(query) {
+    this.url = `http://localhost:3000/movies?query=${query}`
+    this.fetch();
+  },
+  viewRentalMovies() {
+    this.url = 'http://localhost:3000/movies';
+    this.fetch();
+  },
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,44 +1,164 @@
 @include foundation-everything;
 
-main {
-    background: lightblue;
+body {
+  background: snow;
 }
 
 header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+  background-color: black;
+  padding-top: 0.5rem;
+  color: white;
+  height: 120px;
+  margin-bottom: 30px;
 }
 
-#completed-checkbox {
+/* #completed-checkbox {
   display: inline;
 }
 
 label {
   display: inline;
-}
+} */
 
 button.success {
   margin-right: 1.2rem;
   display: inline;
 }
 
-aside.create-tasklist {
+/* aside.create-tasklist {
   background-color: navy;
   color: #FFFFFF;
 }
 aside label {
   color: #FFFFFF;
-}
+} */
 
-.completed {
+/* .completed {
   text-decoration: line-through;
+} */
+
+/* div {
+  display: inline-block;
+} */
+
+#movies li {
+  list-style-type: none;
 }
 
-div {
-  display: inline;
+/* header h1, #search-form, header p, header button { */
+/* header h1, header p, header button {
+  display: inline-block;
+} */
+
+#search-form {
+  padding-top: 30px;
+  margin-bottom: 20px;
+  margin-right: 30px;
+}
+
+#rental-availability{
+  color: red;
+}
+
+#home {
+  cursor: pointer;
+  padding: 30px;
+  font-family: 'Bungee', cursive;
+  color: #E5323B;
+}
+
+#home:hover {
+  cursor: pointer;
+  padding: 30px;
+  font-family: 'Bungee', cursive;
+  color: #FB3640;
+}
+
+#search-input {
+  line-height: 40px;
+  width: 30vw;
+  border-radius: 3px;
+}
+
+.btn-search {
+  display: none;
+}
+
+.card {
+  /* width: 350px; */
+  width: 20vw;
+  background: snow;
+  text-align: center;
+  height: 470px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.card:hover {
+  border-color: lightgray;
+  background: #fff7f7;
 }
-/*
-* {
-  border-style: solid;
+
+.image_url {
+  margin-top: 30px;
+}
+
+#movies-container {
+  text-align: center;
+  margin-left: 30px;
+}
+
+h2 {
+  font-family: 'Poppins', sans-serif;
+}
+
+p {
+  font-family: 'Roboto', sans-serif;
+}
+
+#movie-photo {
+  display: inline-block;
+  width:400px;
+  margin: 15px;
+}
+#movie-info {
+  display:inline-block;
+  width: 600px;
+  text-align: justify;
+  margin: 15px;
+  padding-top: 30px;
+
+}
+#movie-details-container {
+  text-align: center;
+}
+/*OTHER SYTLING*/
+@media only screen and (min-width: 586px) {
+  #home {
+    font-size: 2em;
+  }
+
+}
+
+@media only screen and (max-width: 586px) {
+  h2 {
+    font-size: 2.4em;
+    margin-left: -25px;
+  }
+
+  h3 {
+    font-size: 2.2em;
+  }
+
+  #movie-info {
+    width: 400px;
+  }
+
+  .card {
+    width: 450px;
+  }
+
+  #search-input {
+    width: 42vw;
+  }
 }
-*/
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,15 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  urlRoot: 'http://localhost:3000/movies',
+  validate(attributes) {
+    // title:
+    // overview:
+    // release_date:
+    // image_url:
+    // external_id:
+  },
+
+});
+
+export default Movie;
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,3 +71,5 @@ Icon @@
     Network Trash Folder
     Temporary Items
     .apdisk
+    .env