My Favorites movies in TMDB
A Pen by Uriel Wilson Jr. on CodePen.
Created
May 4, 2019 04:19
-
-
Save devuri/7e865405f57cccb1b78657bff069d071 to your computer and use it in GitHub Desktop.
Movies Api tmdb $ajax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1 class="title">Movies</h1> | |
| <ul id="favMovies"> | |
| </ul> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| function createNode(element) { | |
| return document.createElement(element); | |
| } | |
| function append(parent, el) { | |
| return parent.appendChild(el); | |
| } | |
| const ul = document.getElementById("favMovies"); | |
| var autorizationbear = | |
| "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1MTYyMzE5NDcsInN1YiI6IjU4NzQyZTgzYzNhMzY4MTc0YzAxNWVkYyIsImp0aSI6IjY0MTA4NCIsImF1ZCI6IjUxNmFkZjFlMTU2NzA1OGY4ZWNiZjMwYmYyZWI5Mzc4Iiwic2NvcGVzIjpbImFwaV9yZWFkIiwiYXBpX3dyaXRlIl0sInZlcnNpb24iOjF9.LJ1zRyHicf-7xQhZVGRbYmCSA26Rdt7Vvk6jsEB9rmA"; | |
| //var apikey = | |
| $.ajax({ | |
| url: | |
| "https://api.themoviedb.org/4/account/58742e83c3a368174c015edc/movie/favorites?&page=1&language=en-US&sort_by=release_date.asc", | |
| type: "GET", | |
| dataType: "json", | |
| contentType: "application/json; charset=utf-8", | |
| beforeSend: function(request) { | |
| request.setRequestHeader("Authorization", autorizationbear); | |
| }, | |
| success: function(data) { | |
| let movies = data.results; | |
| let total_pages = data.total_pages; | |
| console.log(total_pages); | |
| let j = 1; | |
| for (let i = 0; i <= total_pages; i++) { | |
| $.ajax({ | |
| url: | |
| "https://api.themoviedb.org/4/account/58742e83c3a368174c015edc/movie/favorites?&page=" + | |
| i + | |
| "&language=en-US&sort_by=release_date.asc", | |
| type: "GET", | |
| dataType: "json", | |
| contentType: "application/json; charset=utf-8", | |
| beforeSend: function(request) { | |
| request.setRequestHeader("Authorization", autorizationbear); | |
| }, | |
| success: function(data) { | |
| let favMovies = data.results; | |
| //favMovies= favMovies.sort(); | |
| favMovies = favMovies.sort(function(a, b) { | |
| var dateA = new Date(a.release_date), | |
| dateB = new Date(b.release_date); | |
| return dateA - dateB; | |
| }); | |
| return favMovies.map(function(favMovies) { | |
| let li = createNode("li"), | |
| img = createNode("img"), | |
| gene = createNode("div"), | |
| tagline = createNode("div"), | |
| span = createNode("span"); | |
| date = createNode("span"); | |
| img.src = | |
| "https://image.tmdb.org/t/p/original" + favMovies.poster_path; | |
| //img.title = favMovies.overview; | |
| let urlv3MovieDetails = | |
| "https://api.themoviedb.org/3/movie/" + | |
| favMovies.id + | |
| "?api_key=516adf1e1567058f8ecbf30bf2eb9378&language=en-US"; | |
| $.ajax({ | |
| url: urlv3MovieDetails, | |
| type: "GET", | |
| dataType: "jsonp", | |
| contentType: "application/json; charset=utf-8", | |
| success: function(data) { | |
| for (var gen of data.genres) { | |
| gene.innerHTML += gen.name + ", "; | |
| } | |
| gene.innerHTML = gene.innerHTML.slice(0, -2); | |
| tagline.innerHTML = data.tagline; | |
| } | |
| }); | |
| gene.id = "genere"; | |
| //div.innerHTML=favMovies.overview; | |
| //div.style.display='none'; | |
| span.innerHTML = `[${j}] ${favMovies.title}`; | |
| date.innerHTML = `${favMovies.release_date}`; | |
| date.id = "dater"; | |
| append(li, img); | |
| append(li, gene); | |
| append(li, tagline); | |
| append(li, span); | |
| append(li, date); | |
| append(ul, li); | |
| j++; | |
| }); | |
| } | |
| }); | |
| } | |
| } | |
| }); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); | |
| @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700"); | |
| body { | |
| background: #f5f5f5; | |
| font-family: 'Monserrat'; | |
| h1 { | |
| text-align: center; | |
| font-family: 'Open Sans'; | |
| color: #5a5a5a; | |
| } | |
| ul { | |
| display: flex; | |
| list-style:none; | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| justify-content:center; | |
| flex-basis: 80%; | |
| li { | |
| flex-basis: 20%; | |
| display:flex; | |
| flex-direction: column; | |
| margin-bottom: 20px; | |
| align-items:center; | |
| padding: .8em ; | |
| //width:200px; | |
| span { | |
| font-family: 'Open Sans'; | |
| font-weight: bold; | |
| font-size: 14px; | |
| //color: #5a5a5a; | |
| text-align: center; | |
| width:100%; | |
| } | |
| img,div,span{ | |
| width:250px; | |
| } | |
| img { | |
| //margin: 5px; | |
| border-radius: 3px; | |
| box-shadow: 1px 1px 3px rgba(0,0,0,0.2); | |
| } | |
| &:hover img + #genere{ | |
| display:block; | |
| color:steelblue; | |
| } | |
| &:hover img + #dater{ | |
| //display:block; | |
| color:tomato; | |
| } | |
| #genere{ | |
| text-align:center; | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment