{"version":3,"sources":["components/Title.js","components/Header.js","components/Todo.js","components/TodoList.js","App.js","reportWebVitals.js","index.js"],"names":["Title","Header","Todo","todo","toggleTodo","deleteTodo","className","Checkbox","checked","complete","onClick","id","name","IconButton","TodoList","todos","map","LOCAL_STORAGE_KEY","App","useState","setTodos","todoNameRef","useRef","newTodos","find","findIndex","splice","useEffect","storedTodos","JSON","parse","localStorage","getItem","setItem","stringify","ref","type","onKeyDown","event","key","current","value","prevTodos","uuidv4","filter","length","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.f3d678f6.chunk.js","sourcesContent":["const Title = () => {\n return (\n

To-do list

\n );\n}\n\nexport default Title;","import Title from './Title';\n\nconst Header = () => {\n return (\n \n );\n};\n\nexport default Header;","\nimport { Checkbox, IconButton} from \"@material-ui/core\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport React from 'react';\n\n\n\nconst Todo = ({todo, toggleTodo, deleteTodo}) => {\n\n function handleTodoClick(){\n toggleTodo(todo.id)\n }\n\n function handleDeleteClick(){\n deleteTodo(todo.id)\n }\n\n return (\n <div>\n <label className=\"defaultfontsize\">\n <Checkbox checked={todo.complete} onClick={handleTodoClick} />\n <span className=\"higher\">{todo.name}</span>\n <IconButton className=\"delete\" onClick={handleDeleteClick}>\n <CloseIcon />\n </IconButton>\n </label>\n </div>\n );\n};\n\nexport default Todo;","import React from 'react';\nimport Todo from './Todo'\n\nconst TodoList = ({todos, toggleTodo, deleteTodo}) => {\n return (\n todos.map(todo=> {\n return <Todo key = {todo.id} toggleTodo={toggleTodo} deleteTodo={deleteTodo} todo={todo} />\n }\n ));\n};\n\nexport default TodoList;","import Header from './components/Header'\nimport {useState, useRef, useEffect} from \"react\";\nimport TodoList from './components/TodoList'\nimport { v4 as uuidv4 } from 'uuid';\nimport './index.css';\n\n\nconst LOCAL_STORAGE_KEY = 'todoApp.todos'\n\nconst App = () => {\n\n const [todos, setTodos] = useState([])\n const todoNameRef = useRef()\n\n useEffect (()=>{\n const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))\n if (storedTodos) setTodos (storedTodos)\n },[])\n\n useEffect(()=>{\n localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))\n }, [todos])\n\n function toggleTodo(id){\n const newTodos = [...todos]\n const todo = newTodos.find(todo=>todo.id === id)\n todo.complete = !todo.complete\n setTodos(newTodos)\n }\n\n function deleteTodo(id){\n const newTodos = [...todos]\n const todo = newTodos.findIndex(todo=>todo.id === id)\n newTodos.splice(todo,1)\n setTodos(newTodos)\n }\n\n function handleAddTodo(){\n const name = todoNameRef.current.value\n if (name === '') return\n setTodos(prevTodos => {\n return [...prevTodos, {id: uuidv4(), name: name, complete:false }]\n })\n todoNameRef.current.value = null\n }\n\n function handleKeyDown (event){\n if (event.key === 'Enter') {\n const name = todoNameRef.current.value\n if (name === '') return\n setTodos(prevTodos => {\n return [...prevTodos, {id: uuidv4(), name: name, complete:false }]\n })\n todoNameRef.current.value = null}\n }\n\n function handeleClearTodos(){\n const newTodos = todos.filter (todo=>!todo.complete)\n setTodos(newTodos)\n }\n\n return (\n <div className=\"container\">\n <div className=\"row text-center p-4\">\n <Header className=\"col-12 shadow\" />\n </div>\n\n <div className=\"row mx-auto justify-content-center text-center\">\n <input className=\"col-md-3 col-sm-7 inputfield rounded shadow mb-2\" ref={todoNameRef} type=\"text\" onKeyDown={handleKeyDown}/>\n <button className=\"col-md-2 col-sm-6 mx-2 btn btn-pill btn-success btnadd shadow mb-2\" onClick={handleAddTodo}>Add To Do</button>\n </div>\n\n <div className=\"row mt-5\">\n <div className=\"col-md-5 col-sm-8 border rounded mx-auto minima shadow mb-3\">\n <span className=\"m-2 h3 d-block\">Not completed</span>\n <TodoList toggleTodo={toggleTodo} deleteTodo={deleteTodo} todos={todos.filter(todos=>!todos.complete)} />\n <span className=\"field1\"> <div className=\"d-inline\">{todos.filter(todo => !todo.complete).length} </div> {todos.filter(todo => !todo.complete).length === 1 ? ' to-do left' : ' to-dos left'} </span>\n </div>\n\n <div className=\"col-md-5 col-sm-8 border rounded mx-auto minima shadow mb-3\">\n <span className=\"m-1 h3 d-block\">Completed</span>\n <TodoList toggleTodo={toggleTodo} deleteTodo={deleteTodo} todos={todos.filter(todos=>todos.complete)}/>\n <button className=\"field2 btn btn-pill btn-warning btnclear shadow\" onClick={handeleClearTodos}>Clear Complete</button>\n </div>\n </div>\n\n <div className=\"clock\">\n <div className=\"top\"></div>\n <div className=\"right\"></div>\n <div className=\"bottom\"></div>\n <div className=\"left\"></div>\n <div className=\"center\"></div>\n <div className=\"hour\"></div>\n <div className=\"minute\"></div>\n <div className=\"second\"></div>\n </div>\n\n </div>\n\n\n\n\n );\n}\n\nexport default App;","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import 'bootstrap/dist/css/bootstrap.min.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n <React.StrictMode>\n <App />\n </React.StrictMode>,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}