From 9c6b0c1daea51bc9a02f578e2bedb24d9b715192 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Tue, 19 Jan 2016 19:18:49 -0800 Subject: [PATCH 1/6] display movies to view, sort by name desc, add ngPluralize directive --- app.js | 25 +++++++++++++++++++++++++ index.html | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 app.js create mode 100644 index.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..7303d78 --- /dev/null +++ b/app.js @@ -0,0 +1,25 @@ +var app = angular.module('movieApp', []); +app.controller('MovieCtrl', ['$scope', function($scope) { + $scope.moviesToWatch = [ + { + title: "Revenant", + year: 2015, + poster: "https://s-media-cache-ak0.pinimg.com/736x/08/5d/03/085d03068aa497f3bb9bf2a3d0babc6c.jpg" + }, + { + title: "Antman", + year: 2015, + poster: "http://41.media.tumblr.com/5914580214f9f7686bd8d2b718a0a962/tumblr_nnxu5pMOJM1tumb9ao1_500.jpg" + }, + { + title: "Avengers: Age of Utron", + year: 2015, + poster: "http://thefilmstage.com/wp-content/uploads/2015/04/pp052015_avengers202.jpg" + }, + { + title: "Agent 47", + year: 2015, + poster: "http://40.media.tumblr.com/0eee1678d27e6575e7b4c9eac0d49e40/tumblr_nszhmgdL6m1ri74e4o3_500.jpg" + } + ]; +}]); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc89356 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Document + + +
+
+
+

+ + +

+
+
+ +
+
+

{{ movie.title }}

+

{{ movie.year }}

+
+
+
+
+
+ + + + + + \ No newline at end of file From 8b654ef2fc7dc0854f59a2cf5f3983db1e1d55b7 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Tue, 19 Jan 2016 19:56:39 -0800 Subject: [PATCH 2/6] add form to create new movie, display 5 movies, add delete movie --- app.js | 18 ++++++++++++++++++ index.html | 34 +++++++++++++++++++++++++++++----- style.css | 14 ++++++++++++++ 3 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 style.css diff --git a/app.js b/app.js index 7303d78..acfb785 100644 --- a/app.js +++ b/app.js @@ -20,6 +20,24 @@ app.controller('MovieCtrl', ['$scope', function($scope) { title: "Agent 47", year: 2015, poster: "http://40.media.tumblr.com/0eee1678d27e6575e7b4c9eac0d49e40/tumblr_nszhmgdL6m1ri74e4o3_500.jpg" + }, + { + title: "The Martian", + year: 2015, + poster: "http://thefilmstage.com/wp-content/uploads/2015/09/pp102015_martian01.jpg" + }, + { + title: "Creed", + year: 2015, + poster: "http://static1.squarespace.com/static/548fddcde4b0bbd467f73559/t/568c32ba5a56689becb297b4/1452028604332/Creed+Movie+Poster?format=500w" } ]; + $scope.addMovie = function () { + $scope.moviesToWatch.push($scope.newMovie); + $scope.newMovie = {}; + }; + $scope.deleteMovie = function(movie) { + movieToBeDeleteIndex = $scope.moviesToWatch.indexOf(movie); + $scope.moviesToWatch.splice(movieToBeDeleteIndex, 1); + }; }]); \ No newline at end of file diff --git a/index.html b/index.html index bc89356..978f0e8 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,15 @@ + + + Document
-
+

'other': '{} Movies to Watch'}">

-
-
- + +
+
+ +
-
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+

{{ movie.title }}

{{ movie.year }}

+

View Poster

diff --git a/style.css b/style.css new file mode 100644 index 0000000..a53ac23 --- /dev/null +++ b/style.css @@ -0,0 +1,14 @@ +.movie { + margin-bottom: 10px; +} +img { + height: 250px; +} +.pic-holder { + position: relative; +} +.delete { + position: absolute; + top: 5px; + left: 200px; +} \ No newline at end of file From de36ac5c7a378945a3012107a48ed8db519cb85c Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Tue, 19 Jan 2016 20:14:02 -0800 Subject: [PATCH 3/6] user can mark movie as watched or unmark --- app.js | 6 ++++++ index.html | 8 +++++--- style.css | 10 ++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index acfb785..0e3449e 100644 --- a/app.js +++ b/app.js @@ -40,4 +40,10 @@ app.controller('MovieCtrl', ['$scope', function($scope) { movieToBeDeleteIndex = $scope.moviesToWatch.indexOf(movie); $scope.moviesToWatch.splice(movieToBeDeleteIndex, 1); }; + $scope.watchedMovie = function(movie) { + movie.style = {"text-decoration": "line-through"}; + }; + $scope.unWatchedMovie = function(movie) { + movie.style = {"text-decoration": "none"}; + }; }]); \ No newline at end of file diff --git a/index.html b/index.html index 978f0e8..0f57fd1 100644 --- a/index.html +++ b/index.html @@ -41,12 +41,14 @@

