diff --git a/dist/index.html b/dist/index.html index 559b18ecd..5eec3a47f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,66 @@ - - - Backbone Baseline - - -
- -
- - - - - + + + BiBi and Ang's BadAss Backbone Baseline + + +
+
+ +

BiBi and Ang's BadAss Backbone Baseline

+
+
+ + +
+ +
+
+
    +
    • + +
  • + + +
    • +
+
+
+ +
+ +
+
    +
+
+
+ + + + +
+ + + + + + + + + diff --git a/src/app.js b/src/app.js index 30c00d594..366cb1044 100644 --- 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('

Hello World!

'); + 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 new file mode 100644 index 000000000..342c56b46 --- /dev/null +++ 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 new file mode 100644 index 000000000..228395193 --- /dev/null +++ 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 new file mode 100644 index 000000000..fa1c1cf52 Binary files /dev/null and b/src/css/popcorn.png differ diff --git a/src/css/star.jpg b/src/css/star.jpg new file mode 100644 index 000000000..70139b93d Binary files /dev/null and b/src/css/star.jpg differ diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..aa830598a 100644 --- 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 new file mode 100644 index 000000000..2fff31009 --- /dev/null +++ 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 new file mode 100644 index 000000000..0adafcb2c --- /dev/null +++ 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 new file mode 100644 index 000000000..8da4f4476 --- /dev/null +++ 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 new file mode 100644 index 000000000..49f40fe74 --- /dev/null +++ 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