diff --git a/public/index.html b/public/index.html index aa069f2..86b5bc5 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,21 @@ content="Web site created using create-react-app" /> - + + - React App
- diff --git a/src/App.css b/src/App.css index 74b5e05..768d548 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,139 @@ -.App { - text-align: center; +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); + color: white; + font-family: "Poppins", sans-serif; + min-height: 100vh; +} +header { + font-size: 2rem; } -.App-logo { - height: 40vmin; - pointer-events: none; +header, +form { + min-height: 20vh; + display: flex; + justify-content: center; + align-items: center; +} +form input, +form button { + padding: 0.5rem; + font-size: 2rem; + border: none; + background: white; +} +form button { + color: #ff6f47; + background: #f7fffe; + cursor: pointer; + transition: all 0.3s ease; +} +form button:hover { + background: #ff6f47; + color: white; +} +.todo-container { + display: flex; + justify-content: center; + align-items: center; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.todo-list { + min-width: 30%; + list-style: none; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.todo { + margin: 0.5rem; + background: white; + font-size: 1.5rem; + color: black; display: flex; - flex-direction: column; + justify-content: space-between; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); + transition: all 1s ease; +} +.filter-todo { + padding: 1rem; +} +.todo li { + flex: 1; +} + +.trash-btn, +.complete-btn { + background: #ff6f47; color: white; + border: none; + padding: 1rem; + cursor: pointer; + font-size: 1rem; +} +.complete-btn { + background: rgb(11, 212, 162); +} +.todo-item { + padding: 0rem 0.5rem; +} + +.fa-trash, +.fa-check { + pointer-events: none; } -.App-link { - color: #61dafb; +.fall { + transform: translateY(10rem) rotateZ(20deg); + opacity: 0; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.completed { + text-decoration: line-through; + opacity: 0.5; +} + +/*CUSTOM SELECTOR */ +select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + outline: 0; + box-shadow: none; + border: 0 !important; + background-image: none; +} + +/* Custom Select */ +.select { + margin: 1rem; + position: relative; + overflow: hidden; +} +select { + color: #ff6f47; + font-family: "Poppins", sans-serif; + cursor: pointer; + width: 12rem; +} +/* Arrow */ +.select::after { + content: "\25BC"; + position: absolute; + top: 0; + right: 0; + padding: 1rem; + background: #ff6f47; + cursor: pointer; + pointer-events: none; +} +/* Transition */ +/* +.select:hover::after { + transform: scale(1.5); } +*/ \ No newline at end of file diff --git a/src/App.js b/src/App.js index ce9cbd2..bec51db 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,55 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, {useState, useEffect} from 'react'; import './App.css'; +import Form from './components/Form'; +import TodoList from './components/TodoList'; function App() { + + + const [inputText, setInputtext] = useState(""); + const [todos, setTodos] = useState([]); + const [status, setStatus] = useState("all"); + const [filteredTodos, setFilteredTodos] = useState([]); + + useEffect(() => { + getLocalTodos(); + },[]); + useEffect(() => { + filterHandler(); + saveLocalTodos(); + }, [todos, status]); + + function filterHandler(){ + switch(status){ + case 'completed': + setFilteredTodos(todos.filter(todo => todo.completed === true)); + break; + case 'uncompleted': + setFilteredTodos(todos.filter(todo => todo.completed === false)); + break; + default: + setFilteredTodos(todos); + break; + } + } + + function saveLocalTodos(){ + localStorage.setItem('todos', JSON.stringify(todos)); + } + function getLocalTodos(){ + if(localStorage.getItem('todos') === null){ + localStorage.setItem('todos', JSON.stringify([])) + } + else{ + let todoLocal = JSON.parse(localStorage.getItem("todos")) + setTodos(todoLocal); + } + } return (
-
- logo -

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

- - Learn React - -
+

ToDo List

+
+
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 4db7ebc..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Form.js b/src/components/Form.js new file mode 100644 index 0000000..801c90d --- /dev/null +++ b/src/components/Form.js @@ -0,0 +1,35 @@ +import React from 'react'; + +function Form({ todos, setTodos, inputText, setInputtext, setStatus }){ + function inputTextHandler(e){ + setInputtext(e.target.value) + } + function submitEventHandler(e){ + e.preventDefault(); + setTodos([ + ...todos, {text: inputText, completed: false, id: Math.random()*1000} + ]); + setInputtext(""); + } + + function statusHandler(e){ + setStatus(e.target.value); + } + return( + + + +
+ +
+ + + ); +} +export default Form; \ No newline at end of file diff --git a/src/components/Todo.js b/src/components/Todo.js new file mode 100644 index 0000000..4bfdce4 --- /dev/null +++ b/src/components/Todo.js @@ -0,0 +1,32 @@ +import React from 'react'; + +function Todo({ text, todo, todos, setTodos }){ + function deletehandler(){ + setTodos(todos.filter((el) => el.id !== todo.id)); + } + function completeHandler(){ + setTodos(todos.map(item => { + if(item.id === todo.id){ + return { + ...item, completed: !item.completed + }; + } + return item; + + + })) + }; + return( +
+
  • {text}
    • + + +
    + ); +} + +export default Todo; \ No newline at end of file diff --git a/src/components/TodoList.js b/src/components/TodoList.js new file mode 100644 index 0000000..7a46332 --- /dev/null +++ b/src/components/TodoList.js @@ -0,0 +1,14 @@ +import React from "react"; +import Todo from './Todo'; + +function TodoList( { todos, setTodos, filteredTodos }){ + return(
    + +
    ); +} + +export default TodoList; \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - -