React homework 嘉義 Anny

src/api/base.js

@@ -4,5 +4,10 @@ module.exports = {
   async reloadTodoDatas() {
     let { data: response } = await axios.get('https://jsonplaceholder.typicode.com/todos');
     return response;
+  },
+  async reloadMovieDatas() {
+    let { data: response } = await axios.get('http://www.omdbapi.com/?s=Batman&apikey=34472924');
+    return response;
   }
-};
+};
+

src/assets/Stylesheet/Style.css

@@ -0,0 +1,71 @@
+.navbar {
+    text-align:center;
+}
+
+.nav {
+    left: 0px;
+    top: 0px;
+    position: fixed;
+    font-size: 24px;
+    font-family: 'Courier New', Courier, monospace;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+.nav td {
+    text-align:center;
+    line-height: 50vh;
+    width: 90px;
+    height: 50vh;
+    background-color: #3a7aab;
+    text-decoration:none;
+}
+
+.nav :hover {  
+    color: black;
+    background-color: #4592cd;
+}
+
+.nav a {
+    text-decoration:none;
+    color: #ffffff;
+}
+
+.todo-table {
+    margin: 0px auto;
+}
+
+.todo-table td {
+    font-size:1em;
+    border:1px solid #4e7fa5;
+    padding:3px 7px 2px 7px;
+}
+
+.todo-table :hover {
+    background-color: #8fbee3;
+}
+
+#movieTable {
+    margin: 0px auto;
+}
+
+.picture {
+    width: 200px;
+    height: 250px;
+}
+
+#movieMenu {
+    background-color: #6c96b6;
+    opacity:0.7;
+    height: 200px;
+}
+
+#movieMenu:nth-of-type(odd) {
+    background-color: #ced5bab1;
+}
+
+#movieTable :hover {
+    background-color: #8fbee3; 
+    opacity:1;  
+}

src/components/App.js

@@ -0,0 +1,49 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Header from './Header';
+import api from '../api/base';
+
+class HelloMessage extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: []
+    };
+  }
+
+  async componentDidMount() {
+    const todos = await api.reloadTodoDatas();
+    console.log(todos);
+    this.setState({
+      todos
+    });
+  }
+
+  render() {
+    const { todos } = this.state;
+
+    return (
+      <div>
+        <Header />
+        <div className="container">
+          <table className="todo-table">
+            {todos.map((todo) => {
+              return (
+                <tbody id="todoMenu" key={todo.id}>
+                  <tr className="tr-list">
+                    <td className="todo-id">{todo.id}</td>
+                    <td className="todo-title" >{todo.title}</td>
+                  </tr>
+                </tbody>
+              )
+            })}
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+const App = document.getElementById("app");
+ReactDOM.render(<HelloMessage />, App);

src/components/Header.js

@@ -10,6 +10,10 @@ const Header = () => (
                 </a>
             </div>
         </nav>
+        <table className="nav nav-tabs">
+            <td className="active"><a data-toggle="tab" href="#app">app</a></td>
+            <td><a data-toggle="tab" href="#movie">movie</a></td>
+        </table>
     </header>
 )
 

src/components/Movie.js

@@ -0,0 +1,48 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import api from '../api/base';
+
+class Movie extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      movies: []
+    };
+  }
+
+  async componentDidMount() {
+    const movieObj = await api.reloadMovieDatas();
+    const movies = movieObj.Search;
+
+    this.setState({
+      movies
+    });
+  }
+
+  render() {
+    const { movies } = this.state;
+    console.log(movies);
+
+    return (
+      <div className="movie-container">
+        <table id="movieTable">
+
+          {movies.map((movie) => {
+            return (
+              <tbody id="movieMenu" key={movie.Title}>
+                <tr>
+                  <td id="moviePicture"><img className="picture" src={movie.Poster}></img>  </td>
+                  <td className="movie-row" >{movie.Title} ({movie.Year}) ({movie.Type})</td>
+                </tr>
+              </tbody>
+            )
+          })}
+        </table>
+      </div>
+    );
+  }
+}
+
+const ShowMovie = document.getElementById("movie");
+ReactDOM.render(<Movie />, ShowMovie);

src/index.html

@@ -5,9 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
+  <link rel="stylesheet" href="./assets/Stylesheet/Style.css">
 </head>
 <body>
   <div id="app"></div>
-  <script src="./app.js"></script>
+  <script src="./components/App.js"></script>
+  <div id="movie"></div>
+  <script src="./components/Movie.js"></script>
 </body>
 </html>