changed files

mohanmanis · Oct 9, 2019 · 8b036ff · 8b036ff
1 parent ba16fcb
commit 8b036ff
Show file tree

Hide file tree

Showing 12 changed files with 14,194 additions and 9,295 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,43 +1,16 @@
 {
-  "name": "vue-todo",
+  "name": "react-todo",
   "version": "0.1.0",
   "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
   "dependencies": {
-    "vue": "^2.5.16"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
-    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
-    "@vue/cli-service": "^3.0.0-beta.15",
-    "vue-template-compiler": "^2.5.16"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-scripts": "1.1.4"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,40 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Vue To Do</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React To Do</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but Vue To Do doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      You need to enable JavaScript to run this app.
     </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
   </body>
 </html>
diff --git a/src/ToDo.css b/src/ToDo.css
@@ -0,0 +1,72 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
+    Arial, sans-serif;
+  background: linear-gradient(#aeffae, #3d99ff);
+  height: auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Logo {
+  width: 50px;
+  position: relative;
+  top: 50px;
+}
+
+.ToDo {
+  text-align: center;
+  border: 1px solid white;
+  width: 80vw;
+  height: auto;
+  box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.5);
+  background: #f6f6f6;
+  padding-bottom: 60px;
+  margin: 40px auto;
+}
+
+.ToDo-Header {
+  color: black;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
+    Arial, sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  margin: 70px auto 30px;
+}
+
+.ToDo-Add {
+  color: white;
+  font-size: 2em;
+  width: 40px;
+  height: 40px;
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: #73ff73;
+  border-radius: 10px;
+  box-shadow: 1px 1px 1px #47a947;
+  margin: 20px auto 0;
+}
+
+.ToDo-Add:hover {
+  box-shadow: none;
+  margin-left: calc(auto + 1px);
+}
+
+.ToDo-Container {
+  width: 80%;
+  margin: 0 auto;
+}
+
+input {
+  width: 60%;
+  padding: 10px;
+  font-size: 1em;
+  margin: 10px auto;
+  box-shadow: 1px 3px 20px 0px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/ToDo.js b/src/ToDo.js
@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import "./ToDo.css";
+import ToDoItem from "./components/ToDoItem";
+import Logo from "./assets/logo.png";
+
+class ToDo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // this is where the data goes
+      list: [
+        {
+          todo: "clean the house"
+        },
+        {
+          todo: "buy milk"
+        }
+      ],
+      todo: ""
+    };
+  }
+
+  createNewToDoItem = () => {
+    this.setState(({ list, todo }) => ({
+      list: [
+        ...list,
+        {
+          todo
+        }
+      ],
+      todo: ""
+    }));
+  };
+
+  handleKeyPress = e => {
+    if (e.target.value !== "") {
+      if (e.key === "Enter") {
+        this.createNewToDoItem();
+      }
+    }
+  };
+
+  handleInput = e => {
+    this.setState({
+      todo: e.target.value
+    });
+  };
+
+  // this is now being emitted back to the parent from the child component
+  deleteItem = indexToDelete => {
+    this.setState(({ list }) => ({
+      list: list.filter((toDo, index) => index !== indexToDelete)
+    }));
+  };
+
+  render() {
+    return (
+      <div className="ToDo">
+        <img className="Logo" src={Logo} alt="React logo" />
+        <h1 className="ToDo-Header">React To Do</h1>
+        <div className="ToDo-Container">
+          <div className="ToDo-Content">
+            {this.state.list.map((item, key) => {
+              return (
+                <ToDoItem
+                  key={key}
+                  item={item.todo}
+                  deleteItem={this.deleteItem.bind(this, key)}
+                />
+              );
+            })}
+          </div>
+
+          <div>
+            <input
+              type="text"
+              value={this.state.todo}
+              onChange={this.handleInput}
+              onKeyPress={this.handleKeyPress}
+            />
+            <button className="ToDo-Add" onClick={this.createNewToDoItem}>
+              +
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ToDo;
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/ToDoItem.css b/src/components/ToDoItem.css
@@ -0,0 +1,33 @@
+.ToDoItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ToDoItem-Text {
+  width: 90%;
+  background-color: white;
+  border: 1px solid lightgrey;
+  box-shadow: 1px 1px 1px lightgrey;
+  padding: 12px;
+  margin-right: 10px;
+}
+
+.ToDoItem-Delete {
+  width: 35px;
+  /*padding: 5px;*/
+  height: 35px;
+  cursor: pointer;
+  background: #ff7373;
+  border-radius: 10px;
+  box-shadow: 1px 1px 1px #c70202;
+  color: white;
+  font-size: 18px;
+  margin-right: 5px;
+}
+
+.ToDoItem-Delete:hover {
+  box-shadow: none;
+  margin-top: 1px;
+  margin-left: 1px;
+}
diff --git a/src/components/ToDoItem.js b/src/components/ToDoItem.js
@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import "./ToDoItem.css";
+
+class ToDoItem extends Component {
+  render() {
+    return (
+      <div className="ToDoItem">
+        <p className="ToDoItem-Text">{this.props.item}</p>
+        <button className="ToDoItem-Delete" onClick={this.props.deleteItem}>
+          -
+        </button>
+      </div>
+    );
+  }
+}
+
+export default ToDoItem;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import ToDo from "./ToDo";
+
+ReactDOM.render(<ToDo />, document.getElementById("root"));