secondinit

Week2-TodoAppWithReact/todo-app-react/public/index.html

@@ -9,6 +9,16 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

Week2-TodoAppWithReact/todo-app-react/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);
 }
+*/

Week2-TodoAppWithReact/todo-app-react/src/App.js

@@ -1,25 +1,93 @@
-import logo from './logo.svg';
 import './App.css';
+import Form from './components/Form/form';
+import Todolist from './components/Todolist/todolist';
+
+import {useState,useEffect} from 'react';
+const STORAGEKEYOFTODOS = "myTodos";
 
 function App() {
+
+  const [inputText,setInputText] = useState("");
+  const [todos,setTodos] = useState([]);
+  const [status,setStatus] = useState("all");
+  const [filteredTodos,setFilteredTodos] = useState([]);
+
+
+  useEffect(() => {
+    console.log("storage effect")
+    getTodosFromLocalStorage();
+  }, [])
+
+  useEffect(() => {
+    console.log("effect1")
+      if(status === "completed"){
+        console.log("status completed")
+        setFilteredTodos(todos.filter((todo) => todo.isCompleted === true))
+      }
+      else if(status === "uncompleted"){
+        console.log("status UNNcompleted")
+        setFilteredTodos(todos.filter((todo) => todo.isCompleted === false))
+      }
+      else{
+        setFilteredTodos(todos);
+      }
+    saveTodosToLocalStorage();
+  },[todos])
+
+  useEffect(() => {
+    console.log("effect2")
+    switch (status) {
+        case "completed":
+          console.log("status completed")
+          setFilteredTodos(todos.filter((todo) => todo.isCompleted === true))
+          break;
+        case "uncompleted":
+          console.log("status UNNcompleted")
+          //console.log(todos.filter((todo) => todo.isCompleted === false))
+          setFilteredTodos(todos.filter((todo) => todo.isCompleted === false))
+          break;
+        default:
+          setFilteredTodos(todos);
+          break;
+      }
+  },[status])
+
+
+
+
+  const saveTodosToLocalStorage = () => {
+    localStorage.setItem(STORAGEKEYOFTODOS,JSON.stringify(todos))
+  }
+
+  const getTodosFromLocalStorage = () => {
+    if(localStorage.getItem(STORAGEKEYOFTODOS) === null){
+      localStorage.setItem(STORAGEKEYOFTODOS,JSON.stringify([]))
+    }else{
+      let todosfromlocal = JSON.parse(localStorage.getItem(STORAGEKEYOFTODOS));
+      setTodos(todosfromlocal);
+    }
+  }
+
   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>Emre KURTAR's todo list</h1>
+        </header>
+        <Form
+          inputText = {inputText}
+          todos = {todos}
+          setTodos = {setTodos}
+          setInputText ={setInputText} 
+          setStatus = {setStatus}
+          />
+          <Todolist todos = {todos} 
+            setTodos = {setTodos}
+            filteredTodos = {filteredTodos}
+          />
+
     </div>
   );
 }
 
-export default App;
+export default App;

Week2-TodoAppWithReact/todo-app-react/src/components/Form/form.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+function Form({setStatus, inputText, todos, setTodos, setInputText}) {
+
+
+    //Events
+
+    const inputTextHandler = (e) => {
+        setInputText(e.target.value)
+    }
+    const onSubmitHandler = (e) => {
+        e.preventDefault();
+        setTodos([...todos, {text:inputText, isCompleted : false,}])
+
+        setInputText("");
+    }
+    const statusHandler = (e) => {
+        setStatus(e.target.value)
+    }
+
+  return (
+    <form>
+      <input value= {inputText} onChange = {inputTextHandler} type="text" className="todo-input" />
+      <button onClick = {onSubmitHandler} 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;

Week2-TodoAppWithReact/todo-app-react/src/components/Todo/todo.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+function Todo({text, todo, todos, setTodos}) {
+
+    // Events
+
+    const deleteHandler = () => {
+        setTodos(todos.filter((item)=>(
+            item.text.trim().toLowerCase() !== todo.text.trim().toLowerCase()
+        )))
+    }
+
+    const completeHandler = () => {
+        setTodos(todos.map((item) => {
+            if(item.text.trim().toLowerCase() === todo.text.trim().toLowerCase()){
+                console.log("item completed")
+                return {...item, isCompleted :!todo.isCompleted}
+            }
+            return item;
+        }
+        ))
+    }
+
+    return (
+        <div className="todo">
+            <li className={`todo-item ${todo.isCompleted ? `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

Week2-TodoAppWithReact/todo-app-react/src/components/Todolist/todolist.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Todo from '../Todo/todo';
+
+function Todolist({filteredTodos, todos,setTodos}) {
+  return (
+    <div className="todo-container">
+      <ul className="todo-list">
+
+          {filteredTodos.map((todo,index) => (
+              <Todo todo ={todo} todos={todos} setTodos = {setTodos} key={index} text={todo.text} />
+          ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Todolist;