Display a list of movies from hardcoded data

teddim · Feb 20, 2020 · c30f069 · c30f069
1 parent a2b2a80
commit c30f069
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 15 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -2,10 +2,15 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Movie List</title>
+    <!-- <link rel="stylesheet" href="style.css"> -->
+
+    <script src="node_modules/jquery/dist/jquery.js"></script>
+    <script src="node_modules/underscore/underscore.js"></script>
   </head>
   <body>
-    <h1>Starter React App</h1>
+    <h1>Movie List</h1>
     <div id="app">
 
     </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,10 +1,23 @@
 import React from 'react';
+import '../main.css';
+
+var movies = [
+  {title: 'Mean Girls'},
+  {title: 'Hackers'},
+  {title: 'The Grey'},
+  {title: 'Sunshine'},
+  {title: 'Ex Machina'},
+];
 
 class App extends React.Component {
   render(){
     return(
     <div>
-      Starter App component - hello there
+      <div className="title">{movies[0].title}</div>
+      <div className="title">{movies[1].title}</div>
+      <div className="title">{movies[2].title}</div>
+      <div className="title">{movies[3].title}</div>
+      <div className="title">{movies[4].title}</div>
     </div>
   )}
 }

diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,7 @@
+.title {
+    border: 2px;
+    padding: 2px;
+    border-style: solid;
+    border-color: blue;
+    color: black;
+}