Skip to content

T
Todos-uptd
Commit 71920d0b by Sujeeth AV
Options

Updated components, styles, and added new Checkbox component

parent 6f351ccd
Showing with 458 additions and 84 deletions
todo/package-lock.json
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-icons": "^5.5.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.25.0", "@eslint/js": "^9.25.0",
...@@ -3159,6 +3160,15 @@ ...@@ -3159,6 +3160,15 @@
"react": "^19.1.0" "react": "^19.1.0"
} }
}, },
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
......
todo/package.json
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
}, },
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-icons": "^5.5.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.25.0", "@eslint/js": "^9.25.0",
......
todo/src/Components/Checkbox.jsx 0 → 100644
import React from 'react';
export const Checkbox = ({ checked, onChange }) => {
const handleChange = (e) => {
console.log('Checkbox clicked, checked:', e.target.checked);
if (onChange) {
onChange(e);
}
};
return (
<input
type="checkbox"
checked={checked}
onChange={handleChange}
/>
);
};
\ No newline at end of file
todo/src/Components/Input.css
input{ /* h2,
height: 2rem; ul,
width: 20rem; li,
form,
.merge {
margin: 0;
padding: 0;
}
input,
button {
height: 2rem;
max-width: 18.5rem;
box-sizing: border-box;
} }
.input .button button{
height: 2rem; button {
width: 5rem; height: 2rem;
text-align: center; text-align: center;
border: 2px solid black; padding: 2px;
padding: 2px;
} }
.button{ .delete {
margin-top: 2rem; border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
max-width: 1.5rem;
padding: 0;
background-color: #fff;
border: none;
transition: background-color 0.2s ease;
} }
ul{ .delete svg {
height: 1.5rem !important;
width: 1.5rem !important;
color: #ccc;
}
ul {
list-style: none; list-style: none;
word-break: break-word;
width: 100%;
max-width: 340px;
padding: 0;
margin: 0;
}
li {
width: 100%;
box-shadow: 0 1px rgb(120, 120, 120);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0;
}
.merge {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 1rem;
}
[contenteditable]:focus {
outline: none;
border: none;
}
span[contenteditable] {
border-bottom: 1px dashed #ccc;
cursor: text;
}
.todo {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem;
box-shadow: 0 1px rgb(120, 120, 120);
}
.check {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
overflow-wrap: anywhere;
}
.task {
cursor: pointer;
outline: none;
width: 100%;
}
li.todo {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem;
box-shadow: 0 1px rgb(120, 120, 120);
}
.check {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
word-break: break-words; .task {
min-width: 340px; cursor: pointer;
outline: none;
width: auto;
}
.delete {
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
max-width: 1.5rem;
padding: 0;
background-color: #fff;
transition: background-color 0.2s ease;
}
@media (min-width: 720px) {
input,
button {
width: 14.5rem;
width: 100vw;
}
} */
h2,
ul,
li,
form,
.merge {
margin: 0;
padding: 0; padding: 0;
} }
input,
button {
height: 2rem;
max-width: 18.5rem;
box-sizing: border-box;
}
button {
height: 2rem;
text-align: center;
padding: 2px;
}
.delete {
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
max-width: 1.5rem;
padding: 0;
background-color: #fff;
transition: background-color 0.2s ease;
}
.delete svg {
height: 1.5rem !important;
width: 1.5rem !important;
color: #ccc;
}
ul {
list-style: none;
word-break: break-word;
width: 100%;
max-width: 340px;
padding: 0;
margin: 0;
}
li { li {
width: 100%; width: 100%;
box-shadow: 0 1px rgb(120, 120, 120); box-shadow: 0 1px rgb(120, 120, 120);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-top: 1.5rem; padding: 0.25rem 0;
max-height: 80vh;
} }
.merge {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 1rem;
}
[contenteditable]:focus {
outline: none;
border: none;
}
span[contenteditable] {
border-bottom: 1px dashed #ccc;
cursor: text;
}
.todo {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem;
box-shadow: 0 1px rgb(120, 120, 120);
}
.check {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.task {
cursor: pointer;
outline: none;
width: auto;
}
@media (min-width: 720px) {
input,
button {
width: 14.5rem;
width: 100vw;
}
.check input {
height: 1.5rem;
width: 1.5rem;
}
}
todo/src/Components/Input.jsx
import React, { createContext, useState } from 'react' import React, { createContext, useState } from 'react';
import './Input.css' import './Input.css';
import { MdCancel } from "react-icons/md";
import { Header } from '../Header/Header'; import { Header } from '../Header/Header';
import { Checkbox } from './Checkbox';
export const MyTask = createContext();
export const Input = () => {
const [task, setTask] = useState("");
const [store, setStore] = useState([]);
const [editIndex, setEditIndex] = useState(null);
const [editedTask, setEditedTask] = useState("");
const Change = (e) => {
setTask(e.target.value);
};
const Add = () => {
if (task.trim() === '') return;
setStore([...store, task]);
setTask("");
};
const Delete = (id) => {
const updated = store.filter((_, index) => index !== id);
setStore(updated);
};
const startEdit = (index) => {
setEditIndex(index);
setEditedTask(store[index]);
};
const saveEdit = (index) => {
if (editedTask.trim() === '') return;
const updated = [...store];
updated[index] = editedTask;
setStore(updated);
setEditIndex(null);
};
export const MyTask=createContext();
export const Input = () => {
const[task,setTask]=useState("");
const[store,setStore]=useState([]);
const Change=(e)=>{
setTask(e.target.value);
}
const Add=()=>{
if(task.trim() ==='')return;
setStore([...store,task]);
setTask("");
}
const Delete=(id)=>{
const Deleted=store.filter((_,index)=>id !==index);
setStore(Deleted);
}
return ( return (
<MyTask.Provider value={{store,setStore}}> <MyTask.Provider value={{ store, setStore }}>
<> <ul> <>
{store.map((task,index)=>( <Header />
<li key={index}><span>{task}</span> <ul>
<button className='delete' onClick={()=>Delete(index)}>Delete</button> {store.map((item, index) => (
<li key={index} className="todo">
<div className="check">
<Checkbox />
{editIndex === index ? (
<span
contentEditable
suppressContentEditableWarning
autoFocus
onBlur={() => saveEdit(index)}
onInput={(e) => setEditedTask(e.currentTarget.textContent)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.currentTarget.blur();
}
}}
className="task"
>
{editedTask}
</span>
) : (
<span className="task" onClick={() => startEdit(index)}>{item}</span>
)}
</div>
<button className="delete" onClick={() => Delete(index)}>
<MdCancel />
</button>
</li> </li>
))}
))} </ul>
</ul>
<form> <form onSubmit={(e) => e.preventDefault()}>
<div className='input'> <div className="merge">
<input type='text' placeholder='Enter Items' value={task} onChange={Change}/> <input
</div></form> type="text"
<div className='button'> className="input"
<button onClick={Add} >Submit</button> placeholder="Enter Items"
</div> value={task}
<Header/> onChange={Change}
</> />
</MyTask.Provider> <button onClick={Add} className="button">
) Submit
} </button>
</div>
</form>
</>
</MyTask.Provider>
);
};
todo/src/Header/Header.jsx
...@@ -4,8 +4,9 @@ import { MyTask } from '../Components/Input' ...@@ -4,8 +4,9 @@ import { MyTask } from '../Components/Input'
export const Header = () => { export const Header = () => {
const {store}=useContext(MyTask); const {store}=useContext(MyTask);
console.log('store:',store)
return ( return (
<header> <header className='head'>
<h2>You have {store.length} Todos </h2> <h2>You have {store.length} Todos </h2>
</header> </header>
) )
......
todo/src/Main/Main.css
* {
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #ffffff; background: #ffffff;
min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; background-image: radial-gradient(#ccc 0.5px, transparent 1px);
width: 100%; background-size: 10px 10px;
} }
.container{
min-height:50svh; .container {
width: 100%; width: 100vw;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ max-width: 300px;
box-shadow: 0 1px 2px black; min-height: 20svh;
display: flex; margin: 0 auto;
flex-direction: column;
flex-shrink: 1;
}
.wrapper {
background-color: #ffffff;
width: 320px;
padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; flex-shrink: 1;
align-items: center;
} }
.head { .head {
background-color: #ffffff; width: 100%;
background-color: #ffffff;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 13px;
box-shadow: 0 1px 2px black; box-shadow: 0 1px black;
color: #000; color: #000;
text-align: center; text-align: center;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0;
}
.wrapper {
width: 100%;
max-width: 300px;
margin: 0 auto;
background-color: #ffffff;
display: flex;
padding: 2px;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 2px black;
} }
input {
max-width: 18.5rem;
padding: 0.4rem;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.button button {
height: 1rem;
width: 18.5rem;
text-align: center;
border: 2px solid rgb(120, 120, 120);
padding: 1px;
cursor: pointer;
background-color: #f0f0f0;
}
ul {
list-style: none;
word-break: break-word;
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
li {
width: 100%;
box-shadow: 0 1px rgb(120, 120, 120);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
}
.merge {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.wrapper {
display: flex;
justify-content: space-between;
max-width: 650px;
min-height: 15svh;
align-items: unset;
padding: 1rem;
}
.container {
max-width: 750px;
min-height: 25svh;
}
input {
width: 75%;
max-width: unset;
margin-top: 0.5rem;
}
.check input {
width: 10%;
}
button {
height: 2rem;
margin-top: 0.47rem;
width: 15%;
}
.merge {
flex-direction: row;
width: 98.5%;
}
.check {
gap: 0;
}
}
todo/src/Main/Main.jsx
import React from 'react' import React from 'react'
import { Header } from '../Header/Header'
import { Input } from '../Components/Input' import { Input } from '../Components/Input'
import './Main.css' import './Main.css'
export const Main = () => { export const Main = () => {
return ( return (
<> <>
<div className='container'> <div className='container'>
<header className='head'>
<Header/>
</header>
<div className='wrapper'> <div className='wrapper'>
<Input/> <Input/>
</div> </div>
......
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