Deployed with Zeit now

now.json

@@ -0,0 +1,52 @@
+{
+  "version": 2,
+  "name": "todoapp",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": {
+        "distDir": "build"
+      }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/static/(.*)",
+      "headers": {
+        "cache-control": "s-maxage=31536000,immutable"
+      },
+      "dest": "/static/$1"
+    },
+    {
+      "src": "/favicon.ico",
+      "dest": "/favicon.ico"
+    },
+    {
+      "src": "/asset-manifest.json",
+      "dest": "/asset-manifest.json"
+    },
+    {
+      "src": "/manifest.json",
+      "dest": "/manifest.json"
+    },
+    {
+      "src": "/precache-manifest.(.*)",
+      "dest": "/precache-manifest.$1"
+    },
+    {
+      "src": "/service-worker.js",
+      "headers": {
+        "cache-control": "s-maxage=0"
+      },
+      "dest": "/service-worker.js"
+    },
+    {
+      "src": "/(.*)",
+      "headers": {
+        "cache-control": "s-maxage=0"
+      },
+      "dest": "/index.html"
+    }
+  ]
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-todo-app",
+  "name": "todoapp",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -12,7 +12,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "now-build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -23,4 +24,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

src/components/Header.js

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Link, NavLink } from 'react-router-dom'; 
-import '../App.css'
+import { Link, NavLink } from 'react-router-dom';
+import '../stylesheets/Header.css';
 const Header = (props) => {
-   return (
-     <div>
-       <h2>{props.title}</h2>
-       <NavLink activeClassName="am-active" to="/" exact = { true }>Todo App</NavLink>
-       <NavLink activeClassName="am-active" to="/likesApp" >Likes App</NavLink>
-       <NavLink activeClassName="am-active" to="/localstorage" >Local Storage</NavLink>
-     </div>
+  return (
+    <div className="headerContainer">
+      <h2>{props.title}</h2>
+      <ul>
+        <li><NavLink activeClassName="am-active" to="/" exact={true}>Todo App</NavLink></li>
+        <li><NavLink activeClassName="am-active" to="/likesApp" >Likes App</NavLink></li>
+        <li><NavLink activeClassName="am-active" to="/localstorage" >Local Storage</NavLink></li>
+      </ul>
+    </div>
   );
 }
-export default Header;
+export default Header;
+
+
+// - added className to the holding div
+// - used a ul to wrap navlinks
+
+
+
+

src/components/LocalStorage.js

@@ -1,33 +1,33 @@
 import React, { Component } from 'react';
 import Header from './Header';
 class LocalStorage extends Component {
-  render(){
+  render() {
     const person = {
       name: "john_doe",
       age: 13
     }
-  
+
     // convert to JSON object
     const personToJSON = JSON.stringify(person)
     // save it
     localStorage.setItem('newPerson', personToJSON);
 
     // TO RETRIEVE ITEM
-   const getPerson = localStorage.getItem('newPerson')
+    const getPerson = localStorage.getItem('newPerson')
     //convert item to real object
     const personToParse = JSON.parse(getPerson)
-    
+
     return (
-      <div> 
-        <Header title = "LocalStorage Example"/>
-        The stringified version is 
+      <div>
+        <Header title="LocalStorage Example" />
+        The stringified version is
 
         <div><strong>{localStorage.getItem('newPerson')}</strong></div>
 
-        After getting from locl storage we get
+        After getting from local storage we get
 
         <div><strong>{personToParse.name} is {personToParse.age} years old</strong></div>
-        
+
       </div>
     )
   }

src/components/Todo.js

@@ -1,51 +1,52 @@
 import React, { Component } from 'react';
 import Header from './Header';
 import TodoItems from './TodoItems';
-// import './stylesheets/Todo.css';
+import '../stylesheets/Todo.css';
 class Todo extends Component {
   state = {
-    todoItems: [4,6,7,9 ],
+    todoItems: [4, 6, 7, 9],
     newTodo: '',
   }
   handleRemoveAllItems = () => {
     this.setState(() => ({ todoItems: [] }));
   }
   handleRemoveOneItem = (itemToBeRemoved) => {
     this.setState((prevState) => ({
-      todoItems: prevState.todoItems.filter( todoItem => todoItem !== itemToBeRemoved )
+      todoItems: prevState.todoItems.filter(todoItem => todoItem !== itemToBeRemoved)
     }))
   }
-  // componentDidUpdate(prevProps, prevState){
-  //   if( prevState.todoItems.length !== this.state.todoItems.length){
-  //     const jsonState = JSON.stringify(this.state.todoItems)
-  //     localStorage.setItem('todoItems', jsonState)
-  //   }
-  // }
-
-  // componentDidMount(){
-  //   const itemsFromLocalStorage = localStorage.getItem('todoItems');
-  //   const todoItems = JSON.parse( itemsFromLocalStorage );
-
-  //   if( todoItems ){
-  //     this.setState(() => ({
-  //       todoItems
-  //     }))
-  //   }
-  // }
-  // onClick=()=>{
-  //   // Automatically defocus the input on focus (muahaha)
-  //   this.refs.buttonTag.classList.toggle('appk');
-  // }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.todoItems.length !== this.state.todoItems.length) {
+      const jsonState = JSON.stringify(this.state.todoItems)
+      localStorage.setItem('todoItems', jsonState)
+    }
+  }
+
+  componentDidMount() {
+    const itemsFromLocalStorage = localStorage.getItem('todoItems');
+    const todoItems = JSON.parse(itemsFromLocalStorage);
+
+    if (todoItems) {
+      this.setState(() => ({
+        todoItems
+      }))
+    }
+  }
   handleChange = (e) => {
-    this.setState({	newTodo:	e.target.value	})
+    this.setState({ newTodo: e.target.value })
   }
 
   handleSubmit = (e) => {
     e.preventDefault();
 
-    const duplicateItem = this.state.todoItems.filter( todoItem => {
-      return todoItem.toLowerCase() === this.state.newTodo.toLowerCase()
-     })
+    const duplicateItem = this.state.todoItems.filter(todoItem => {
+      if (isNaN(todoItem)) {
+        return todoItem.toUpperCase() === this.state.newTodo.toUpperCase()
+      } else {
+        return todoItem === this.state.newTodo
+      }
+    })
+
 
     // if( this.state.newTodo && !this.state.todoItems.includes(foundItem[0])){
     //   this.setState((prevState) => {
@@ -56,14 +57,14 @@ class Todo extends Component {
     //   })
     // } 
 
-    if( this.state.newTodo && duplicateItem.length == 0){
+    if (this.state.newTodo && duplicateItem.length == 0) {
       this.setState((prevState) => {
         return {
           todoItems: prevState.todoItems.concat(this.state.newTodo),
           newTodo: prevState.newTodo = ''
         }
       })
-    } 
+    }
   }
 
 
@@ -72,25 +73,34 @@ class Todo extends Component {
     return (
       <div className="container">
         <Header title="MY TODO TITLE" />
-        {/* <button   className = 'buttonField' 
-          ref = 'buttonTag' 
-          onClick={this.onClick}> check refs </button> */}
-        <h1>Welcome to my todo App </h1>
-        {
-          this.state.todoItems.map(item => (
-            <TodoItems 
-              key = { item }
-              individualItem={item} 
-              handleRemoveOneItem = { this.handleRemoveOneItem }
-            />))
-        }
-        <br/>
-        <form onSubmit = { this.handleSubmit }>
-          <label htmlFor="">Todo Items</label> <br/>
-          <input  type="text" value = { this.state.newTodo } onChange = { this.handleChange }/>
-          <button>Submit</button>
-        </form>
-        <button onClick = { this.handleRemoveAllItems }> Remove all items </button>
+
+        <h1 className="title">Welcome to my todo App </h1>
+
+        <div className="wrapper">
+          <div className="forms">
+            <form onSubmit={this.handleSubmit} className>
+              <input type="text" value={this.state.newTodo} onChange={this.handleChange} placeholder="enter items" />
+              <button>Submit</button>
+            </form>
+          </div>
+
+          <div className="cover">
+            <button onClick={this.handleRemoveAllItems} className="removeButton"> Remove all items </button>
+
+            <div className="todos">
+              {
+                this.state.todoItems.map(item => (
+                  <TodoItems
+                    key={item}
+                    individualItem={item}
+                    handleRemoveOneItem={this.handleRemoveOneItem}
+                  />))
+              }
+            </div>
+          </div>
+
+        </div>
+
       </div>
     )
   }

src/components/TodoItems.js

@@ -1,11 +1,14 @@
 import React from 'react';
+import '../stylesheets/TodoItems.css';
 const TodoItems = (props) => (
-  <div>
-    {props.individualItem}
+  <div className="todoItems">
+    {/* <p title="a todo item" className="individualItems"> */}
+      {props.individualItem}
+    {/* </p> */}
     <button
-      onClick = {(e) => {
+      onClick={(e) => {
         props.handleRemoveOneItem(props.individualItem)
-      }} 
+      }}
     >Remove</button>
   </div>
 )

src/routes/TodoRouter.js

@@ -4,19 +4,14 @@ import LikesApp from '../components/Likes';
 import LocalStorage from '../components/LocalStorage';
 import NotFoundPage from '../components/NotFoundPage';
 import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
-
 const TodoRouter = () => (
   <BrowserRouter>
     <Switch>
-      <Route path="/" component = {Todo} exact = { true }/>
-      <Route path="/likesApp" component = {LikesApp}/>
-      <Route path="/localstorage" component = {LocalStorage}/>
-      <Route component = {NotFoundPage}/>
+      <Route path="/" component={Todo} exact={true} />
+      <Route path="/likesApp" component={LikesApp} />
+      <Route path="/localstorage" component={LocalStorage} />
+      <Route component={NotFoundPage} />
     </Switch>
   </BrowserRouter>
 );
-
-export default TodoRouter;
-
-
-
+export default TodoRouter;

src/stylesheets/Header.css

@@ -0,0 +1,34 @@
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color:  #222e50;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.headerContainer h2 {
+  width: 29%;
+  color: white;
+  padding-left: 6px;
+}
+
+.headerContainer ul{
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+.headerContainer ul li {
+  list-style: none;
+  padding-right: 15px;
+}
+.headerContainer ul li a {
+  color: white;
+  text-decoration: none
+}
+
+.headerContainer ul li a:hover {
+  color: red;
+}