Movie Town with Posters appended to DOM

movietown.js

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();
});