projectshft · douglashray · Mar 15, 2022 · Mar 15, 2022 · Mar 17, 2022 · Mar 18, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/collection/VideoCollection.js b/collection/VideoCollection.js
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="node_modules/bootstrap/dist/css/bootstrap.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/underscore/underscore-min.js"></script>
+    <script src="node_modules/backbone/backbone-min.js"></script>
+    <script src="node_modules/handlebars/dist/handlebars.min.js"></script>
+    <title>YouTube Search</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row" id="search-bar">
+        <form class="search-form">
+          <h3>Search Youtube</h3>  
+          <div class="form-group">
+            <input type="text" id="search-query" class="form-control">
+            </input>
+            <button type="button" class="btn btn-md btn-primary search">Search</button>
+          </div>
+        </form>
+      </div>
+      <hr>
+      <div class="row results">
+        <div class="main-display col-lg-4 offset-md-2">Main Display</div>
+        <div class="video-results col-md-2 offset-md-1">Sidebar</div>
+    </div>
+  </div>
+     <script id="main-video" type="text/x-handlebars-template">
+      <div>
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ videoId }}"  title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <span class="main-title"> <p><h3>{{ title }}</h3></p> </span>
+        <span class="main-description"> <p>{{ description }}</p> </span>
+      </div>
+    </script>
+
+    <script id="sidebar-template" type="text/x-handlebars-template">
+      <div class="content-container">
+        <a class="video-title view-video" href="#" data-id={{videoId}}>
+        <b>{{title}}</b>{{ id }}
+        <p><span class="video-title"><img src="{{thumbnail}}"></span></p></a>
+      </div>
+    </script>
+
+
+    <script src="models/VideoModel.js"></script>
+    <script src="models/AppModel.js"></script>
+    <script src="collection/VideoCollection.js"></script>
+    <script src="views/AppView.js"></script>
+    <script src="views/VideoView.js"></script>
+    <script src="views/SideBarView.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
diff --git a/models/AppModel.js b/models/AppModel.js
diff --git a/models/SideBarModel.js b/models/SideBarModel.js
@@ -0,0 +1 @@
+��
diff --git a/models/VideoModel.js b/models/VideoModel.js
@@ -0,0 +1,25 @@
+var VideoModel = Backbone.Model.extend({
+
+  defaults: {
+  id: '',
+  videoId: '',
+  thumbnail: '',
+  title: '',
+  description: ''
+},
+
+urlRoot: "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&type=video&videoEmbeddable=true&key=AIzaSyCUFrrY57c0l_8ufglh-bWcqIBJVq21DnE&q=",
+
+
+parse: function (response) {
+  return response.items.map(function (e) {
+    return {
+      videoId: e.id.videoId,
+      thumbnail: e.snippet.thumbnails.default.url,
+      title: e.snippet.title,
+      description: e.snippet.description
+    }
+  });
+}
+
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "backbone-youtube",
+  "version": "1.0.0",
+  "description": "This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/douglashray/backbone-youtube.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/douglashray/backbone-youtube/issues"
+  },
+  "homepage": "https://github.com/douglashray/backbone-youtube#readme",
+  "dependencies": {
+    "backbone": "^1.4.1",
+    "bootstrap": "^5.1.3",
+    "handlebars": "^4.7.7",
+    "jquery": "^3.6.0",
+    "underscore": "^1.13.2"
+  }
+}
diff --git a/style.css b/style.css
diff --git a/views/AppView.js b/views/AppView.js
diff --git a/views/SideBarView.js b/views/SideBarView.js
diff --git a/views/VideoView.js b/views/VideoView.js
@@ -0,0 +1,12 @@
+var VideoView = Backbone.View.extend({
+  className: 'video',
+
+  template: Handlebars.compile($('#main-video').html()),
+
+  render: function () {
+    this.$el.html(this.template(this.model.toJSON()));
+
+    return this;
+  }
+
+});