From 974d758615c9c83f19c57723f20991b38c7db992 Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 13:13:19 -0500 Subject: [PATCH 01/16] better instructions; remove document ready script (move it to the js file) --- index.html | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index f07d92e..8be67e3 100644 --- a/index.html +++ b/index.html @@ -25,23 +25,14 @@

My Watchlist

- - - - - \ No newline at end of file + From f51db08b00b1598f39863e6e3b7498df95d97411 Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 13:14:49 -0500 Subject: [PATCH 02/16] add doc ready --- js/flicklist.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/flicklist.js b/js/flicklist.js index 9e50acd..5d02314 100644 --- a/js/flicklist.js +++ b/js/flicklist.js @@ -31,3 +31,10 @@ function render() { } + +// When the HTML document is ready, we call the discoverMovies function, +// and pass the render function as its callback +$(document).ready(function() { + discoverMovies(render); +}); + From 6b17a2ea5e3285c9225294e786898e80935acc79 Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 16:21:37 -0500 Subject: [PATCH 03/16] more specific todos --- js/flicklist.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/js/flicklist.js b/js/flicklist.js index 5d02314..b416ee0 100644 --- a/js/flicklist.js +++ b/js/flicklist.js @@ -18,7 +18,22 @@ var api = { * the callback function that was passed in */ function discoverMovies(callback) { - // TODO + $.ajax({ + url: api.root + "/discover/movie", + data: { + api_key: api.token, + }, + success: function(response) { + console.log("We got a response from The Movie DB!"); + console.log(response); + + // TODO + // update the model, setting its .browseItems property equal to the movies we recieved in the response + + // TODO + // invoke the callback function that was passed in + } + }); } @@ -28,7 +43,7 @@ function discoverMovies(callback) { */ function render() { // TODO - + // } From 3057c75bbd4fd80c508f76e685e904ffa69c5bec Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 16:24:22 -0500 Subject: [PATCH 04/16] more specific TODOs in render as well --- js/flicklist.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/flicklist.js b/js/flicklist.js index b416ee0..c5f1ce9 100644 --- a/js/flicklist.js +++ b/js/flicklist.js @@ -43,7 +43,14 @@ function discoverMovies(callback) { */ function render() { // TODO - // + // clear everything from both lists + + // TODO + // for each movie on the user's watchlist, add an item to the
    in the watchlist section + + // TODO + // for each movie on the current browse list, add an item to the
      in the browse section + // the item should include a button, that, when clicked, adds the movie to the watchlist and re-renders } From 0ac49d04c5142e9534683d83b1808689c70307f0 Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 17:04:34 -0500 Subject: [PATCH 05/16] chronologize the TODOs --- js/flicklist.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/js/flicklist.js b/js/flicklist.js index c5f1ce9..da9e955 100644 --- a/js/flicklist.js +++ b/js/flicklist.js @@ -18,7 +18,7 @@ var api = { * the callback function that was passed in */ function discoverMovies(callback) { - $.ajax({ + $.ajax({ url: api.root + "/discover/movie", data: { api_key: api.token, @@ -27,11 +27,11 @@ function discoverMovies(callback) { console.log("We got a response from The Movie DB!"); console.log(response); - // TODO + // TODO 1 // update the model, setting its .browseItems property equal to the movies we recieved in the response - // TODO - // invoke the callback function that was passed in + // invoke the callback function that was passed in. + callback(); } }); @@ -42,15 +42,21 @@ function discoverMovies(callback) { * re-renders the page with new content, based on the current state of the model */ function render() { - // TODO + // TODO 4 // clear everything from both lists - // TODO - // for each movie on the user's watchlist, add an item to the
        in the watchlist section + // TODO 3 + // for each movie on the user's watchlist, insert a list item into the
          in the watchlist section + + // for each movie on the current browse list, + model.browseItems.forEach(function(movie) { + // TODO 2 + // insert a list item into the
            in the browse section + + // TODO 5 + // the list item should include a button, that, when clicked, adds the movie to the watchlist and re-renders + }); - // TODO - // for each movie on the current browse list, add an item to the
              in the browse section - // the item should include a button, that, when clicked, adds the movie to the watchlist and re-renders } From 59689bd87f4ebf467ffedeb20c1e7ec2e48a8f2c Mon Sep 17 00:00:00 2001 From: Jesse Levine Date: Fri, 22 Apr 2016 17:05:30 -0500 Subject: [PATCH 06/16] chronologize in this page --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8be67e3..76566c3 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

              My Watchlist

              - + - +
              +
              +

              Browse Movies

              +
              +
              + +
                +
                + + + - + diff --git a/js/flicklist.js b/js/flicklist.js index 74f487f..53c8639 100644 --- a/js/flicklist.js +++ b/js/flicklist.js @@ -1,14 +1,14 @@ var model = { - watchlistItems: [], - browseItems: [] + watchlistItems: [], + browseItems: [] } var api = { - root: "https://api.themoviedb.org/3", - token: "a5236e0bfac6c2e98564690ff04e45fe" // TODO 0 put your api key here + root: "https://api.themoviedb.org/3", + token: "a5236e0bfac6c2e98564690ff04e45fe" // TODO 0 put your api key here } @@ -18,23 +18,25 @@ var api = { * the callback function that was passed in */ function discoverMovies(callback) { - $.ajax({ - url: api.root + "/discover/movie", - data: { - api_key: api.token, - }, - success: function(response) { - console.log("We got a response from The Movie DB!"); - console.log(response); - - // TODO 2 - // update the model, setting its .browseItems property equal to the movies we recieved in the response - - // invoke the callback function that was passed in. - callback(); - } - }); - + $.ajax({ + url: api.root + "/discover/movie", + data: { + api_key: api.token, + }, + success: function(response) { + console.log("We got a response from The Movie DB!"); + //console.log(response); + + // TODO 2 (DONE) + // update the model, setting its .browseItems property equal to the movies we recieved in the response + // update the model variable, filling its .browseItems property with the newly received list of movies + model.browseItems = response.results; + //console.log(model.browseItems); + // invoke the callback function that was passed in. + callback(); + } + }); + } @@ -42,30 +44,51 @@ function discoverMovies(callback) { * re-renders the page with new content, based on the current state of the model */ function render() { - // TODO 7 - // clear everything from both lists - - // TODO 6 - // for each movie on the user's watchlist, insert a list item into the
                  in the watchlist section - - // for each movie on the current browse list, - model.browseItems.forEach(function(movie) { - // TODO 3 - // insert a list item into the
                    in the browse section - - // TODO 4 - // the list item should include a button that says "Add to Watchlist" - - // TODO 5 - // when the button is clicked, this movie should be added to the model's watchlist and render() should be called again - }); - + // TODO 7 + // clear everything from both lists + $('#section-watchlist ul').empty(); + + // TODO 6 + // for each movie on the user's watchlist, insert a list item into the
                      in the watchlist section + model.watchlistItems.forEach(function (movie) { + var itemView = $("
                    • ").text(movie.original_title); + $('#section-watchlist ul').append(itemView); + }) + + + // for each movie on the current browse list, + model.browseItems.forEach(function(movie) { + // TODO 3 (DONE) + // insert a list item into the
                        in the browse section + // var newMovieTitle = $("

                      • " + + "

                        • ") + // $('#section-browse ul').append(newMovieTitle); + var title = $("

                        ").text(movie.original_title); + + // TODO 4 (DONE) + // the list item should include a button that says "Add to Watchlist" + + var button = $("").text("Add to Watchlist"); + var itemView = $("
                      • ").append(title).append(button);; + + $('#section-browse ul').append(itemView); + + // TODO 5 (DONE) + // when the button is clicked, this movie should be added to the model's watchlist and render() should be called again + + $(button).on('click', function () { + model.watchlistItems.push(movie); + render(); + }); + + + }); + } // When the HTML document is ready, we call the discoverMovies function, // and pass the render function as its callback $(document).ready(function() { - discoverMovies(render); + discoverMovies(render); });