Initial commit

manzmvp · Oct 15, 2020 · 3dc9fb9 · 3dc9fb9
1 parent dfe71ec
commit 3dc9fb9
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 79 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,21 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
+      integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
+      crossorigin="anonymous"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git 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);
 }
+*/
diff --git 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 (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <header><h1>ToDo List</h1></header>
+    <Form todos={todos} setTodos={setTodos} inputText={inputText} setInputtext={setInputtext} setStatus={setStatus} />
+    <TodoList filteredTodos={filteredTodos} setTodos={ setTodos } todos={todos} />
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Form.js 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(
+      <form>
+      <input value={inputText} onChange = {inputTextHandler} type="text" className="todo-input" />
+      <button onClick = {submitEventHandler} className="todo-button" type="submit">
+        <i className="fas fa-plus-square"></i>
+      </button>
+      <div className="select">
+        <select onChange= {statusHandler} name="todos" className="filter-todo">
+          <option value="all">All</option>
+          <option value="completed">Completed</option>
+          <option value="uncompleted">Uncompleted</option>
+        </select>
+      </div>
+    </form>
+
+    );
+}
+export default Form;
diff --git a/src/components/Todo.js 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(
+        <div className='todo'>
+        <li className={`todo-item ${todo.completed ? "completed" : ''}`}>{text}</li>
+        <button onClick={completeHandler} className='complete-btn'>
+        <i className='fas fa-check'></i>
+        </button>
+        <button onClick={deletehandler} className='trash-btn'>
+        <i className='fas fa-trash'></i>
+        </button>
+        </div>
+    );
+}
+
+export default Todo;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Todo from './Todo';
+
+function TodoList( { todos, setTodos, filteredTodos }){
+    return(<div className="todo-container">
+    <ul className="todo-list">
+    {filteredTodos.map((todo) => (
+    <Todo setTodos={ setTodos } todos={todos} key={todo.id} todo={todo} text={todo.text} />
+    ))}
+    </ul>
+  </div>);
+}
+
+export default TodoList;
diff --git a/src/logo.svg b/src/logo.svg