todo-app

login-signup/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
@@ -22,6 +25,8 @@
     "react-chat-engine": "^1.10.4",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
+    "react-flip-move": "^3.0.4",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-tilt": "^0.1.4",

login-signup/src/App.css

@@ -52,7 +52,7 @@ html {
   margin: auto;
   width: 100%;
   width: 450px;
-  height: 480px;
+  height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -160,7 +160,7 @@ html {
   box-sizing: border-box;
 }
 
-/*VideoChat style*/
+/*VideoChatjs style*/
 .VCcontainer {
   display: grid;
   grid-template-columns: 7fr 3fr ;

login-signup/src/components/Options/Options.js

@@ -190,23 +190,6 @@ const Options = (props) => {
                 />
               </div>
             )}
-
-            {/* <div>
-              <input
-                type='text'
-                placeholder='Enter Id to call'
-                value={callId}
-                onChange={(e) => setCallId(e.target.value)}
-              />
-            </div> */}
-
-            {/* {!callAccepted && !callEnded && ( */}
-            {/* <div>
-              <Button type='primary' onClick={() => callUser(callId)}>
-                Join
-              </Button>
-            </div> */}
-            {/* )} */}
           </div>
         </Menu>
 

login-signup/src/components/To-do/Calender.js

@@ -1,15 +1,93 @@
+import React from 'react'
 import Motion from "../Motion";
 import chart from '../../assets/time.png'
 import './to-do.css'
+import Items from '../To-do/ItemsList';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
-const CalenderComponent = () => {
+library.add(faTrash)
+
+class ToDoAppComponent extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      items:[],
+      currentItem:{
+        text:'',
+        key:''
+      }
+    }
+    this.addItem = this.addItem.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
+    this.setUpdate = this.setUpdate.bind(this);
+  }
+  addItem(e){
+    e.preventDefault();
+    const newItem = this.state.currentItem;
+    if(newItem.text !==""){
+      const items = [...this.state.items, newItem];
+    this.setState({
+      items: items,
+      currentItem:{
+        text:'',
+        key:''
+      }
+    })
+    }
+  }
+  handleInput(e){
+    this.setState({
+      currentItem:{
+        text: e.target.value,
+        key: Date.now()
+      }
+    })
+  }
+  deleteItem(key){
+    const filteredItems= this.state.items.filter(item =>
+      item.key!==key);
+    this.setState({
+      items: filteredItems
+    })
+
+  }
+  setUpdate(text,key){
+    console.log("items:"+this.state.items);
+    const items = this.state.items;
+    items.map(item=>{      
+      if(item.key===key){
+        console.log(item.key +"    "+key)
+        item.text= text;
+      }
+    })
+    this.setState({
+      items: items
+    })
+
+
+  }
+ render(){
   return (
     <>
     <img src={chart} className="chart-img"/>
+    <div>
+      <header>
+        <form id="to-do-form" onSubmit={this.addItem}>
+          <input type="text" placeholder="Enter task" value= {this.state.currentItem.text} onChange={this.handleInput}></input>
+          <button type="submit">Add</button>
+        </form>
+        <p>{this.state.items.text}</p>
+
+          <Items items={this.state.items} deleteItem={this.deleteItem} setUpdate={this.setUpdate}/>
+
+      </header>
+    </div>
     </>
-  )
-};
-
-const Calender = Motion(CalenderComponent);
+  );
+ }
+}
+const ToDoApp = Motion(ToDoAppComponent);
 
-export default Calender;
+export default ToDoApp;

login-signup/src/components/To-do/ItemsList.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import '../To-do/to-do.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import FlipMove from 'react-flip-move';
+
+function Items(props){
+    const items = props.items;
+    const listItems = items.map(item =>
+   {
+       return <div className="list" key={item.key}>
+     <p>
+         <input type="text" id={item.key} value={item.text} onChange={(e)=>{
+             props.setUpdate(e.target.value,item.key)}}/>
+        <span>
+
+        <FontAwesomeIcon className="faicons" onClick={() => {
+            props.deleteItem(item.key)
+        }} icon="trash" />
+        </span>
+     </p>
+
+    </div>})
+    return <div>
+        <FlipMove duration={300} easing="ease-in-out">
+        {listItems}
+        </FlipMove>
+
+    </div>;
+  }
+
+  export default Items;

login-signup/src/components/To-do/to-do.css

@@ -1,5 +1,98 @@
-.chart-img{
-    width: 500px;
-    top:20%;
-    left:1115%
+.chart-img {
+    display: block;
+    margin-left: 0px;
+    margin-right: 500px;
+    margin-left: 400px;
+    width: 450px;
+    position: fixed;
+}
+
+#to-do-form input {
+    background-color: rgba(27, 112, 137, 1);
+    border: 0;
+    color: #fff;
+    width: 200px;
+    height: 50px;
+    margin: 20px;
+    padding: 0 20px;
+    font-size: 18px;
+    border-radius: 10px;
+}
+
+#to-do-form input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+#to-do-form input:focus {
+    outline: none;
+}
+
+#to-do-form button {
+    height: 50px;
+    width: 80px;
+    background: #c96c2f;
+    border: 0;
+    box-shadow: -14px 16px 27px rgba(0, 0, 0, 0.25), inset 5px -6px 10px rgba(212, 121, 16, 0.25), inset -5px 5px 8px #f38444;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+#to-do-form button:focus {
+    outline: none;
+}
+
+.list {
+    color: #000;
+    width: 300px;
+    margin: 20px auto;
+    height: 50px;
+    background: #DEE0F8;
+    box-shadow: -14px 16px 27px rgba(0, 0, 0, 0.25), inset 5px -6px 10px rgba(0, 0, 0, 0.25), inset -5px 5px 8px #DEE0F9;
+    border-radius: 20px;
+}
+
+.list p {
+    padding: 10px 0px 10px 30px;
+    position: relative;
+    transition: ease-in-out;
+}
+
+.list p input {
+    background-color: transparent;
+    border: 0;
+    color: #000;
+    font-size: 18px;
+}
+
+.list p input:focus {
+    outline: none;
+}
+
+.list p span {
+    position: absolute;
+    right: 10px;
+}
+
+.faicons {
+    margin: 0 5px;
+    font-size: 15px;
+    cursor: pointer;
+}
+
+.itemsAnim-enter {
+    opacity: 0.01;
+}
+
+.itemsAnim-enter .itemsAnim-enter-active {
+    opacity: 1;
+    transition: opacity 300ms ease-in
+}
+
+.itemsAnim-leave {
+    opacity: 1;
+}
+
+.itemsAnim-leave .itemsAnim-leave-active {
+    opacity: 0.01;
+    transition: opacity 300ms ease-in
 }