Here is Liuliu.

README.md

@@ -1,4 +1,5 @@
 # parcel-react-app
+`Auth by Liuliu`
 
 it is reference to parcel-react, and it includes
 
@@ -8,6 +9,13 @@ it is reference to parcel-react, and it includes
  * axios
  * react and react dom
 
+# DEMO
+## Todo List
+![](https://media.giphy.com/media/Tk2KNru0pYD6dHxSB1/giphy.gif)
+## OMDB API
+![](https://media.giphy.com/media/3XDiHqGVO48qghRTwi/giphy.gif)
+
+
 ## install
 
  * node v10.15.x is required

src/api/movie.js

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+module.exports = {
+    async requestMovieInfo (search = "Batman") {
+        const {data : info} = await axios.get(`http://www.omdbapi.com/?s=${search}&apikey=34472924`)
+        return info
+    }
+}

src/app.js

@@ -1,38 +1,94 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Header from './components/Header';
+import Todo from './components/Todo';
 import api from './api/base';
+import InputSearch from "./components/InputSearch"
+import Movie from "./api/movie";
+import Product from "./components/Product";
+import NavBar from "./components/NavBar"
 
 
 
 class HelloMessage extends React.Component {
 
   constructor(props) {
     super(props);
+
+    this.pageList = ["Movie", "Todo"];
     this.state = {
-      todos: []
+      todos: [],
+      movies: [],
+      showPage: "Movie",
     };
+
+  }
+
+  async searchKwd (keyword) {
+    if (!keyword) keyword = "banana";
+
+    this.setState({
+      movies: await Movie.requestMovieInfo(keyword)
+    })
+  }
+
+  setShowPage (pageName) {
+    this.setState({
+      showPage : pageName
+    })
+  }
+
+  pageSwitch () {
+    const { todos, movies } = this.state
+    let show = ''
+
+    switch (this.state.showPage) {
+      case "Todo" :
+        show =  <Todo todos = {todos} />
+        break
+
+      case "Movie" :
+        show =  <div>
+                  <InputSearch inputKwd = {(keyword) => this.searchKwd(keyword)} />
+                  <Product movies = {movies} />
+                </div>
+        break
+
+      default :
+        show = <div>
+                  <h1>Something Wrong...</h1>
+                </div>
+    }
+
+    return show
   }
 
   async componentDidMount() {
     const todos = await api.reloadTodoDatas();
+    const movies = await Movie.requestMovieInfo();
+
     this.setState({
-      todos
+      todos,
+      movies
     });
   }
 
   render() {
-    const { todos } = this.state;
+    const show = this.pageSwitch()
+
     return (
       <div>
-        <Header/>
+        <NavBar pageList = {this.pageList} setChoose = {(pageName) => this.setShowPage(pageName)}/>       
+        {/* <Header/> */}
         <div className="container">
-            <h1>Hi {this.props.name}</h1>
+          {show}
+
+          <p>by {this.props.name}.</p>
         </div>
       </div>
     );
   }
 }
 
 const App = document.getElementById("app");
-ReactDOM.render(<HelloMessage name="Caesar" />, App);
+ReactDOM.render(<HelloMessage name="Liuliu" />, App);

src/components/InputSearch.js

@@ -0,0 +1,20 @@
+import React from "react"
+import '../style/extra.css'
+import "../style/input.css"
+
+export default class InputSearch extends React.PureComponent {
+
+    getKwd (event) {
+        this.props.inputKwd(event.target.value)
+    }
+
+    render () {
+        return (
+                <div className = "verticalAbs inputDiv" >
+                    <div className = "content horizonCenter">
+                        <input placeholder = "Search..." type = "search" onChange = {this.getKwd.bind(this)} />
+                    </div>
+                </div>
+            )
+    }
+}

src/components/NavBar.js

@@ -0,0 +1,24 @@
+import React from "react"
+import "../style/navBar.css"
+import '../style/extra.css'
+
+export default class NavBar extends React.PureComponent {
+
+    setChoose (name) {
+        this.props.setChoose(name)
+    }
+
+    render () {
+        return (
+            <div className = "flexBox">
+                {this.props.pageList.map((name) => {
+                    return (
+                        <div className = "item" key = {name} onClick = {this.setChoose.bind(this, name)}>
+                            <span>{name}</span>
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
+}

src/components/Product.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import '../style/product.css'
+import '../style/extra.css'
+
+export default class Product extends React.PureComponent {
+    constructor (props) {
+        super(props)
+        this.state = {
+            movies : []
+        }
+    }
+
+    render () {
+        let { movies } = this.props
+
+
+            return (movies.Search ?
+                    (<div>
+                        {/* <h1>Movie List</h1> */}
+                            {movies.Search.map( (movie) => {
+
+                                return (
+                                     <div key = {movie.imdbID} className = "listTemplate">
+                                        <img src = {movie.Poster} width = "50px" height = "70px" alt = {movie.Title}/>
+                                        <strong className = "verticalCenter">
+                                            <a className = "linkNoUnderLine" href = {movie.Poster} target = "_blank"> {movie.Title} </a>
+                                            ( {movie.Year} )
+                                            ( {movie.Type} )
+                                        </strong>
+                                    </div>
+                                )
+                            })}
+                    </div>) :
+                    (<div>Waiting...</div>)
+            )
+    }
+}

src/components/Todo.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import '../style/todo.css'
+import '../style/extra.css'
+
+export default class Todo extends React.Component {
+    constructor (props) {
+        super(props)
+
+        this.colorChecked = "todoColorChecked"
+        this.colorUnchecked = "todoColorUnchecked"
+    }
+
+    bindCheckBox (inputId) {
+        const input = document.getElementById(inputId)
+        input.checked = !input.checked
+    }
+
+    render() {
+        const {todos} = this.props
+
+        return (
+            <div>
+                {/* <h1 className = "textCenter">Todo List</h1> */}
+                <ol className = "padLeft-5 padRight-5">
+                    {todos.map( (todo) => {
+                        const todoInputId = `todo_${todo.id}`
+                        let checked = false
+                        if (todo.completed) checked = true
+
+                        return (
+                            <li key = {todoInputId} className = "todoTemplate cursorPoint hoverZoom" onClick = {this.bindCheckBox.bind(this, todoInputId)}>
+                                {todo.title}
+                                <input id = {todoInputId} className = "checkBoxPosition" type="checkbox" defaultChecked = {checked} />
+                            </li> 
+                        )
+                    } )}
+                </ol>
+            </div>
+        );
+    }
+}

src/style/extra.css

@@ -0,0 +1,63 @@
+.verticalCenterFlex {
+    display: flex;
+    justify-content: center;
+}
+.verticalCenterFlex .content {
+    align-self: center;
+}
+
+.verticalAbs {
+    position : relative;
+    margin : auto;
+}
+.verticalAbs .content {
+    position : absolute;
+    top : 50%;
+    left : 50%;
+    transform : translate(-50%, -50%);
+
+    width : 50%;
+    height : 100%;
+}
+
+.verticalCenter {
+    margin-left : 3%;
+    position : absolute;
+    top : 50%;
+    transform : translate(0, -50%);
+}
+
+
+.horizonCenter {
+    position : absolute;
+    left : 50%;
+    transform : translate(-50%, 0);
+}
+
+.linkNoUnderLine {
+    color : #035daf;
+    text-decoration: none;
+}
+
+.linkNoUnderLine:hover {
+    color : red;
+}
+.listTemplate:hover {
+    zoom : 1.5;
+}
+
+.textCenter {
+    text-align : center;
+}
+.padLeft-5 {
+    padding-left : 5%;
+}
+.padRight-5 {
+    padding-right : 5%;
+}
+.cursorPoint {
+    cursor : pointer;
+}
+.hoverZoom:hover {
+    zoom : 1.5;
+}

src/style/input.css

@@ -0,0 +1,27 @@
+input[type = "search"] {
+    border-radius : 10px;
+    width : 100%;
+    height : 100%;
+    border : 2px solid #bdbdbd;
+    outline : none;
+    font-size: 150%;
+    padding-left:3%;
+}
+input[type = "search"]::-webkit-input-placeholder {
+    color : #bcbcbc;
+    padding : 0 0 0 1%;
+}
+input[type = "search"]::-webkit-search-cancel-button {
+    /* -webkit-appearance: none; */
+
+    background-color: #dedede;
+    margin : 0 1% 0 0;
+    zoom: 1.5;
+    cursor: pointer;
+}
+
+.inputDiv {
+    height: 40px;
+
+    margin : 0 0 2% 0;
+}

src/style/navBar.css

@@ -0,0 +1,33 @@
+.flexBox {
+    display : flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    background-color: #f9f10baf;
+    border: 3px solid #123456;
+    border-radius: 15px;
+
+    margin : 0 0 3% 0;
+    /* padding: 0 5% 0 5%; */
+}
+.item {
+    width: 19.8%;
+    height: 100%;
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+    border-right: 2px solid #f9ae0ba7;
+    border-bottom: 2px solid #f9ae0ba7;
+    border-radius : 13px;
+
+    justify-content: flex-start;
+    align-items: center;
+
+    cursor: pointer;
+}
+.item:hover {
+    transform: scale(1.05, 1.2);
+
+    background-color: #f9ae0bd4;
+    font-size: 26px;
+}