Skip to content

T
todo-app
Commit eec5b392 by Syed Abdul Rahman
Options

component refactoring done

parent ee8dd23e
Showing with 287 additions and 35 deletions
db.json
{
"todos": [
{
"id": "c31b",
"id": "a401",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, felis sollicitudin pulvinar cursus, urna mi dapibus ligula, et cursus eros risus id mi. Quisque tortor dolor, egestas vitae gravida pretium, viverra non libero. Duis tincidunt dignissim eros, quis luctus velit fermentum eu. In ut blandit velit. Cras pellentesque est sed lectus blandit, eget sollicitudin justo iaculis. Donec maximus congue sapien eu sodales. Praesent sit amet neque vitae neque tempus porta vel a risus. Donec vitae ante sit amet arcu euismod sodales pharetra quis nibh. Curabitur pretium quam nec lectus ornare faucibus eu euismod felis. Proin magna nulla, condimentum quis sem id, molestie malesuada turpis. Sed sagittis sapien sit amet purus auctor, vitae efficitur nulla aliquam. Praesent gravida augue non dapibus interdum. Curabitur ornare sagittis dui, id viverra ante tristique at. this is a text area height fix edit",
"completed": false
},
{
"id": "3f71",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, felis sollicitudin pulvinar cursus, urna mi dapibus ligula, et cursus eros risus id mi. Quisque tortor dolor, egestas vitae gravida pretium, viverra non libero. Duis tincidunt dignissim eros, quis luctus velit fermentum eu. In ut blandit velit. Cras pellentesque est sed lectus blandit, eget sollicitudin justo iaculis. Donec maximus congue sapien eu sodales. Praesent sit amet neque vitae neque tempus porta vel a risus. Donec vitae ante sit amet arcu euismod sodales pharetra quis nibh. Curabitur pretium quam nec lectus ornare faucibus eu euismod felis. Proin magna nulla, condimentum quis sem id, molestie malesuada turpis. Sed sagittis sapien sit amet purus auctor, vitae efficitur nulla aliquam. Praesent gravida augue non dapibus interdum. Curabitur ornare sagittis dui, id viverra ante tristique at.",
"completed": false
},
{
"id": "7af5",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, felis sollicitudin pulvinar cursus, urna mi dapibus ligula, et cursus eros risus id mi. Quisque tortor dolor, egestas vitae gravida pretium, viverra non libero. Duis tincidunt dignissim eros, quis luctus velit fermentum eu. In ut blandit velit. Cras pellentesque est sed lectus blandit, eget sollicitudin justo iaculis. Donec maximus congue sapien eu sodales. Praesent sit amet neque vitae neque tempus porta vel a risus. Donec vitae ante sit amet arcu euismod sodales pharetra quis nibh. Curabitur pretium quam nec lectus ornare faucibus eu euismod felis. Proin magna nulla, condimentum quis sem id, molestie malesuada turpis. Sed sagittis sapien sit amet purus auctor, vitae efficitur nulla aliquam. Praesent gravida augue non dapibus interdum. Curabitur ornare sagittis dui, id viverra ante tristique at.",
"completed": false
},
{
"id": "9dbb",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, felis sollicitudin pulvinar cursus, urna mi dapibus ligula, et cursus eros risus id mi. Quisque tortor dolor, egestas vitae gravida pretium, viverra non libero. Duis tincidunt dignissim eros, quis luctus velit fermentum eu. In ut blandit velit. Cras pellentesque est sed lectus blandit, eget sollicitudin justo iaculis. Donec maximus congue sapien eu sodales. Praesent sit amet neque vitae neque tempus porta vel a risus. Donec vitae ante sit amet arcu euismod sodales pharetra quis nibh. Curabitur pretium quam nec lectus ornare faucibus eu euismod felis. Proin magna nulla, condimentum quis sem id, molestie malesuada turpis. Sed sagittis sapien sit amet purus auctor, vitae efficitur nulla aliquam. Praesent gravida augue non dapibus interdum. Curabitur ornare sagittis dui, id viverra ante tristique at.",
"completed": false
}
......
index.html
......@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="16x16" href="./public/favicon.ico">
<title>TODO APP</title>
</head>
<body>
......
src/App.css
......@@ -125,7 +125,7 @@
flex-direction: column;
}
.form__input {
/* .form__input {
height: 2.5rem;
outline: none;
border: 2px solid #cccccca7;
......@@ -135,7 +135,7 @@
color: rgb(31, 30, 30);
border-radius: 5px;
box-shadow: #2b2b2b21 0 2px 1.5px 0px inset;
}
} */
.form__submit {
font-size: 16px;
......@@ -159,15 +159,6 @@
flex-direction: row;
}
.form__input {
flex: 3 !important;
}
.form__submit {
flex: 1 !important;
height: unset;
}
.checklist-item__editable-input {
width: 92%;
......
src/App.tsx
import { Fragment, useEffect, useState } from 'react';
import './App.css'
import Modal from './Components/Modal';
import Header from './Components/Header/Header';
import CheckListItem from './Components/CheckListItem/CheckListItem';
import TodoInput from './Components/TodoInput/TodoInput';
import Button from './Components/Button/Button';
function App() {
const [todoList, setTodoList] = useState<any>();
......@@ -97,33 +100,34 @@ function App() {
<>
<section className="layout-container">
<div className="todo-container">
<div className="header-section">
{todoList?.length > 0 ? <>You have {todoList?.length} Todos </> : <>No Tasks</>}
</div>
<Header todoList={todoList} />
{todoList?.map((ele: any, index: number) => (
<Fragment key={ele.id}>
<div className='checklist-item'>
<div className='checklist-item__content' onClick={() => editTodo(ele.id)}>
<input type='checkbox' checked={ele.completed} className='custom-checkbox' onClick={(e) => e.stopPropagation()} onChange={(e) => toggleTodo(ele, e)} />
{editingTodoId === ele.id ? (
<textarea value={editableTitle} className='checklist-item__editable-input' onChange={(e) => setEditableTitle(e.target.value)} />
) : (
<h3 className={`checklist-item__title ${ele.completed ? 'strike' : ''}`} >{ele.title}</h3>
)}
</div>
<div className=''>
{editingTodoId === ele.id ? <img onClick={(e) => onSaveEdit(e, ele.id)} src='../src/assets/images/tick-circle-svgrepo-com.svg' width={25} /> : <img className='checklist-item__remove-btn' width={30} src='../src/assets/images/close-round-svgrepo-com.svg' onClick={() => onDeleteTodo(ele)} />}
</div>
</div>
{index + 1 !== todoList.length && <hr className='divider' />}
</Fragment>
<CheckListItem
key={ele.id}
ele={ele}
editingTodoId={editingTodoId}
editableTitle={editableTitle}
editTodo={editTodo}
toggleTodo={toggleTodo}
setEditableTitle={setEditableTitle}
onSaveEdit={onSaveEdit}
todoList={todoList}
index={index}
onDeleteTodo={onDeleteTodo}
/>
))}
<div className='form-group'>
<input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} className='form__input' placeholder='Enter Item' />
{/* <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} className='form__input' placeholder='Enter Item' />
<button className='form__submit' onClick={saveTodo}>
Submit
</button>
</button> */}
<TodoInput
newTodo={newTodo}
setNewTodo={setNewTodo}
/>
<Button
saveTodo={saveTodo}
/>
</div>
</div>
{openModal &&
......
src/Components/Button/Button.module.css 0 → 100644
.form__submit {
font-size: 16px;
font-family: 'Roboto-Regular';
background-color: white;
border: 2px solid #cccccca7;
border-radius: 5px;
padding: 0.3rem 0.5rem;
cursor: pointer;
height: 2.5rem;
}
@media screen and (min-width: 768px) {
.form__submit {
flex: 1 !important;
height: unset;
}
}
\ No newline at end of file
src/Components/Button/Button.tsx 0 → 100644
import styles from './Button.module.css';
const Button = ({ saveTodo }: any) => {
return (
<button className={styles['form__submit']} onClick={saveTodo}>
Submit
</button>
)
}
export default Button
\ No newline at end of file
src/Components/CheckListItem/CheckListItem.module.css 0 → 100644
.checklist-item {
display: flex;
justify-content: space-between;
max-width: 95%;
margin: 0 auto;
align-items: center;
}
.checklist-item__content {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
cursor: pointer;
}
.checklist-item__title {
font-family: 'Roboto-Light';
font-size: 16px;
padding: 1.5rem 0;
color: rgb(141, 141, 141);
max-width: 90%;
width: 90%;
}
.checklist-item__editable-input {
font-family: 'Roboto-Medium';
font-size: 16px;
padding: 0.5rem 0.5rem;
color: rgb(141, 141, 141);
border: 1px solid rgba(128, 128, 128, 0.425);
max-width: 95%;
align-self: center;
border-radius: 5px;
width: 88%;
resize: none;
margin: 15px 0;
}
.strike {
text-decoration: line-through;
}
.checklist-item__remove-btn {
cursor: pointer;
}
.checklist-item__btn-wrapper {
width: 3.5%;
height: 2.6vh;
background-color: rgba(168, 166, 166, 0.664);
border-radius: 50%;
text-align: center;
color: white;
font-family: 'Roboto-Medium';
cursor: pointer;
font-size: 18px;
}
.edit-action-btn {
align-self: center;
}
.custom-checkbox {
width: 15px;
height: 20px;
margin: 1.5rem 0;
}
.divider {
border-color: none !important;
border: 0.2px solid rgba(182, 177, 177, 0.39);
}
\ No newline at end of file
src/Components/CheckListItem/CheckListItem.tsx 0 → 100644
import { Fragment } from 'react/jsx-runtime';
import styles from './CheckListItem.module.css';
import { useEffect, useRef } from 'react';
const CheckListItem = (props: any) => {
const {
ele,
editingTodoId,
editableTitle,
editTodo,
toggleTodo,
setEditableTitle,
onSaveEdit,
todoList,
index,
onDeleteTodo
} = props;
const textareaRef = useRef<any>(null);
useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = textarea.scrollHeight + 'px';
}
}, [editableTitle, editingTodoId]);
return (
<Fragment key={ele.id}>
<div className={styles['checklist-item']}>
<div
className={styles['checklist-item__content']}
onClick={() => editTodo(ele.id)}
>
<input
type='checkbox'
checked={ele.completed}
className={styles['custom-checkbox']}
onClick={(e) => e.stopPropagation()}
onChange={(e) => toggleTodo(ele, e)}
/>
{editingTodoId === ele.id ? (
<textarea
value={editableTitle}
ref={textareaRef}
className={styles['checklist-item__editable-input']}
onChange={(e) => setEditableTitle(e.target.value)}
/>
) : (
<h3 className={`${styles['checklist-item__title']} ${ele.completed ? styles['strike'] : ''}`} >{ele.title}</h3>
)}
</div>
<div className=''>
{editingTodoId === ele.id ?
<img
onClick={(e) => onSaveEdit(e, ele.id)}
src='../src/assets/images/tick-circle-svgrepo-com.svg'
width={25}
/> :
<img
className={styles['checklist-item__remove-btn']}
width={30} src='../src/assets/images/close-round-svgrepo-com.svg'
onClick={() => onDeleteTodo(ele)}
/>}
</div>
</div>
{index + 1 !== todoList.length && <hr className={styles.divider} />}
</Fragment>
)
}
export default CheckListItem;
\ No newline at end of file
src/Components/Header/Header.module.css 0 → 100644
.header-section {
text-align: center;
padding: 1.5rem 0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 5px 0px;
font-family: 'Roboto-Bold';
font-size: clamp(1rem, 2vw, 2rem);
position: sticky;
top: 0;
background-color: white;
padding: 30px 0;
z-index: 10;
border-bottom: 1px solid #ddd;
}
\ No newline at end of file
src/Components/Header/Header.tsx 0 → 100644
import styles from './Header.module.css';
const Header = ({ todoList }: any) => {
return (
<div className={styles["header-section"]}>
{todoList?.length > 0 ? <>You have {todoList?.length} Todos </> : <>No Tasks</>}
</div>
)
}
export default Header
\ No newline at end of file
src/Components/TodoInput/TodoInput.module.css 0 → 100644
.form__input {
height: 2.5rem;
outline: none;
border: 2px solid #cccccca7;
font-family: 'Roboto-Regular';
font-size: 16px;
padding: 0.3rem 0.5rem;
color: rgb(31, 30, 30);
border-radius: 5px;
box-shadow: #2b2b2b21 0 2px 1.5px 0px inset;
}
@media screen and (min-width: 768px) {
.form__input {
flex: 3 !important;
}
}
\ No newline at end of file
src/Components/TodoInput/TodoInput.tsx 0 → 100644
import styles from './TodoInput.module.css';
const TodoInput = ({ newTodo, setNewTodo }: any) => {
return (
<input
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
className={styles['form__input']}
placeholder='Enter Item'
/>
)
}
export default TodoInput;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment