- Find me in src/app.js!
+
- );
+ )
}
diff --git a/code/src/components/AddTask.css b/code/src/components/AddTask.css
new file mode 100644
index 000000000..f4dd84a30
--- /dev/null
+++ b/code/src/components/AddTask.css
@@ -0,0 +1,36 @@
+.input{
+ height: 50px;
+ width: 255px;
+ border-radius: 12px;
+ background-color: #FEFEE3;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+ font-family: "Roboto";
+}
+
+input{
+ background: none;
+ border: none;
+ margin-left: 12px;
+ outline:none;
+ flex: 1;
+}
+
+.addIcon{
+ height: 30px;
+ width: 30px;
+}
+
+.addBtn {
+ background: transparent;
+ border: none;
+}
+
+.addBtn:hover {
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transform: scale(1.05);
+}
diff --git a/code/src/components/AddTask.js b/code/src/components/AddTask.js
new file mode 100644
index 000000000..470c83aba
--- /dev/null
+++ b/code/src/components/AddTask.js
@@ -0,0 +1,37 @@
+/* eslint-disable indent */
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import moment from 'moment';
+import './AddTask.css';
+import tasks from 'reducers/tasks';
+
+const AddTask = () => {
+ const [inputValue, setInputValue] = useState('');
+ const dispatch = useDispatch();
+ const onFormSubmit = (event) => {
+ event.preventDefault();
+
+ const newTask = {
+ id: Date.now().toString(),
+ isChecked: false,
+ name: inputValue.toUpperCase(),
+ time: moment().format('D MMM HH:mm')
+ };
+ dispatch(tasks.actions.addTask(newTask));
+ setInputValue('');
+ }
+ return (
+
+ )
+}
+
+export default AddTask;
\ No newline at end of file
diff --git a/code/src/components/ClearBtn.css b/code/src/components/ClearBtn.css
new file mode 100644
index 000000000..41a96488e
--- /dev/null
+++ b/code/src/components/ClearBtn.css
@@ -0,0 +1,41 @@
+
+.clearBtn {
+ background: #FF4742;
+ border: 1px solid #FF4742;
+ border-radius: 6px;
+ box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
+ box-sizing: border-box;
+ color: #FFFFFF;
+ cursor: pointer;
+ display: inline-block;
+ font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
+ font-size: 16px;
+ font-weight: 800;
+ line-height: 16px;
+ min-height: 40px;
+ outline: 0;
+ padding: 12px 14px;
+ text-align: center;
+ text-rendering: geometricprecision;
+ text-transform: none;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ vertical-align: middle;
+}
+
+.clearBtn:hover,
+.clearBtn:active {
+ background-color: initial;
+ background-position: 0 0;
+ color: #FF4742;
+}
+
+.clearBtn:active {
+ opacity: .5;
+}
+
+.ClearBtn-container {
+ display: flex;
+ justify-content: center;
+ }
\ No newline at end of file
diff --git a/code/src/components/ClearBtn.js b/code/src/components/ClearBtn.js
new file mode 100644
index 000000000..c2cbfb986
--- /dev/null
+++ b/code/src/components/ClearBtn.js
@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import './ClearBtn.css';
+import tasks from 'reducers/tasks';
+
+const ClearBtn = () => {
+ const dispatch = useDispatch();
+ const clearTasks = () => {
+ dispatch(tasks.actions.clearTasks());
+ }
+ return (
+
+ )
+}
+
+export default ClearBtn;
\ No newline at end of file
diff --git a/code/src/components/Counter.js b/code/src/components/Counter.js
new file mode 100644
index 000000000..5de88c182
--- /dev/null
+++ b/code/src/components/Counter.js
@@ -0,0 +1,26 @@
+/* eslint-disable indent */
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+const Counter = () => {
+ const items = useSelector((store) => store.tasks.items)
+ const completedTasks = items.filter((task) => task.isChecked);
+
+ const Alldone = () => {
+ if (items.length === 0) {
+ return ''
+ } else if (items.length === completedTasks.length) {
+ return `All done! ${completedTasks.length} / ${items.length}`
+ } else {
+ return `${completedTasks.length} / ${items.length} done`
+ }
+ }
+
+ return (
+
+ {Alldone()}
+
+ )
+}
+
+export default Counter;
\ No newline at end of file
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/code/src/components/TaskList.css b/code/src/components/TaskList.css
new file mode 100644
index 000000000..84bde0c4f
--- /dev/null
+++ b/code/src/components/TaskList.css
@@ -0,0 +1,59 @@
+.tasklist-container {
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+}
+
+ .taskList {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 0;
+ }
+
+ ul {
+ list-style-type: none;
+ padding: 15px;
+}
+
+.checkBox {
+ margin: auto;
+ scale: 150%;
+}
+
+.listSection {
+ padding: 10px;
+ border-radius: 12px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ white-space: break-spaces;
+ word-break: break-all;
+}
+
+.timeStamp {
+ font-size: 10px;
+ text-align: left;
+}
+
+.taskText {
+ display: flex;
+}
+
+.mainList {
+ display: flex;
+ text-align: center;
+ justify-content: space-between;
+}
+
+
+.list {
+ background: rgba(148, 187, 233, 0.4);
+ border-radius: 12px;
+}
+
+
+.removeBtn:hover {
+ cursor: pointer;
+ transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/code/src/components/TaskList.js b/code/src/components/TaskList.js
new file mode 100644
index 000000000..c2350ecc9
--- /dev/null
+++ b/code/src/components/TaskList.js
@@ -0,0 +1,46 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import tasks from 'reducers/tasks';
+import ClearBtn from './ClearBtn';
+import './TaskList.css';
+
+const TaskList = () => {
+ const taskList = useSelector((store) => store.tasks.items)
+ const dispatch = useDispatch();
+ const onTaskToggle = (taskId) => {
+ dispatch(tasks.actions.toggleTask({ id: taskId }));
+ }
+ const onRemoveTask = (taskId) => {
+ dispatch(tasks.actions.deleteTask({ id: taskId }));
+ }
+ return (
+
+ )
+}
+
+export default TaskList;
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..e93b00a7c 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -5,9 +5,49 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+.removeBtn {
+ background-color: transparent;
+ border: none;
+}
+
+.trashBtn {
+ height: 20px;
+ width: 20px;
+}
+
+.App{
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.app-container{
+ height: 8%;
+ width: 90%;
+ max-width: 400px;
+ padding: 32px 0px;
+ border-radius: 50px;
+ background: transparent;
+ display: table;
+ box-shadow: 32px 32px 64px #bebebe,
+ -32px -32px 64px #ffffff;
+}
+
+.app-container-task{
+ flex: 1;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 12px;
+}
\ No newline at end of file
diff --git a/code/src/reducers/tasks.js b/code/src/reducers/tasks.js
new file mode 100644
index 000000000..368dcf1e9
--- /dev/null
+++ b/code/src/reducers/tasks.js
@@ -0,0 +1,35 @@
+/* eslint-disable max-len */
+/* eslint-disable indent */
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+ items: []
+}
+
+const tasks = createSlice({
+ name: 'tasks',
+ initialState,
+ reducers: {
+ addTask: (store, action) => {
+ store.items = [...store.items, action.payload];
+ },
+
+ toggleTask: (store, action) => {
+ store.items.forEach((item) => {
+ if (item.id === action.payload.id) {
+ item.isChecked = !item.isChecked;
+ }
+ })
+ },
+
+ deleteTask: (store, action) => {
+ const updatedItems = store.items.filter((item) => item.id !== action.payload.id);
+ return { ...store, items: updatedItems };
+ },
+ clearTasks: () => {
+ return initialState;
+ }
+ }
+});
+
+export default tasks;
\ No newline at end of file