/movie-town

Movie poster page of horrors!!!!

Primary LanguageJavaScript

Movie Town

  1. Go to github and create a new repo. DO NOT click any additional details!

  2. Follow the directions provided on github to create the project locally, add remote and push your first commit.

  3. IF YOU DO NOT GET THE INSTRUCTIONS you clicked extra stuff!!! it gets the hose again

  4. We want to set up a new project here so we'll run npm init -y inside the project

  5. Create a blank HTML5 scaffald index.html in folder 'dist' and app.js in folder 'src'

  6. Add a single script tag to your index.html <script src="./app.bundle.js"></script>

  7. npm install jquery bootstrap babel-core babel-loader babel-preset-es2015 sass-loader node-sass webpack css-loader style-loader -D

  8. Copy the webpack.config.js from slack or the repo into the root of our application. Pretty please.

  9. You'll need this added to your web pack:

devServer: {
    contentBase: "./dist"
  },
  1. And your scripts in your package.json needs to have the following:
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  1. Add a .gitignore and add the following lines
/node_modules
/dist
  1. Probably gonna need npm install -D file-loader for bootstrap fonts loaded from file...maybe
  2. update our webpack with file-loader module
{
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        loader: "file-loader"
      }
  1. add a style.scss to your src folder with the following
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

$halloween-background-color: #f07c05;
$text-color: #faf7f7;

body {
  background: $halloween-background-color;
  color: $text-color;
}
  1. Add nav and navbar stuff to index.html
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#nav1">Halloween Wobble Site</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active navShows">
          <a href="#nav1">Meow Shows</a>
        </li>
        <li class="active navSurprise">
          <a href="#nav2">Surprise</a>
        </li>
      </ul>
    </div>
  </nav>
  1. Now you can run your dev server, but first we need to install it npm install -D webpack-dev-server. And make sure that our npm scripts for start is correct.
"start": "webpack-dev-server --open"

  1. Create a fetch request, wrapped in function. and handle the resolve or reject from the fetch call. Console.log out the payload in json so we know that it's working, or failing. :-( const movieURL = "https://api.themoviedb.org/3/genre/27/movies?api_key=2434d246ec60c162a86db597467ef4ed&language=en-US&include_adult=false&sort_by=created_at.asc"

  2. Now we want to loop over the results of each movie and create a div element, append an image element to it with the poster url, and finally append that create element to the class div 'movies' that is also our bootstrap row.

  3. Sweet!!! Images!!! but why are then off set ? :-( Here we want to leverage column resets Bootstrap Docs by applying a column reset at responsive breakpoints, we get them to align correctly. Double Sweet.

  4. Ok. I think we've had it for the day.

  5. Now we've got our movies up, and showing thumbnail and title as a class caption. Rad. Looks good in md-col, but what about xsm, sm, and lg. So let's fix that!

  6. Adding in release data and description, and a call to action button for details

  7. We added col for xs, sm, and lg. This includes clearfix for 2 col layout aka sm/xs.

  8. Modals!! npm install -D bootstrap-loader html-webpack-plugin resolve-url-loader url-loader Gonna need some things first!

  9. Modify our webpack. Rad

//webpack config
//....
{ test: /bootstrap\/dist\/js\/umd\//, loader: "imports?jQuery=jquery" }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  1. Update our index with a modal class attr. See Index below
 <!--Modal in Action  -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal Content HERE -->
        <div class="modal-content">
          <!-- modal header -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Movie Details!!!!</h4>
          </div>
          <!-- Modal body -->
          <div class="modal-body">
            <p>Movies Details Here!!!!</p>
          </div>
          <!-- Modal FOOTER -->
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- End of Modal Content -->
      </div>
    </div>
  1. Event listener in js. To open our modal on click of said button.
  // ---> Event Listeners
  $("#myBtn").click(function() {
    $("#myModal").modal();
  });
  1. Now that you have a modal working. Rad. Good job. We want to fetch the data for each poster individually. Below is the APIURL you'll need to get the details of a specific movie
//Note the Movie Id needs to be concated before you can fetch!!!!
https://api.themoviedb.org/3/movie/<MOVIE-ID>?api_key=2434d246ec60c162a86db597467ef4ed
  1. You can attach a click event directly on an element as it is created. Sadly you can't attach an event listener on an element before it's appended to the DOM.
.click(function() {
  console.log(movie.id);
  //
})