From 95e5220956cbd6b1d41c592128eabe5bc57ea8b4 Mon Sep 17 00:00:00 2001 From: Aditi Date: Tue, 6 Jul 2021 21:27:22 +0530 Subject: [PATCH] todo-app --- login-signup/package-lock.json | 39 +++++++ login-signup/package.json | 5 + login-signup/src/App.css | 4 +- .../src/components/Options/Options.js | 17 --- login-signup/src/components/To-do/Calender.js | 90 ++++++++++++++-- .../src/components/To-do/ItemsList.js | 31 ++++++ login-signup/src/components/To-do/to-do.css | 101 +++++++++++++++++- 7 files changed, 258 insertions(+), 29 deletions(-) create mode 100644 login-signup/src/components/To-do/ItemsList.js diff --git a/login-signup/package-lock.json b/login-signup/package-lock.json index 0576219..3f4ef48 100644 --- a/login-signup/package-lock.json +++ b/login-signup/package-lock.json @@ -1588,6 +1588,35 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.5.0.tgz", "integrity": "sha512-5808ztHwCy0bE154pmYSR86+uKToDcoxvM7F+nMDJ2NktxujYZLsz10e7iMXrKtyePKNP5VCVgp7s0vsViSKDA==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz", + "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz", + "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz", + "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@grpc/grpc-js": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.3.2.tgz", @@ -14035,6 +14064,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-flip-move": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-flip-move/-/react-flip-move-3.0.4.tgz", + "integrity": "sha512-HyUVv9g3t/BS7Yz9HgrtYSWyRNdR2F81nkj+C5iRY675AwlqCLB5JU9mnZWg0cdVz7IM4iquoyZx70vzZv3Z8Q==" + }, "react-grid-system": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-7.2.0.tgz", @@ -14043,6 +14077,11 @@ "prop-types": "^15.7.2" } }, + "react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/login-signup/package.json b/login-signup/package.json index 938ae06..af5c189 100644 --- a/login-signup/package.json +++ b/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", diff --git a/login-signup/src/App.css b/login-signup/src/App.css index 409608f..be6aa5a 100644 --- a/login-signup/src/App.css +++ b/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 ; diff --git a/login-signup/src/components/Options/Options.js b/login-signup/src/components/Options/Options.js index e2dbf31..bb3b91b 100644 --- a/login-signup/src/components/Options/Options.js +++ b/login-signup/src/components/Options/Options.js @@ -190,23 +190,6 @@ const Options = (props) => { /> )} - - {/*
- setCallId(e.target.value)} - /> -
*/} - - {/* {!callAccepted && !callEnded && ( */} - {/*
- -
*/} - {/* )} */} diff --git a/login-signup/src/components/To-do/Calender.js b/login-signup/src/components/To-do/Calender.js index b661d2b..ad806c3 100644 --- a/login-signup/src/components/To-do/Calender.js +++ b/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 ( <> +
+
+
+ + +
+

{this.state.items.text}

+ + + +
+
- ) -}; - -const Calender = Motion(CalenderComponent); + ); + } +} +const ToDoApp = Motion(ToDoAppComponent); -export default Calender; \ No newline at end of file +export default ToDoApp; \ No newline at end of file diff --git a/login-signup/src/components/To-do/ItemsList.js b/login-signup/src/components/To-do/ItemsList.js new file mode 100644 index 0000000..082178a --- /dev/null +++ b/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
+

+ { + props.setUpdate(e.target.value,item.key)}}/> + + + { + props.deleteItem(item.key) + }} icon="trash" /> + +

+ +
}) + return
+ + {listItems} + + +
; + } + + export default Items; \ No newline at end of file diff --git a/login-signup/src/components/To-do/to-do.css b/login-signup/src/components/To-do/to-do.css index 37b3955..310736d 100644 --- a/login-signup/src/components/To-do/to-do.css +++ b/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 } \ No newline at end of file