Ada-C8 · biciclista22 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 19, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,15 +1,66 @@
 <!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">
+  <title>BiBi and Ang's BadAss Backbone Baseline</title>
+</head>
+<body>
+  <main id="main-content">
+    <header>
+
+      <h1>BiBi and Ang's BadAss Backbone Baseline</h1>
+      <section class="library-movies" id="library-movies">
+      </section>
+
+      <!-- <ul id="search" class="menu align-right large-5 medium-5 columns">
+        <li id="buttons"><button class="button view-library-btn">View Library Movies</button></li>
+
+        <li><button class="button search-btn">Search for Movies</button></li>
+
+        <li><input type="text" name="queryTerm" placeholder="Movie Title" id="search-box" /></li>
+        <li><a id="search-button" type="button" value="Search">Search</a></li>
+
+
+      </ul> -->
+    </header>
+
+    <section class="search-form grid-x" id="search-form">
+      <div class="columns medium-9 small-12">
+        <ul>
+          <li id="buttons"><button class="button view-library-btn">View Library Movies</button></li>
+
+          <li><form id="movie-search-form">
+            <input id="query" type="text" name="query" placeholder="Movie Title"/>
+            <input type="submit" value="GO" />
+          </form></li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="movies-appear">
+
+      <div class="movies-container" id="movies-container">
+        <ul class="movies" id="movies">
+        </ul>
+      </div>
+    </section>
+
+
+
+
+  </main>
+
+  <script src="/app.bundle.js"></script>
+
+  <script type="text/template" id="movie-template">
+    <img src="<%- image_url %>" />
+    <h2 class="title"><%- title %></h2>
+    <p class="overview"><%- overview %></p>
+    <p class="release-date">Release Date: <%- release_date %></p>
+    <button class='btn-add alert button' style="<%- external_id ? '' : 'display:none;' %>">Add to Library</button>
+  </script>
+
+
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -6,9 +6,58 @@ import './css/styles.css';
 import $ from 'jquery';
 import _ from 'underscore';
 
+//MODELS AND COLLECTIONS
+import Movie from './models/movie';
+import MovieList from './collections/movie_list';
+
+//VIEWS
+import MovieView from './views/movie_view';
+import MoviesLibraryView from './views/movies_library_view';
+
 // ready to go
 $(document).ready(function() {
 
-  $('#main-content').append('<p>Hello World!</p>');
+  const moviesLibraryTemplate = _.template($('#movie-template').html());
+
+  const movies = new MovieList();
+  // movies.fetch()
+
+  // $('.movies-appear').hide()
+
+  $('.view-library-btn').click(function() {
+    console.log('in the view library button');
+    movies.fetch({
+      reset: true
+    })
+  });
+
+  const moviesLibraryView = new MoviesLibraryView({
+    el: '#movies-container',
+    model: movies,
+    template: moviesLibraryTemplate,
+  });
+
+  moviesLibraryView.render();
+
+  $('#movie-search-form').on('submit', function(event) {
+    event.preventDefault();
+
+    let queryText = $('#query').val().trim();
+    if (queryText.length > 0 ){
+      movies.fetch({
+        reset: true,
+        data: { query: queryText }
+      });
+    } else {
+      movies.fetch();
+    }
+
+  });
+
+  // $('#movies-container').on('click', function(event){
+  //   movies.fetch({
+  //     reset: true
+  //   });
+  // })
 
 });
diff --git a/src/collections/movie_DB_movie_list.js b/src/collections/movie_DB_movie_list.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const MovieDbMovieList = Backbone.Collection.extend({
+
+});
+
+export default MovieDbMovieList
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
diff --git a/src/css/popcorn.png b/src/css/popcorn.png
diff --git a/src/css/star.jpg b/src/css/star.jpg
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,12 +1,48 @@
 @include foundation-everything;
 
 main {
-    background: lightblue;
+    background: white;
 }
 
 header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+  background-color: gold;
+  /*text-shadow: 2px 2px 2px 2px #88b824;*/
+  font-weight: bold;
+  /*color: rgba(63,127,191, 1);*/
+  padding: 40px;
+  margin-bottom: 10px;
+  background-image: url("popcorn.png");
+  /*opacity: .2;*/
+}
+
+h1 {
+  color: #9AC83A;
+  /*opacity: 1;*/
+}
+
+.button {
+  background: #9AC83A;
+  height: 60px;
+  width: auto;
+  font-size: 17px;
+  font-weight: 550;
+  margin-right: 7px;
+  margin-top: 10px;
+}
+
+
+.button:hover {
+  /*background: red;*/
+  background: #88b824;
+  background-color: linear-gradient(top,#b0dc55,#88b824);
+
+}
+.button:focus {
+  background: #9AC83A
+}
+
+#query {
+
 }
 
 #completed-checkbox {
@@ -37,6 +73,24 @@ aside label {
 div {
   display: inline;
 }
+
+ul {
+  list-style: none;
+}
+
+#query {}
+
+
+script h2, script p, script button {
+  display: inline-block;
+  float: right;
+}
+
+#search-form {
+  display: right;
+}
+
+
 /*
 * {
   border-style: solid;

diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  defaults: {
+    title: 'UNDEF',
+    overview: 'RANDOM',
+    release_date: '01-01-01',
+    image_url: 'bogus.jpg'
+  },
+});
+
+export default Movie
diff --git a/src/models/movie_DB_movie.js b/src/models/movie_DB_movie.js
@@ -0,0 +1,7 @@
+import BackBone from 'backbone';
+
+const MovieDbMovie = Backbone.Model.extend({
+
+});
+
+export default MovieDbMovie
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
@@ -0,0 +1,22 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'change', this.render);
+  },
+  render() {
+    const compileTemplate = this.template(this.model.toJSON());
+    this.$el.html(compileTemplate);
+    return this;
+  },
+  events: {
+    'click button.btn-add': 'add'
+  },
+  add(event) {
+    this.model.save();
+  },
+})
+
+export default MovieView
diff --git a/src/views/movies_library_view.js b/src/views/movies_library_view.js
@@ -0,0 +1,29 @@
+import Backbone from 'backbone';
+import MovieList from '../collections/movie_list';
+
+// views
+import MovieView from './movie_view'
+
+const MoviesLibraryView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    this.listenTo(this.model, 'update reset', this.render);
+  },
+  render(){
+    this.$('#movies').empty();
+
+    this.model.each((movie) => {
+      const movieView = new MovieView({
+        model: movie,
+        template: this.template,
+        className: 'movie',
+        tagName: 'li',
+      });
+
+      this.$('#movies').append(movieView.render().$el);
+    });
+    return this;
+  },
+});
+
+export default MoviesLibraryView