├── .eslintcache
├── .gitignore
├── README.md
├── package.json
├── public
    └── index.html
├── src
    ├── components
    │   ├── CTA
    │   │   ├── GithubCTA.css
    │   │   └── GithubCTA.jsx
    │   ├── Header
    │   │   ├── Header.css
    │   │   └── Header.jsx
    │   ├── Modal
    │   │   └── TaskModal.jsx
    │   └── Tasks
    │   │   ├── Task
    │   │       ├── Task.jsx
    │   │       └── Task.module.css
    │   │   ├── Tasks.css
    │   │   └── Tasks.jsx
    ├── container
    │   ├── App.css
    │   └── App.jsx
    └── index.js
└── yarn.lock


/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"F:\\Projects\\react.js-todolist\\src\\index.js":"1","F:\\Projects\\react.js-todolist\\src\\container\\App.jsx":"2","F:\\Projects\\react.js-todolist\\src\\components\\Header\\Header.jsx":"3","F:\\Projects\\react.js-todolist\\src\\components\\Modal\\TaskModal.jsx":"4","F:\\Projects\\react.js-todolist\\src\\components\\CTA\\GithubCTA.jsx":"5","F:\\Projects\\react.js-todolist\\src\\components\\Tasks\\Tasks.jsx":"6","F:\\Projects\\react.js-todolist\\src\\components\\Tasks\\Task\\Task.jsx":"7"},{"size":165,"mtime":1661513462703,"results":"8","hashOfConfig":"9"},{"size":542,"mtime":1661513502474,"results":"10","hashOfConfig":"9"},{"size":156,"mtime":1661512215832,"results":"11","hashOfConfig":"9"},{"size":681,"mtime":1661513446970,"results":"12","hashOfConfig":"9"},{"size":335,"mtime":1661512215831,"results":"13","hashOfConfig":"9"},{"size":354,"mtime":1661513296924,"results":"14","hashOfConfig":"9"},{"size":496,"mtime":1661513258739,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"12fbmlk",{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"F:\\Projects\\react.js-todolist\\src\\index.js",[],"F:\\Projects\\react.js-todolist\\src\\container\\App.jsx",[],"F:\\Projects\\react.js-todolist\\src\\components\\Header\\Header.jsx",[],"F:\\Projects\\react.js-todolist\\src\\components\\Modal\\TaskModal.jsx",[],"F:\\Projects\\react.js-todolist\\src\\components\\CTA\\GithubCTA.jsx",[],"F:\\Projects\\react.js-todolist\\src\\components\\Tasks\\Tasks.jsx",[],"F:\\Projects\\react.js-todolist\\src\\components\\Tasks\\Task\\Task.jsx",[]]


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # Local Netlify folder
26 | .netlify


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Preview
 2 | ![Screenshot 2021-07-06 123206](https://user-images.githubusercontent.com/66781740/124564427-4caea600-de56-11eb-81e0-0020e416a26a.png)
 3 | 
 4 | # Tools
 5 | - [Sweetalert2](https://sweetalert2.github.io)
 6 | - [bootstrap](https://getbootstrap.com/)
 7 | - [uuid](https://www.npmjs.com/package/uuid)
 8 | 
 9 | # Get in touch
10 | - Email: [pooriafaramarzian@gmail.com](mailto:pooriafaramarzian@gmail.com)
11 | - Instagram: [this.pooria](https://www.instagram.com/this.pooria)
12 | - LinkedIn: [pooria-faramarzian](https://www.linkedin.com/in/pooria-faramarzian)
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todolist_using_react.js",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@sweetalert2/theme-material-ui": "^4.0.1",
 7 |     "@testing-library/jest-dom": "^5.11.8",
 8 |     "@testing-library/react": "^11.2.2",
 9 |     "@testing-library/user-event": "^12.6.0",
10 |     "react": "^17.0.1",
11 |     "react-bootstrap": "^1.4.3",
12 |     "react-dom": "^17.0.1",
13 |     "react-scripts": "4.0.1",
14 |     "react-toastify": "^6.2.0",
15 |     "sweetalert2": "^10.13.0",
16 |     "uuid": "^8.3.2",
17 |     "web-vitals": "^0.2.4"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link
 6 |       href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
 7 |       rel="stylesheet"
 8 |     />
 9 | 
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
13 |       integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
14 |       crossorigin="anonymous"
15 |     />
16 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
17 |     <title>ToDo App using React.js</title>
18 |   </head>
19 | 
20 |   <body>
21 |     <noscript>You need to enable JavaScript to run this app.</noscript>
22 |     <div id="root"></div>
23 |     <script
24 |       src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
25 |       integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
26 |       crossorigin="anonymous"
27 |     ></script>
28 |     <script
29 |       src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
30 |       integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
31 |       crossorigin="anonymous"
32 |     ></script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/components/CTA/GithubCTA.css:
--------------------------------------------------------------------------------
 1 | .git-hub__cta {
 2 |   width: 80px;
 3 |   height: 80px;
 4 |   display: flex;
 5 |   align-items: center;
 6 |   justify-content: center;
 7 |   background: #ffffff !important;
 8 |   position: absolute;
 9 |   bottom: 0;
10 |   cursor: pointer;
11 |   border-radius: 5px;
12 |   box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
13 |   transition: all 0.5s;
14 |   border: 15px solid white;
15 |   font-size: 5rem;
16 |   text-decoration: none !important;
17 | }
18 | 
19 | .git-hub__cta:hover {
20 |   transform: scale(1.1);
21 | }
22 | 
23 | .git-hub__cta i {
24 |   color: #2d2d2d;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/CTA/GithubCTA.jsx:
--------------------------------------------------------------------------------
 1 | import { createPortal } from 'react-dom';
 2 | import './GithubCTA.css';
 3 | 
 4 | const GithubCTA = () =>
 5 |   createPortal(
 6 |     <a
 7 |       href='https://github.com/Pooria-Faramarzian'
 8 |       className='git-hub__cta m-4'>
 9 |       <i className='bx bxl-github'></i>
10 |     </a>,
11 |     document.getElementById('root')
12 |   );
13 | 
14 | export default GithubCTA;
15 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.css:
--------------------------------------------------------------------------------
 1 | .to-do__header {
 2 |   text-align: center;
 3 |   color: #ffffff;
 4 |   background-color: #3b9aff;
 5 |   border-top-left-radius: 5px;
 6 |   border-top-right-radius: 5px;
 7 |   max-width: 23rem;
 8 |   margin: auto;
 9 |   padding: 0.9rem;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.jsx:
--------------------------------------------------------------------------------
 1 | import './Header.css';
 2 | 
 3 | const Header = () => (
 4 |   <header className='to-do__header'>
 5 |     <h2>To Do List</h2>
 6 |   </header>
 7 | );
 8 | 
 9 | export default Header;
10 | 


--------------------------------------------------------------------------------
/src/components/Modal/TaskModal.jsx:
--------------------------------------------------------------------------------
 1 | import { Button, Modal } from 'react-bootstrap';
 2 | 
 3 | const TaskModal = () => {
 4 |   return (
 5 |     <Modal show={Function.bind()} animation={true} onHide={Function.bind()}>
 6 |       <Modal.Header closeButton>
 7 |         <Modal.Title>Modal title</Modal.Title>
 8 |       </Modal.Header>
 9 |       <Modal.Body>
10 |         Add task
11 |         <input type='text' className='form-control' />
12 |       </Modal.Body>
13 |       <Modal.Footer>
14 |         <Button variant='secondary' onClick={Function.bind()}>
15 |           Close
16 |         </Button>
17 |         <Button variant='primary' onClick={Function.bind()}>
18 |           Add
19 |         </Button>
20 |       </Modal.Footer>
21 |     </Modal>
22 |   );
23 | };
24 | export default TaskModal;
25 | 


--------------------------------------------------------------------------------
/src/components/Tasks/Task/Task.jsx:
--------------------------------------------------------------------------------
 1 | const Task = ({ task }) => {
 2 |   return (
 3 |     <li className='d-flex justify-content-between align-items-end'>
 4 |       <div>
 5 |         <span className='mx-1 delete-task'>
 6 |           <i className='bx bx-trash-alt'></i>
 7 |         </span>
 8 |         <span className='mx-1 edit-task'>
 9 |           <i className='bx bxs-edit'></i>
10 |         </span>
11 |       </div>
12 |       <span className={`${task?.isDone && 'completed'} task`}>
13 |         {task.title}
14 |       </span>
15 |     </li>
16 |   );
17 | };
18 | 
19 | export default Task;
20 | 


--------------------------------------------------------------------------------
/src/components/Tasks/Task/Task.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pooridev/react.js-todolist/f31e3d6401efc448517a21567135c649076d61d3/src/components/Tasks/Task/Task.module.css


--------------------------------------------------------------------------------
/src/components/Tasks/Tasks.css:
--------------------------------------------------------------------------------
 1 | .completed {
 2 |   text-decoration: line-through;
 3 | }
 4 | 
 5 | .task {
 6 |   cursor: pointer;
 7 | }
 8 | 
 9 | .list {
10 |   margin: 1rem auto;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/Tasks/Tasks.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import TaskModal from '../Modal/TaskModal';
 4 | import Task from './Task/Task';
 5 | import './Tasks.css';
 6 | 
 7 | const Tasks = () => {
 8 |   const tasks = [];
 9 |   return (
10 |     <ul className='list'>
11 |       {tasks.map((task, index) => (
12 |         <Task task={task} index={index} />
13 |       ))}
14 |     </ul>
15 |   );
16 | };
17 | 
18 | export default Tasks;
19 | 


--------------------------------------------------------------------------------
/src/container/App.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-color: #c0e5ff;
  3 |   overflow-x: hidden !important;
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   font-family: 'Roboto', sans-serif;
  7 |   direction: ltr;
  8 | }
  9 | 
 10 | * {
 11 |   padding: 0;
 12 |   margin: 0;
 13 | }
 14 | 
 15 | button {
 16 |   outline: none !important;
 17 | }
 18 | 
 19 | .to-do {
 20 |   margin: 3rem auto;
 21 | }
 22 | 
 23 | .to-do__body {
 24 |   background-color: #ffffff;
 25 |   overflow-y: visible;
 26 |   height: 200px;
 27 |   border-bottom-left-radius: 5px;
 28 |   border-bottom-right-radius: 5px;
 29 |   overflow-y: scroll;
 30 |   max-width: 23rem;
 31 |   margin: 1rem auto;
 32 |   padding: 0 1rem;
 33 | }
 34 | 
 35 | @media (min-width: 1000px) {
 36 |   .to-do__body,
 37 |   .to-do__header {
 38 |     max-width: 30rem;
 39 |   }
 40 | }
 41 | 
 42 | .modal-body {
 43 |   text-align: left !important;
 44 | }
 45 | 
 46 | .to-do__body::-webkit-scrollbar {
 47 |   -webkit-appearance: none;
 48 | }
 49 | 
 50 | .to-do__body::-webkit-scrollbar:vertical {
 51 |   width: 11px;
 52 | }
 53 | 
 54 | .to-do__body::-webkit-scrollbar:horizontal {
 55 |   height: 11px;
 56 | }
 57 | 
 58 | .to-do__body::-webkit-scrollbar-thumb {
 59 |   border-radius: 8px;
 60 |   border: 2px solid white;
 61 |   background-color: rgba(0, 0, 0, 0.5);
 62 | }
 63 | 
 64 | .to-do__body::-webkit-scrollbar-track {
 65 |   background-color: #fff;
 66 |   border-radius: 8px;
 67 | }
 68 | 
 69 | li {
 70 |   color: #4a4a4b;
 71 |   list-style: none;
 72 |   padding: 0.3rem 0.5rem 0.3rem 0.5rem;
 73 |   border-bottom: #4b4b4b 1px solid;
 74 |   text-align: right;
 75 |   z-index: 100000;
 76 | }
 77 | 
 78 | li:hover .edit-task,
 79 | li:hover .delete-task {
 80 |   opacity: 1;
 81 | }
 82 | .newTaskModalTrigger {
 83 |   position: relative;
 84 |   bottom: 3rem;
 85 |   width: 65px;
 86 |   height: 65px;
 87 |   font-size: 3.7rem;
 88 |   background-color: #ffffff;
 89 |   box-shadow: 0px 0px 6px #dadada;
 90 |   display: flex;
 91 |   justify-content: center;
 92 |   align-items: center;
 93 |   border-radius: 50%;
 94 |   border: 0;
 95 |   margin: auto;
 96 | }
 97 | 
 98 | .newTaskModalTrigger i {
 99 |   color: #3b9aff;
100 | }
101 | 
102 | .edit-task,
103 | .delete-task {
104 |   opacity: 1;
105 |   transition: all 0.3s;
106 |   cursor: pointer;
107 |   color: #3c3c3c;
108 |   font-size: 1.4rem;
109 | }
110 | 
111 | .newTaskModalTrigger:focus {
112 |   outline: none;
113 | }
114 | 
115 | @media (min-width: 991px) {
116 |   .edit-task,
117 |   .delete-task {
118 |     opacity: 0;
119 |   }
120 | }


--------------------------------------------------------------------------------
/src/container/App.jsx:
--------------------------------------------------------------------------------
 1 | import GithubCTA from '../components/CTA/GithubCTA';
 2 | import Header from '../components/Header/Header';
 3 | import Tasks from '../components/Tasks/Tasks';
 4 | import './App.css';
 5 | 
 6 | const App = () => {
 7 |   return (
 8 |     <main className='to-do'>
 9 |       <Header />
10 |       <section className='to-do__body'>
11 |         <Tasks />
12 |       </section>
13 |       <button onClick={Function.bind()} className='newTaskModalTrigger'>
14 |         <i className='bx bx-plus-circle'></i>
15 |       </button>
16 | 
17 |       <GithubCTA />
18 |     </main>
19 |   );
20 | };
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './container/App.jsx';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------