YarivGilad · yairabranyi · Aug 15, 2019 · Aug 19, 2019 · Aug 19, 2019 · Aug 20, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -27,6 +27,7 @@
     <title>React App</title>
   </head>
   <body>
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,14 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import TodoItem from './TodoItem'
 
 function App() {
+  const add_todo = (item)=> {
+    console.log('itrm:',item);
+  }
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* <header className="App-header"><h1>Todo App</h1></header> */}
+      <TodoItem add_todo={add_todo}/>
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import PropTypes from 'prop-types';
+
+const Form = ({ add_todo }) => {
+
+  const [todo_text, set_todo_text] = useState('');
+
+  const on_click = (event) => {
+    event.preventDefault();
+    add_todo({
+      text: todo_text,
+      status: 'open'
+    })
+  }
+
+  // console.log('Text:',text)
+  return (
+    <Warpper>
+      <h1>My todo Up</h1>
+      <TodoItem>
+        <input onChange={(event) => set_todo_text(event.target.value)} type="text" placeholder="what needs to be done"></input>
+        <button onClick={on_click}>ADD</button>
+      </TodoItem>
+    </Warpper>
+  );
+};
+export default Form;
+
+
+Form.propTypes = {
+  add_todo: PropTypes.func.isRequired,
+};
+
+const Warpper = styled.form`
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: auto;
+      /* width: 50%; */
+      margin: 10px 200px;
+      padding: 2px;
+      border: 2px gray solid;
+`;
+
+const TodoItem = styled.form`
+
+      display: flex;
+      justify-content: center;
+      margin: 10px;
+      color: papayawhip;
+      font-size: 10rem;
+      width: 50%;
+      background: slategray;
+
+`;
+
+
+
+
+
+// const Text = styled.h1`
+//   font-size: 3rem;
+//   font-weight: normal;
+//   font-family: "Griffy", cursive;
+//   color: papayawhip;
+//   cursor: pointer;
+//   user-select: none;
+//   position: relative;
+// `;
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+// import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();
diff --git a/src/logo.svg b/src/logo.svg