diff --git a/app.js b/app.js new file mode 100644 index 0000000..beff9b8 --- /dev/null +++ b/app.js @@ -0,0 +1,67 @@ +var app = angular.module('movieApp', []); +app.controller('MovieCtrl', ['$scope', function($scope) { + $scope.moviesToWatch = [ + { + title: "The Revenant", + year: 2016, + picture: "https://fanart.tv/fanart/movies/281957/moviebackground/the-revenant-56696620a2821.jpg" + }, + { + title: "Ant Man", + year: 2015, + picture: "https://events.ucsb.edu/wp-content/uploads/2015/09/Marvel-Ant-Man-Banner-Poster.jpg" + }, + { + title: "Avengers: Age of Utron", + year: 2015, + picture: "http://oi57.tinypic.com/28bfu3a.jpg" + }, + { + title: "Agent 47", + year: 2015, + picture: "http://images8.alphacoders.com/614/614163.jpg" + }, + { + title: "The Martian", + year: 2015, + picture: "http://s3.foxfilm.com/foxmovies/production/films/104/images/gallery/martian-gallery3-gallery-image.jpg" + }, + { + title: "Creed", + year: 2015, + picture: "http://totalrocky.com/films/creed-2015/ucwzuno3i1xbdo3dkucv.jpg" + } + ]; + $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() { + 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.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() { + 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 new file mode 100644 index 0000000..e46917f --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + + + Document + + +
+
+
+
+

+ + +

+ +
+
+ Add Movie to Watchlist +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+ + + +
+
+

{{ movie.title }}

+

{{ movie.year }}

+

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

+
+
+ + Show {{movieLimitFive ? "All" : "Less"}} + +
+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3b55cfd --- /dev/null +++ b/style.css @@ -0,0 +1,42 @@ +.body { + height: 100%; + width: 100%; + background-size: cover; + background-repeat: repeat-x; + background-position: right top; + background-attachment: fixed; +} +.holder { + padding-bottom: 50px; +} +.header { + padding: 10px; + background-color: rgba(255,255,255,0.9); +} +.movie, form { + 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; +} +img { + width: 250px; +} +.pic-holder { + position: relative; +} +.delete { + position: absolute; + top: 5px; + left: 280px; +} +.watched{ + position: absolute; + top: 25px; + left: 280px; +} +.un-watched{ + position: absolute; + top: 45px; + left: 280px; +} \ No newline at end of file