+ +
-

{{ movie.title }}

-

{{ movie.year }}

-

View Poster

+

{{ movie.title }}

+

{{ movie.year }}

+

View Poster

diff --git a/style.css b/style.css index a53ac23..b6fd991 100644 --- a/style.css +++ b/style.css @@ -11,4 +11,14 @@ img { position: absolute; top: 5px; left: 200px; +} +.watched{ + position: absolute; + top: 5px; + left: 220px; +} +.un-watched{ + position: absolute; + top: 5px; + left: 240px; } \ No newline at end of file From 31a6249895e36703a5029b13dfe2ed31f8db0535 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Tue, 19 Jan 2016 21:46:37 -0800 Subject: [PATCH 4/6] finished all bonuses --- app.js | 39 +++++++++++++++++++++++++-------------- index.html | 42 +++++++++++++++++++++++------------------- style.css | 29 ++++++++++++++++++++++------- 3 files changed, 70 insertions(+), 40 deletions(-) diff --git a/app.js b/app.js index 0e3449e..692261e 100644 --- a/app.js +++ b/app.js @@ -2,48 +2,59 @@ var app = angular.module('movieApp', []); app.controller('MovieCtrl', ['$scope', function($scope) { $scope.moviesToWatch = [ { - title: "Revenant", - year: 2015, - poster: "https://s-media-cache-ak0.pinimg.com/736x/08/5d/03/085d03068aa497f3bb9bf2a3d0babc6c.jpg" + title: "The Revenant", + year: 2016, + picture: "https://fanart.tv/fanart/movies/281957/moviebackground/the-revenant-56696620a2821.jpg" }, { - title: "Antman", + title: "Ant Man", year: 2015, - poster: "http://41.media.tumblr.com/5914580214f9f7686bd8d2b718a0a962/tumblr_nnxu5pMOJM1tumb9ao1_500.jpg" + picture: "https://events.ucsb.edu/wp-content/uploads/2015/09/Marvel-Ant-Man-Banner-Poster.jpg" }, { title: "Avengers: Age of Utron", year: 2015, - poster: "http://thefilmstage.com/wp-content/uploads/2015/04/pp052015_avengers202.jpg" + picture: "http://oi57.tinypic.com/28bfu3a.jpg" }, { title: "Agent 47", year: 2015, - poster: "http://40.media.tumblr.com/0eee1678d27e6575e7b4c9eac0d49e40/tumblr_nszhmgdL6m1ri74e4o3_500.jpg" + picture: "http://images8.alphacoders.com/614/614163.jpg" }, { title: "The Martian", year: 2015, - poster: "http://thefilmstage.com/wp-content/uploads/2015/09/pp102015_martian01.jpg" + picture: "http://s3.foxfilm.com/foxmovies/production/films/104/images/gallery/martian-gallery3-gallery-image.jpg" }, { title: "Creed", year: 2015, - poster: "http://static1.squarespace.com/static/548fddcde4b0bbd467f73559/t/568c32ba5a56689becb297b4/1452028604332/Creed+Movie+Poster?format=500w" + picture: "http://totalrocky.com/films/creed-2015/ucwzuno3i1xbdo3dkucv.jpg" } ]; - $scope.addMovie = function () { + $scope.addMovie = function() { $scope.moviesToWatch.push($scope.newMovie); $scope.newMovie = {}; }; + $scope.movieLimitFive = true; + $scope.toggleMovieLimit = function() { + if ($scope.movieLimitFive) { + $scope.movieLimitFive = false; + } else { + $scope.movieLimitFive = true; + } + }; $scope.deleteMovie = function(movie) { movieToBeDeleteIndex = $scope.moviesToWatch.indexOf(movie); $scope.moviesToWatch.splice(movieToBeDeleteIndex, 1); }; $scope.watchedMovie = function(movie) { - movie.style = {"text-decoration": "line-through"}; - }; - $scope.unWatchedMovie = function(movie) { - movie.style = {"text-decoration": "none"}; + movie.watched = movie.watched ? false : true; + movie.watched ? movie.style = {"text-decoration" : "line-through"} : movie.style = {"text-decoration" : "none"}; }; + $scope.changeBackground = function() { + randomNum = Math.floor(Math.random() * $scope.moviesToWatch.length); + randomPicture = $scope.moviesToWatch[randomNum].picture; + $scope.background = {'background-image': 'url(' + randomPicture + ')'}; + }; }]); \ No newline at end of file diff --git a/index.html b/index.html index 0f57fd1..e472180 100644 --- a/index.html +++ b/index.html @@ -8,18 +8,21 @@ Document - +
-
-

- - -

- +
+
+

+ + +

+ +
+
@@ -30,27 +33,28 @@

- - + +
- +
- -
+
+
- - - + +

{{ movie.title }}

{{ movie.year }}

-

View Poster

+ + Show {{movieLimitFive ? "More" : "Less"}} +
diff --git a/style.css b/style.css index b6fd991..c422cfa 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,23 @@ -.movie { +.body { + height: 100%; + width: 100%; + background-size: cover; + background-repeat: repeat-x; + background-position: right top; + background-attachment: fixed; +} +.holder { + padding-bottom: 50px; +} +.movie, form { margin-bottom: 10px; + background-color: rgba(255,255,255,0.5); + box-shadow: 0 0 10px 1px rgba(0,0,0,0.25); + margin-bottom: 1em; + padding: 10px; } img { - height: 250px; + width: 250px; } .pic-holder { position: relative; @@ -10,15 +25,15 @@ img { .delete { position: absolute; top: 5px; - left: 200px; + left: 280px; } .watched{ position: absolute; - top: 5px; - left: 220px; + top: 25px; + left: 280px; } .un-watched{ position: absolute; - top: 5px; - left: 240px; + top: 45px; + left: 280px; } \ No newline at end of file From b6bff6391d9689706c5ec0d1e3770a709b5821cd Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Tue, 19 Jan 2016 23:22:12 -0800 Subject: [PATCH 5/6] add default movie pic, hide and show form, add mark as watched date --- app.js | 7 +++++++ index.html | 51 ++++++++++++++++++++++++++++----------------------- style.css | 7 +++++-- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/app.js b/app.js index 692261e..beff9b8 100644 --- a/app.js +++ b/app.js @@ -33,8 +33,12 @@ app.controller('MovieCtrl', ['$scope', function($scope) { } ]; $scope.addMovie = function() { + if (!$scope.newMovie.picture) { + $scope.newMovie.picture = "http://gujaratprachar.com/img/placeholder_noImage_bw.png"; + } $scope.moviesToWatch.push($scope.newMovie); $scope.newMovie = {}; + $scope.newMovieForm = false; }; $scope.movieLimitFive = true; $scope.toggleMovieLimit = function() { @@ -50,6 +54,9 @@ app.controller('MovieCtrl', ['$scope', function($scope) { }; $scope.watchedMovie = function(movie) { movie.watched = movie.watched ? false : true; + if (movie.watched) { + movie.watchedTime = (new Date()).toLocaleDateString(); + } movie.watched ? movie.style = {"text-decoration" : "line-through"} : movie.style = {"text-decoration" : "none"}; }; $scope.changeBackground = function() { diff --git a/index.html b/index.html index e472180..83f6037 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@
-
-
+
+

Try Me -
+
+
+ Add Movie to Watchlist +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
+
-
+

{{ movie.title }}

{{ movie.year }}

+

{{movie.watched ? "Mard as watched: " + movie.watchedTime : ""}}

- Show {{movieLimitFive ? "More" : "Less"}} + Show {{movieLimitFive ? "All" : "Less"}}
diff --git a/style.css b/style.css index c422cfa..3b55cfd 100644 --- a/style.css +++ b/style.css @@ -9,9 +9,12 @@ .holder { padding-bottom: 50px; } +.header { + padding: 10px; + background-color: rgba(255,255,255,0.9); +} .movie, form { - margin-bottom: 10px; - background-color: rgba(255,255,255,0.5); + background-color: rgba(255,255,255,0.9); box-shadow: 0 0 10px 1px rgba(0,0,0,0.25); margin-bottom: 1em; padding: 10px; From 67dbbae7f5025e6eea9b4dcf79fd40f853c26d81 Mon Sep 17 00:00:00 2001 From: tkhuynh Date: Wed, 20 Jan 2016 09:19:30 -0800 Subject: [PATCH 6/6] fixed typos --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 83f6037..e46917f 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@

{{ movie.title }}

{{ movie.year }}

-

{{movie.watched ? "Mard as watched: " + movie.watchedTime : ""}}

+

{{movie.watched ? "Marked as watched: " + movie.watchedTime : ""}}