Movie App - Watchlist - Creating a watchlist movie view RESOLVED

Developer
Kyle Houston
Size
11,291 Kb
Views
28,336
  1. Movie App - Watchlist - Creating a watchlist movie view RESOLVED Previews
  2. Movie App - Watchlist - Creating a watchlist movie view RESOLVED HTML Codes
  3. Movie App - Watchlist - Creating a watchlist movie view RESOLVED JS Codes

How do I make an movie app - watchlist - creating a watchlist movie view resolved?

Action List. What is a movie app - watchlist - creating a watchlist movie view resolved? How do you make a movie app - watchlist - creating a watchlist movie view resolved? This script and codes were developed by Kyle Houston on 25 August 2022, Thursday.

Movie App - Watchlist - Creating a watchlist movie view RESOLVED Previews
IQ Test

Movie App - Watchlist - Creating a watchlist movie view RESOLVED - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Movie App - Watchlist - Creating a watchlist movie view RESOLVED</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://codepen.io/styler/pen/obbdoe.css'>
</head>
<body> <header class="global-header js-header">	<nav class="main-nav">	<a href="/" class="main-nav__link is-active js-nav-link">Popular</a>	<a href="/watchlist" class="main-nav__link js-nav-link">Watchlist</a>	</nav>
</header>
<div class="main-content js-app">	<!-- App Contents -->
</div>
<script type="text/template" class="tmpl-movie">	<% _.each(movies, function(movie) { %>	<a href="/movie/<%= movie.id %>" class="movie js-movie--show">	<img src="<%= movie.backdrop_small %>" alt="<%= movie.title %>">	<h2 class="movie__info"><%= movie.title %></h2>	</a>	<% }); %>
</script>
<script type="text/template" class="tmpl-movie-detailed">	<div class="poster-holder">	<img src="<%= backdrop_large %>" alt="<%= title %>" class="movie-detailed__poster">	</div>	<div class="movie-details">	<a href="/" class="action action--back js-action--back">	<svg height="80px" width="80px" class="action__icon action__icon--back" viewBox="0 0 80 80"><rect height="38" width="5" x="19" y="20.547"/><polygon points="46.371,59 49.906,55.465 36.488,42.047 61,42.047 61,37.047 36.652,37.047 49.906,23.793 46.371,20.258 27,39.629"/></svg>	</a>	<h1 class="movie-details__title"><%= title %></h1>	<div class="movie-details__content">	<p><%= overview %></p>	</div>	<!-- Add watchlist button here -->	<% if(!watchlist) { %>	<button class="action action-watchlist--added js-watchlist--add">	<svg height="80px" width="80px" class="action__icon action__icon--add" viewBox="0 0 80 80">	<polygon points="61,37 43,37 43,19 37,19 37,37 19,37 19,43 37,43 37,61 43,61 43,43 61,43" />	</svg>	Add to watchlist	</button>	<% } else { %>	<button class="action action-watchlist--removed js-watchlist--remove">	<svg height="80px" width="80px" class="action__icon action__icon--remove" viewBox="0 0 80 80">	<polygon points="56.971,52.728 44.243,40 56.971,27.272 52.728,23.029 40,35.757 27.272,23.029 23.029,27.272 35.757,40 23.029,52.728 27.272,56.971 40,44.243 52.728,56.971" />	</svg>	Remove from watchlist	</button>	<% } %>	</div>
</script>
<!-- 1. Create Watchlist Collection Template -->
<script type="text/template" class="tmpl-watchlist">	<div class="notification">	<img src="http://cdn.meme.am/instances2/500x/3145144.jpg" alt="" class="sadface" />	</div>
</script>
<!-- 2. Create a Watchlist Movie Template -->
<script type="text/template" class="tmpl-watchlist-movie">	<a href="/movie/<%= id %>" class="js-movie--show">	<img src="<%= backdrop_small %>" alt="<%= title %>">	<span class="movie__info">	<h2><%= title %></h2>	<button class="action action-watchlist--remove js-watchlist--remove">	<svg height="80px" width="80px" class="action__icon action__icon--remove" viewBox="0 0 80 80"><polygon points="56.971,52.728 44.243,40 56.971,27.272 52.728,23.029 40,35.757 27.272,23.029 23.029,27.272 35.757,40 23.029,52.728 27.272,56.971 40,44.243 52.728,56.971"/></svg>	</button>	</span>	</a>
</script>
<img src="http://cdn.meme.am/instances2/500x/3145144.jpg" alt="" style="display:none"> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage.js'></script>
<script src='js/yymwwy.js'></script> <script src="js/index.js"></script>
</body>
</html>

Movie App - Watchlist - Creating a watchlist movie view RESOLVED - Script Codes JS Codes

console.clear();
var App = {	Models: {},	Views: {},	Collections: {},	utils: {},	appEl: $('.js-app'),	start: function() {	// Mix Backbone.Events into App	_.extend(this, Backbone.Events);	// Subscribe to 'show:movie' event	this.listenTo(Backbone.Events, 'show:movie', this.onShowMovie);	this.listenTo(Backbone.Events, 'show:movies', this.onShowMovies);	this.listenTo(Backbone.Events, 'show:watchlist', this.onShowWatchlist);	this.listenTo(Backbone.Events, 'watchlist:add', this.onWatchlistAdd);	this.listenTo(Backbone.Events, 'watchlist:remove', this.onWatchlistRemove);	// Collections	this.movieCollection = new App.Collections.MovieCollection;	this.watchlistCollection = new App.Collections.WatchlistCollection;	// Start Backbone.history API	Backbone.history.start();	},	// Create onShowMovies	onShowMovies: function() {	// Instantiate a movie collection View.	var movieCollectionView = new App.Views.MovieCollectionView({	collection: this.movieCollection	});	this._changeView(movieCollectionView);	// Fetch movie data.	this.movieCollection.fetch();	},	// Create onShowMovie	onShowMovie: function(id) {	var deferred = $.Deferred();	// Check movie Collection has Models & check movie exists in Collection	if( this.movieCollection.length > 0 && this.movieCollection.contains(id) ) {	deferred.resolve();	} else {	// Fetch the movie data if movies don't exist	this.movieCollection.fetch().done(function() {	deferred.resolve();	});	}	deferred.done(function() {	// Get the correct movie model from the movie Collection using it's ID	var movieModel = this.movieCollection.get(id);	// Create the Detailed Movie View	var detailedMovieView = new App.Views.DetailedMovieView({	model: movieModel	});	this._changeView(detailedMovieView);	}.bind(this));	},	onShowWatchlist: function() {	this.watchlistCollection.fetch().done(function() {	var watchlistCollectionView = new App.Views.WatchlistCollectionView({	collection: this.watchlistCollection	});	this._changeView(watchlistCollectionView);	}.bind(this));	},	onWatchlistAdd: function(model) {	// Set the models watchlist attribute to true	model.set('watchlist', true);	// Add model to the watchlist collection	this.watchlistCollection.add(model);	// Save model	model.save();	},	onWatchlistRemove: function(model) {	// Set the models watchlist attribute to false	model.set('watchlist', false);	// Remove model to the watchlist collection	this.watchlistCollection.remove(model);	// Destroy model	model.clone().destroy();	},	_changeView: function(view) { if (this.currentView) { this.currentView.dispose(); this.currentView = null; } this.currentView = view;	this.appEl.html(this.currentView.render().el); }
};
App.Models.MovieModel = Backbone.Model.extend({	// Add a watchlist default to Movie Model	defaults: {	'backdrop_small': 'https://placeimg.com/500/281/any/grayscale/1',	'backdrop_large': 'https://placeimg.com/1280/720/grayscale/1',	'watchlist': false	},	localStorage: new Store('watchlist'), parse: function(response) {	if(response.backdrop_path) {	response.backdrop_small = 'http://image.tmdb.org/t/p/w500/'+response.backdrop_path;	response.backdrop_large = 'http://image.tmdb.org/t/p/w1280/'+response.backdrop_path;	}	delete response.backdrop_path; return response; }
});
App.Collections.MovieCollection = Backbone.Collection.extend({	model: App.Models.MovieModel,	url: 'http://codepen.io/styler/pen/yYmWWY.js',	parse: function(response) {	return response[0].results;	}
});
// Create a Watchlist Collection
App.Collections.WatchlistCollection = Backbone.Collection.extend({	model: App.Models.MovieModel,	localStorage: new Store('watchlist')
});
App.Views.BaseView = Backbone.View.extend({	dispose: function() {	this.remove();	}
});
App.Views.MovieCollectionView = App.Views.BaseView.extend({	className: 'movie-grid',	events: {	'click .js-movie--show': 'onMovieClick'	},	template: _.template( $('.tmpl-movie').html() ),	initialize: function() {	this.listenTo(this.collection, 'sync', this.render);	}, render: function() { this.$el.html(this.template({ movies: this.collection.toJSON() })); return this; },	onMovieClick: function(event) {	event.preventDefault();	var $clickedEl = $(event.currentTarget), clickedHref = $clickedEl.attr('href');	// Update the movie URL when clicked	App.utils.Router.navigate(clickedHref, {trigger: true});	}
});
App.Views.DetailedMovieView = App.Views.BaseView.extend({	className: 'movie-detailed',	events: {	'click .js-action--back': 'onBackBtnClick',	'click .js-watchlist--add': 'onWatchlistAdd',	'click .js-watchlist--remove': 'onWatchlistRemove'	},	template: _.template( $('.tmpl-movie-detailed').html() ),	initialize: function() {	this.listenTo(this.model, 'change:watchlist', this.render);	},	render: function() {	this.$el.html( this.template( this.model.toJSON() ) );	return this;	},	onBackBtnClick: function(event) {	event.preventDefault();	window.history.back();	},	onWatchlistAdd: function(event) {	event.preventDefault();	Backbone.Events.trigger('watchlist:add', this.model);	},	onWatchlistRemove: function(event) {	event.preventDefault();	Backbone.Events.trigger('watchlist:remove', this.model);	}
});
// Create Watchlist Movie View
App.Views.WatchlistMovieView = App.Views.BaseView.extend({	className: 'movie',	template: _.template( $('.tmpl-watchlist-movie').html() ),	render: function() {	this.$el.html( this.template( this.model.toJSON() ) );	return this;	}
});
// Create a Watchlist Collection View
App.Views.WatchlistCollectionView = App.Views.BaseView.extend({	className: 'movie-grid',	template: _.template( $('.tmpl-watchlist').html() ),	render: function() {	console.log(this.collection.toJSON());	this.$el.html( this.template() );	return this;	}
});
App.Views.MainHeaderView = Backbone.View.extend({	events: { 'click .js-nav-link': 'onNavItemClicked' }, initialize: function() { Backbone.Events.on('route:change', this.onDeeplink, this); }, onNavItemClicked: function(event) { event.preventDefault(); var $clickedEl = $(event.currentTarget), clickedHref = $clickedEl.attr('href'); this.toggleActiveNavClass($clickedEl); App.utils.Router.navigate(clickedHref, { trigger: true }); }, onDeeplink: function(route) { var $element = $('.js-nav-link[href="/'+route+'"]'); this.toggleActiveNavClass($element); }, toggleActiveNavClass: function(element) { $('.js-nav-link.is-active').removeClass('is-active'); element.addClass('is-active'); }
});
// Create Router Class & Instantiate App.utils.Router
App.utils.Router = new (Backbone.Router.extend({	// Map routes to methods	routes: { '': 'onShowMovies', 'movie/:id': 'onShowMovie',	'watchlist': 'onShowWatchlist' },	initialize: function() {	this.listenTo(this, 'route', this._signalRouteChange);	},	// Create mapped Methods	onShowMovies: function() { Backbone.Events.trigger('show:movies'); }, onShowMovie: function(id) { Backbone.Events.trigger('show:movie', id); },	onShowWatchlist: function() {	Backbone.Events.trigger('show:watchlist');	},	_signalRouteChange: function() { var fragment = Backbone.history.getFragment(); Backbone.Events.trigger('route:change', fragment); }
}));
(function() {	(new App.Views.MainHeaderView({	el: '.js-header'	}));	App.start(); // Kickstart the application.
})();
Movie App - Watchlist - Creating a watchlist movie view RESOLVED - Script Codes
Movie App - Watchlist - Creating a watchlist movie view RESOLVED - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded August 25, 2022
Rating 3
Size 11,291 Kb
Views 28,336
Do you need developer help for Movie App - Watchlist - Creating a watchlist movie view RESOLVED?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Houston (styler) Script Codes
Name
Movie App - Detailed View - Adding a watchlist button - RESOLVED
Progressive Loading button
CSS3 Preloader
Word ticker
Fluid grid
Backbone 101 - Movie App
Velocity Rotate Test
ReactJS Instragram Feed
Flexbox thumbnail grid
Velocity eye blink
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!