Ada-C7 · birbalds · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,7 +1,73 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Modak');
+
+body{
+  background-color: #3f51b5;
+}
+
+canvas {
+    background: radial-gradient(white, silver);
+    position: fixed;
+}
 
 main {
-    background: lightblue;
+    text-align: center;
+    font-family: Didact Gothic;
+    color: #eceff1;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    position: relative;
+    background-color: #3f51b5;
+    border-radius: 25px;
+}
+
+h1{
+  font-family: Modak;
+  color: #ff6f00;
+  font-size: 7rem;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  text-shadow: 1px 1px 0 #3f51b5,
+    -1px 1px 0 #3f51b5,
+    1px -1px 0 #3f51b5,
+    -1px -1px 0 #3f51b5,
+    0px 1px 0 #3f51b5,
+    0px -1px 0 #3f51b5,
+    -1px 0px 0 #3f51b5,
+    1px 0px 0 #3f51b5,
+    2px 2px 0 #3f51b5,
+    -2px 2px 0 #3f51b5,
+    2px -2px 0 #3f51b5,
+    -2px -2px 0 #3f51b5,
+    0px 2px 0 #3f51b5,
+    0px -2px 0 #3f51b5,
+    -2px 0px 0 #3f51b5,
+    2px 0px 0 #3f51b5,
+    1px 2px 0 #3f51b5,
+    -1px 2px 0 #3f51b5,
+    1px -2px 0 #3f51b5,
+    -1px -2px 0 #3f51b5,
+    2px 1px 0 #3f51b5,
+    -2px 1px 0 #3f51b5,
+    2px -1px 0 #3f51b5,
+    -2px -1px 0 #3f51b5;
+    padding-top: 30px;
+    opacity: .7;
+
+}
+
+h1#rental-library:hover{
+  color: #ffb300;
+  cursor:pointer;
+}
+
+section.main-content{
+  padding-top: 30px;
 }
 
 header {
@@ -37,8 +103,93 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+ul#movie-list {
+  list-style: none;
+}
+
+li {
+  display: inline-block;
+  width: 20%;
+  margin: 15px 0px 15px 0px;
+}
+
+li:hover{
+  cursor:pointer;
+  color: #ff6f00;
+}
+
+li:hover img{
+  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
+}
+
+h3 {
+  display: inline;
+}
+img {
+  border-top: 2px solid #ffb300;
+  display: block;
+  margin: auto;
+}
+
+button.success.btn-add{
+  background-color: #ffb300;
+  color: #3f51b5;
+  padding: 2px;
+}
+
+input#search {
+  width: 80%;
+  margin: auto;
+  background-color: #eceff1;
+}
+
+button.btn-search{
+  background-color: #ff6f00;
+  margin-top: 10px;
+}
+
+button.btn-search:hover{
+  background-color: #ffb300;
+  color: #3f51b5;
+}
+button.success.btn-add:hover{
+  background-color: #ff6f00;
+}
+
+img.api-credit{
+  width: 20%;
+  border: none;
+}
+
+footer{
+  bottom: 0px;
+  text-align: center;
+  width: 100%;
+  padding: 10px;
+  margin-top: 30px;
+  background-color: #ff6f00;
+  z-index: 1;
+  position: relative;
+  opacity: .6;
+}
+
+.close-modal {
+  float: right;
+  color: #3f51b5;
+  font-weight: bold;
+}
+
+h4.close-modal:hover{
+  cursor:pointer;
+}
+
+#movie-details {
+  background-color: #ffb300;
+  color: black;
+  position: fixed;
+  z-index: 2;
+  left: 50%;
+  margin-left: -37.5%;
+  width: 75%;
 }
-*/
diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/_settings.css">
     <link rel="stylesheet" type="text/css" href="css/foundation.css">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
     <title>Backbone Baseline</title>
-  </head>
-  <body>
+</head>
+
+<body>
+    <canvas></canvas>
+    <h1 id="rental-library"> Comfort's Comfortable Movies </h1>
+    <main>
+        <section class="main-content">
+
+            <form id="searchbar">
+                <input type="text" name="search" id="search">
+                <button type="submit" class="button btn-search">Search</button>
+            </form>
+
+            <section class="reveal" id='movie-details' data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
+            </section>
+            <ul id='movie-list'></ul>
+
+        </section>
+    </main>
+
+    <footer>
+        <img src="https://www.themoviedb.org/assets/static_cache/27b65cb40d26f78354a4ac5abf87b2be/images/v4/logos/powered-by-rectangle-green.svg" class="api-credit">
+    </footer>
+
+    <script id="movie-list-template" type="text/template">
+        <button class="button success btn-add" id=<%- movie.external_id%>>Add</button>
+        <h3><%- movie.title %></h3>
+        <img src=<%=movie.image_url%> />
+    </script>
+
+    <script type="text/template" id="movie-details-template">
+        <h4 class="close-modal">X</h4>
+        <h3><%- movie.title %></h3>
+        <img src=<%=movie.image_url%> />
+        <h4>Release Date: <%- movie.release_date %></h4>
+        <h4><%- movie.overview %></h4>
+    </script>
 
     <script src="/app.bundle.js"></script>
 
-  </body>
-  </html>
+</body>
+
+</html>
diff --git a/src/app.js b/src/app.js
@@ -4,9 +4,42 @@
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import MovieList from 'collections/movie-list';
+import MovieListView from 'views/movie_list_view';
+
+var movieList = new MovieList();
+
+var movielistView = new MovieListView({
+  model: movieList,
+  template: _.template($('#movie-list-template').html()),
+  el: '.main-content'
+});
+
+var canvas, context, width, height;
+
+canvas = document.querySelector('canvas');
+context = canvas.getContext('2d');
+
+width = canvas.width = innerWidth;
+height = canvas.height = innerHeight;
 
-  $('section.main-content').append('<p>Hello World!</p>');
+var imageData = context.createImageData(width, height);
+
+(function loop() {
+
+    for (var i = 0, n = imageData.data.length; i < n; i++) {
+        imageData.data[i] = Math.floor(Math.random() * 255);
+    }
+
+    context.putImageData(imageData, 0, 0);
+    requestAnimationFrame(loop);
+
+})();
+
+$(document).ready(function() {
 
+  $('#rental-library').click(function(event){
+    movieList.fetch();
+  })
+  movieList.fetch();
 });
diff --git a/src/collections/movie-list.js b/src/collections/movie-list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+import Movie from '../models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies'
+});
+
+export default MovieList;