Skip to content

T
TodoList
Commit e8a25bbb by Sakilesh J
Options

fix of the bugs

parent cce9c357
Showing with 124 additions and 78 deletions
src/App.css
...@@ -6,100 +6,125 @@ ...@@ -6,100 +6,125 @@
background-color: ghostwhite; background-color: ghostwhite;
} }
body {
#root {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: radial-gradient(circle, #b3b3b3 10%, transparent 11%), radial-gradient(circle at bottom left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at bottom right, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top right, #b3b3b3 5%, transparent 6%);
background-size: 1em 1em;
background-color: #ffffff;
} }
.Count-banner { .Count-banner {
font-weight: 700; min-width: 30vw;
font-size: 1.3rem; height: auto;
flex-shrink: 1;
flex-grow: 1;
min-width: 70vh;
padding: 1rem; padding: 1rem;
font-size: 1.3rem;
font-weight: 700;
text-align: center; text-align: center;
box-shadow: 0px 2px 1px rgba(0, 0, 0, .20);
margin-bottom: 3px;
}
#root>* {
background-color: white; background-color: white;
box-shadow: 4px 4px 2px rgba(0, 0, 0, .05); box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1), -3px -3px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
} }
img { .wrapper-list {
max-width: 100%; width: 100%;
height: auto; max-height: 300px;
object-fit: contain;
overflow-y: scroll;
}
.wrapper-list::-webkit-scrollbar {
display: none;
} }
.item { .item {
min-width: 100%; width: 100%;
height: 50px; height: 40px;
padding: 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2rem .8rem;
box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
background: white;
}
.item .item-content { border-bottom: .3px solid rgb(189, 184, 184);
font-size: 20px;
padding: 0px 10px;
text-transform: capitalize;
background-color: transparent;
} }
.item .item-content>* {
margin-inline-end: 5px;
.item img {
width: 1.7rem;
margin-inline: .3rem;
} }
.item .actions { .item .item-content>* {
display: flex; font-size: 20px;
gap: 10px; border: none;
margin-inline-end: 9px;
color: gray;
} }
.item .actions img { .item .item-content input:nth-child(1) {
width: 20px; display: inline;
height: 20px; transform: scale(1.5);
border-color: black;
} }
.todo-name { .item .item-content>input:focus {
outline: none; outline: none;
border: none; border: none;
padding: 0rem 0;
font-size: 20px;
background-color: white;
} }
.todo-name:focus { .strike {
border: none; text-decoration: line-through;
} }
.input-item { .input-item {
width: 100%; width: 100%;
background-color: white; max-height: 100px;
padding: 1.7rem; }
box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
.input-item form {
padding: 1.5rem .5rem;
max-height: 100%;
}
.input-item form>* {
border: 0.3px solid rgb(179, 172, 172);
outline: none;
padding: 15px 20px;
font-size: 16px;
} }
.input-item form>input { .input-item form>input {
padding: .3rem 1rem;
border: .5px solid black;
background-color: white;
width: 70%; width: 70%;
border-radius: 2px; border-radius: 5px;
margin-inline: 20px;
box-shadow: inset rgb(173, 172, 172) 0px 0px 11px -5px;
} }
.input-item form>button { .input-item form>button {
border: none; display: inline;
padding: .4rem .6rem;
width: 20%;
color: white;
border-radius: 3px; border-radius: 3px;
background-color: black; width: 20%;
margin-inline-start: 10%; }
box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
font-weight: 600; .item .actions .delete-img {
cursor: pointer;
}
.item.item:nth-last-child(-n+1) {
border-bottom: none;
}
.alert {
font-size: large;
text-align: center;
padding: 1rem;
} }
\ No newline at end of file
src/App.tsx
import './App.css' import './App.css'
import Todo from './Components/Todo' import Todo from './Pages/Todo'
import Todos from './Context Api/Todos' import Todos from './Context Api/Todos'
function App() { function App() {
...@@ -8,7 +8,9 @@ function App() { ...@@ -8,7 +8,9 @@ function App() {
return ( return (
<> <>
<Todos> <Todos>
<Todo /> <div>
<Todo />
</div>
</Todos> </Todos>
</> </>
) )
......
src/Components/TodoList/Item.tsx
import DeleteIcon from "/src/assets/trash-alt-svgrepo-com.svg";
import WrongIcon from "/src/assets/wrong-svgrepo-com.svg"; import WrongIcon from "/src/assets/wrong-svgrepo-com.svg";
import TickIcon from "/src/assets/tick-circle-svgrepo-com.svg"; import TickIcon from "/src/assets/tick-circle-svgrepo-com.svg";
import { todo } from '../../types.dt' import { todo } from '../../types.dt'
import { useContext } from "react";
import { Provider } from "../../Context Api/Todos";
interface item extends todo { interface item extends todo {
index: Number, index: Number,
handleDelete?: () => void handleDelete?: () => void
handleUpdate: () => void handleUpdate: () => void
} }
const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => { const Item = ({ name, index, completed, id, handleDelete, handleUpdate }: item) => {
const handleClick = (e: React.ChangeEvent<HTMLImageElement>) => { const handleClick = (e: React.ChangeEvent<HTMLImageElement>) => {
// console.log(index) // console.log(index)
handleDelete({ index }) handleDelete({ id })
} }
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
handleUpdate({ name: e.target.value, index }) handleUpdate({ name: e.target.value, index })
...@@ -21,18 +18,19 @@ const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => { ...@@ -21,18 +18,19 @@ const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => {
console.log("handletick") console.log("handletick")
handleUpdate({ index }) handleUpdate({ index })
} }
console.log(name)
return ( return (
<div className="item"> <div className="item">
<div className='item-content'> <div className='item-content'>
<input type='checkbox' id={`item-${index}`} defaultChecked={completed} onChange={handleTick} /> <input type='checkbox' id={`item-${index}`} defaultChecked={completed} onChange={handleTick} />
<input className="todo-name" defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} /> <input className={`${completed && "strike"}`} readOnly={completed} defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} />
</div> </div>
<div className='actions'> <div className='actions'>
{ {
!completed ? ( !completed ? (
<> <>
<img src={DeleteIcon} alt="delete" onClick={handleClick} />
<img src={WrongIcon} alt="Not Done" /> <img src={WrongIcon} alt="Not Done" onClick={handleClick} className="delete-img" />
</> </>
) : ( ) : (
......
src/Components/TodoList/List.tsx
...@@ -3,16 +3,20 @@ import { todo } from '../../types.dt' ...@@ -3,16 +3,20 @@ import { todo } from '../../types.dt'
import Item from './Item' import Item from './Item'
const List = ({ Todo, handleDelete, handleUpdate }: { Todo: todo[], handleDelete: () => void, handleUpdate: () => void }) => { const List = ({ Todo, handleDelete, handleUpdate }: { Todo: todo[], handleDelete: () => void, handleUpdate: () => void }) => {
console.log(Todo)
return ( return (
<> <div className='wrapper-list'>
{
Todo.length === 0 && <h1 className='alert'>Nothing in this todo</h1>
}
{ {
Todo.map((item, index) => { Todo.map((item, index) => {
return ( return (
<Item {...item} index={index} key={index} handleDelete={handleDelete} handleUpdate={handleUpdate} /> <Item {...item} index={index} key={item.id} handleDelete={handleDelete} handleUpdate={handleUpdate} />
) )
}) })
} }
</> </div>
) )
} }
......
src/Context Api/Todos.tsx
...@@ -8,8 +8,10 @@ const Todos = ({ children }: { ...@@ -8,8 +8,10 @@ const Todos = ({ children }: {
switch (action.type) { switch (action.type) {
case 'Create': case 'Create':
// console.log(action) // console.log(action)
const set = new Set([...state, { id: state.length + 1, name: action.name, completed: false }]) const set = new Set([...state, { id: state.length + 1, name: action.name, completed: false }])
const newstate = Array.from(set) const newstate = Array.from(set)
console.log(newstate)
return newstate; return newstate;
case "Update": case "Update":
if (action.name) { if (action.name) {
...@@ -21,9 +23,10 @@ const Todos = ({ children }: { ...@@ -21,9 +23,10 @@ const Todos = ({ children }: {
} }
return [...state]; return [...state];
case "Delete": case "Delete":
return state.filter((data, i) => { console.log(action.index)
return action.index !== i return [...state.filter((data, i) => {
}) return action.id != data.id
})]
default: default:
return state; return state;
} }
......
src/Components/Todo.tsx → src/Pages/Todo.tsx
import React, { useContext, useEffect, useState } from 'react' import React, { useContext, useEffect, useState } from 'react'
import { todo } from '../types.dt' import { todo } from '../types.dt'
import TodoCount from './TodoCount' import TodoCount from '../Components/TodoCount'
import List from './TodoList/List' import List from '../Components/TodoList/List'
import { Provider } from '../Context Api/Todos' import { Provider } from '../Context Api/Todos'
import TodoCreate from './TodoCreate' import TodoCreate from '../Components/TodoCreate'
const Todo = () => { const Todo = () => {
const [Todos, setTodos] = useState<todo[]>([]) const [Todos, setTodos] = useState<todo[]>([])
const { state, handleCreate, handleDelete, handleUpdate } = useContext(Provider) const { state, handleCreate, handleDelete, handleUpdate } = useContext(Provider)
......
src/assets/tick-circle-svgrepo-com.svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="#000000"/><path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#000000"/></svg> <path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#292D32"/>
\ No newline at end of file <path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="white"/>
</svg>
\ No newline at end of file
src/assets/wrong-svgrepo-com.svg
<svg fill="gray" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> viewBox="0 0 511.76 511.76" xml:space="preserve">
<svg viewBox="0 0 1024 1024" fill="#000000" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M332 663.2c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l349.6-356c9.6-9.6 9.6-25.6 0-35.2s-25.6-9.6-35.2 0L332 663.2z" fill="" /><path d="M681.6 698.4c9.6 9.6 25.6 9.6 35.2 0s9.6-25.6 0-35.2L367.2 307.2c-9.6-9.6-25.6-9.6-35.2 0s-9.6 25.6 0 35.2l349.6 356z" fill="" /><path d="M516.8 1014.4c-277.6 0-503.2-225.6-503.2-503.2S239.2 7.2 516.8 7.2s503.2 225.6 503.2 503.2-225.6 504-503.2 504z m0-959.2c-251.2 0-455.2 204.8-455.2 456s204 455.2 455.2 455.2 455.2-204 455.2-455.2-204-456-455.2-456z" fill="" /></svg> <g>
\ No newline at end of file <g>
<path d="M436.896,74.869c-99.84-99.819-262.208-99.819-362.048,0c-99.797,99.819-99.797,262.229,0,362.048
c49.92,49.899,115.477,74.837,181.035,74.837s131.093-24.939,181.013-74.837C536.715,337.099,536.715,174.688,436.896,74.869z
M361.461,331.317c8.341,8.341,8.341,21.824,0,30.165c-4.16,4.16-9.621,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251
l-75.413-75.435l-75.392,75.413c-4.181,4.16-9.643,6.251-15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251
c-8.341-8.341-8.341-21.845,0-30.165l75.392-75.413l-75.413-75.413c-8.341-8.341-8.341-21.845,0-30.165
c8.32-8.341,21.824-8.341,30.165,0l75.413,75.413l75.413-75.413c8.341-8.341,21.824-8.341,30.165,0
c8.341,8.32,8.341,21.824,0,30.165l-75.413,75.413L361.461,331.317z"/>
</g>
</g>
</svg>
\ 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