Skip to content

Instantly share code, notes, and snippets.

@jtomchak
Created February 7, 2018 21:22
Show Gist options
  • Save jtomchak/bcb1f5a7b445b93b49c8887dce7d19b0 to your computer and use it in GitHub Desktop.
Save jtomchak/bcb1f5a7b445b93b49c8887dce7d19b0 to your computer and use it in GitHub Desktop.
Movie Town with Posters appended to DOM
import "jquery";
import "./style.scss";
$(document).ready(function() {
console.log("I am working with jQuery. Sweet!!!!");
let moviesList = [];
//Get Movies HTTP request!
const getMovies = () => {
const movieURL =
"https://api.themoviedb.org/3/search/movie?api_key=2434d246ec60c162a86db597467ef4ed&language=en-US&query=Romance&include_adult=false&sort_by=created_at&page=1";
fetch(movieURL)
.then(res => res.json())
.then(payload => {
//now we have our kissy movies!!!!
moviesList = payload.results;
createMoviePosters();
})
.catch(err => console.log(err));
};
const createMoviePosters = () => {
//get access to a DOM element to append all this movies to
// iderate in some fashion on the the array of movies and create an img element, with the movie poster url as the src
//each img element is gonna need to be it's own col "set"
//bonus don't forget your clear fixes!!!!!!
moviesList
.filter(function(movie) {
return moviesList.poster_path !== null && movie.poster_path;
})
.map(function(movie) {
let divColumn = $("<div>").attr("class", "col-sm-6 col-md-4 col-lg-4");
let posterImage = $("<img>").attr(
"src",
"https://image.tmdb.org/t/p/w500/" + movie.poster_path
);
return divColumn.append(posterImage);
})
.map(appendElementWithVisibleSpacing);
};
const appendElementWithVisibleSpacing = (movieElement, index) => {
const divVisibleSpaceSM = $("<div>").attr(
"class",
"clearfix visible-sm-block"
);
const divVisibleSpaceMD = $("<div>").attr(
"class",
"clearfix visible-md-block"
);
//PUT IT ON THE PAGE ALREADY!!!
$("#movies-list").append(movieElement);
//every 3rd element add a MD clearfix
if (index && (index + 1) % 3 === 0) {
$("#movies-list").append(divVisibleSpaceMD);
}
if (index && (index + 1) % 2 === 0) {
$("#movies-list").append(divVisibleSpaceSM);
}
};
getMovies();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment