LaunchCode-Education-Archived · CamArturo · Apr 22, 2016 · Apr 22, 2016 · Apr 22, 2016 · Apr 22, 2016
diff --git a/README.md b/README.md
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -1,47 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8"/>
+    <meta charset="utf-8"/>
 
-  <script src="https://code.jquery.com/jquery-2.2.3.js"></script>  
+    <script src="https://code.jquery.com/jquery-2.2.3.js"></script>
 
-  <title>FlickList</title>
+    <title>FlickList</title>
 </head>
 <body>
 
-  <header>
+<header>
     <h1>FlickList</h1>
     <p>Keep a list of all the movies you've been meaning to watch.</p>
-  </header>
+</header>
 
-  <section id="section-watchlist">
+<section id="section-watchlist">
     <header>
-      <h2>My Watchlist</h2>
-      <hr/>
+        <h2>My Watchlist</h2>
+        <hr/>
     </header>
 
     <ul></ul>
-  </section>
-
-  <!-- 
-  TODO
-  Add another section for browsing movies
-  -->
-  
-
-  <!-- 
-  DONE add a footer to the bottom of the page 
-  -->
-
-
-  <script src="js/flicklist.js"></script>
-  <script>
-    // When the document is ready, we call the discoverMovies function,
-    // and pass the render functio as its callback
-    $(document).ready(function() {
-      discoverMovies(render);
-    })
-  </script>
-
-</body> 
-</html>
+</section>
+
+<!--
+TODO 1
+Add another section, very similar to the one above, for the user to browse movies
+Give it an id of "section-browse"
+It should display "Browse Movies" in large text
+It should contain an empty unordered list
+-->
+
+<section id="section-browse">
+    <header>
+        <h2>Browse Movies</h2>
+        <hr/>
+    </header>
+
+    <ul></ul>
+</section>
+
+
+<script src="js/flicklist.js"></script>
+
+</body>
+</html>
diff --git 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: "8e888fa39ec243e662e1fb738c42ae99"
+    root: "https://api.themoviedb.org/3",
+    token: "a5236e0bfac6c2e98564690ff04e45fe" // TODO 0 put your api key here
 }
 
 
@@ -18,16 +18,77 @@ 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 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();
+        }
+    });
+
 }
 
 
 /**
  * re-renders the page with new content, based on the current state of the model
  */
 function render() {
-  // TODO
-
+    // 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 <ul> in the watchlist section
+    model.watchlistItems.forEach(function (movie) {
+        var itemView = $("<li></li>").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 <ul> in the browse section
+        // var newMovieTitle = $("<li><p>" +  + "</p><button>Add me!</button></li>")
+        // $('#section-browse ul').append(newMovieTitle);
+        var title = $("<p></p>").text(movie.original_title);
+
+        // TODO 4 (DONE)
+        // the list item should include a button that says "Add to Watchlist"
+
+        var button = $("<button></button>").text("Add to Watchlist");
+        var itemView = $("<li></li>").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);
+});
+