diff --git a/src/App.css b/src/App.css index 74b5e05..591096d 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,157 @@ -.App { - text-align: center; +#root { + background-color: #ffffff; + + height: 100vh; + + display: flex; + flex-direction: column; } -.App-logo { - height: 40vmin; - pointer-events: none; +.main-header { + display: flex; + justify-content: center; + align-items: center; + + background-color: #08D9D6; + padding-top: 2vh; + padding-bottom: 2vh; + + user-select: none; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.main-header h1 { + margin: 0; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.app { + display: flex; + flex-wrap: wrap; + margin: 3vw +} + +.task-list { + width: 60vw; + min-width: 800px; +} + +.add-task form { display: flex; flex-direction: column; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); +} + +#task-name { + background-color: #686868; + border: 1px solid #333333; + color: white; + height: 7vh; + width: 25vw; + padding: 0; + padding-left: 5px; + box-sizing: border-box; + font-size: 15pt; + + font-family: Arial, Helvetica, sans-serif; +} + +.button-task { + width: 25vw; + margin-top: 1vh; + color: white; + padding: 0; + box-sizing: border-box; + font-size: 13pt; + height: 3.5vh; + + padding-left: 2.5px; + padding-right: 2.5px; + + font-family: Arial, Helvetica, sans-serif; + +} + +.mini-button { + width: 5vw; + min-width: 52px; + height: 4vh; + min-height: 27px; + border-radius: 3%; + box-sizing: content-box; +} + +.edit-button { + background-color: #ffe65a; + border: 1px solid #5a5a5a; +} + +.delete-button { + background-color: #ff8787; + border: 1px solid #5a5a5a; +} + +.submit-task { + background-color: #ff5a5a; + border: 1px solid #ff2f2f; +} + +.input-edit-task { + background-color: #686868; + border: 1px solid #333333; color: white; } -.App-link { - color: #61dafb; +.edit-task { + background-color: #ffe65a; + border: 1px solid #2e2e2e; + color: #5a5a5a; + margin-left: 2vw; + height: 100%; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.task { + display: flex; + justify-content:flex-start; + flex-direction: column; + border-bottom: solid 1px rgb(185, 185, 185); + margin-top: 1vh; + width:40vw; + min-width: 500px; } + +.task-info { + display: flex; + align-items: center; + justify-content: space-between; +} + +.task-text { + display: flex; + align-items: center; +} + +.task-buttons button { + margin-right: 1vw; +} + +.space-edit-task form { + margin-bottom: 2vw; +} + +.task span { + color: gray; + margin-left: 1vw; + flex-wrap: nowrap; + user-select: none; +} + +footer a { + color: #ff8787 +} + +footer { + color:rgb(185, 185, 185); + margin-top: auto; + width: 100% - 3vw; + padding-bottom: 3vw; + padding-left: 3vw; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..bcdcc64 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,200 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import React, {useState} from "react"; function App() { + + const [tasks, setTasks] = useState([{ + text: 'Test Task', + id: 616 + }]) + + const [text, setText] = useState('') + const [messageInvalidText, setMessageInvalidText] = useState('') + + const [counterInputs, setCounterInputs] = useState(1) + const [formEditInput, setFormEditInput] = useState('') + + const persistTasks = (modificatedTasks) => { + localStorage.setItem('tasks', JSON.stringify(modificatedTasks)) + } + + const persistCounter = () => { + localStorage.setItem('counter', JSON.stringify(counterInputs)) + } + + const restoreTasks = () => { + let tasksCache = localStorage.getItem('tasks') + + tasksCache = JSON.parse(tasksCache) + + setTasks(tasksCache) + + } + + const restoreCounter = () => { + let counterInputCache = localStorage.getItem('counter') + + counterInputCache = JSON.parse(counterInputCache) + + setCounterInputs(counterInputCache + 1) + } + + const checkCache = () => { + if (localStorage.getItem('tasks')) { + restoreTasks() + } + + if (localStorage.getItem('counter')) { + restoreCounter() + } + return + } + + window.onload = () => { + checkCache() + } + + + const validateInput = (e, id = 0 ) => { + e.preventDefault() + + setMessageInvalidText('') + + if (!text.trim()) { + setMessageInvalidText('Text empty, please send a new task') + return + } + + setTasks([...tasks, + { + text: text, + id: counterInputs + } + ]) + + setCounterInputs(counterInputs + 1) + + setFormEditInput('') + + e.target.reset() + + persistTasks([...tasks, + { + text: text, + id: counterInputs + } + ]) + + persistCounter() + //setText('') + } + + + const deleteInput = (id) => { + const deleted_task = tasks.filter(task => task.id !== id) + + setTasks(deleted_task) + persistTasks(deleted_task) + + } + + const modifyInput = (id) => { + setFormEditInput([true, id]) + } + + const modifyInputTwo = (e) => { + + e.preventDefault() + + if(!text.trim()) { + setFormEditInput('') + return + } + + const taskID = tasks.findIndex(task => task.id === formEditInput[1]) + + tasks[taskID].text = text + + setTasks(tasks) + setText('') + setFormEditInput('') + + persistTasks() + + } + + + return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> +

Noti.io

+
+
+
+ { + tasks.map (task => ( +
+
+
+

{ task.text }

+ ({task.id}) +
+
+ + +
+
+ +
+ + { formEditInput[0] && task.id === formEditInput[1] ? + +
+ setText(e.target.value) } + className="input-edit-task" + autoFocus + autoComplete="off" + /> + +
+ + : <> + } +
+
+ )) + } +
+
+ +
+

{messageInvalidText}

+
+ setText(e.target.value)} + autoComplete="off" + /> + +
+ +
+
+ + ); } diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file