diff --git a/2studio-edits b/2studio-edits new file mode 100644 index 0000000..de01e8e --- /dev/null +++ b/2studio-edits @@ -0,0 +1,110 @@ +var model = { + watchlistItems: [], + browseItems: [] +} + + +var api = { + root: "https://api.themoviedb.org/3", + token: "792528da886dc1abe881496296beae52" // TODO 0 (DONE) add your api key +} + + +/** + * Makes an AJAX request to themoviedb.org, asking for some movies + * if successful, updates the model.browseItems appropriately, and then invokes + * the callback function that was passed in + */ +function discoverMovies(callback) { + $.ajax({ + url: api.root + "/discover/movie", + data: { + api_key: api.token + }, + success: function(response) { + model.browseItems = response.results; + callback(response); + } + }); +} + + +/** + * Makes an AJAX request to the /search endpoint of the API, using the + * query string that was passed in + * + * if successful, updates model.browseItems appropriately and then invokes + * the callback function that was passed in + */ +function searchMovies(query, callback) { + // TODO 8 (DONE) + + $.ajax({ + url: api.root + "/search/movie", + data: { + api_key: api.token, + query: query + }, + success: function(response) { + model.browseItems = response.results; + callback(response); + } + }); +} + + +/** + * re-renders the page with new content, based on the current state of the model + */ +function render() { + + // clear everything + $("#section-watchlist ul").empty(); + $("#section-browse ul").empty(); + + // insert watchlist items + model.watchlistItems.forEach(function(movie) { + var title = $("
").text(movie.original_title); + var itemView = $("") + .append(title) + .attr("class", "item-watchlist"); + // TODO 3 (DONE see line above) + // give itemView a class attribute of "item-watchlist" + + $("#section-watchlist ul").append(itemView); + }); + + // insert browse items + model.browseItems.forEach(function(movie) { + var title = $("").text(movie.original_title); + var button = $("") + .text("Add to Watchlist") + .click(function() { + model.watchlistItems.push(movie); + render(); + }) + .prop("disabled", model.watchlistItems.indexOf(movie) !== -1); + // TODO 2 (DONE see line above) + // the button should be disabled if this movie is already in + // the user's watchlist + // see jQuery .prop() and Array.indexOf() + + + // TODO 1 (DONE) + // create a paragraph containing the movie object's .overview value + // then append the paragraph in between the title and the button + var overview = $("").text(movie.overview); + + + // append everything to itemView, along with an