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 @@
"version": "0.0.0",
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-icons": "^5.5.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
......@@ -3159,6 +3160,15 @@
"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": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
......
todo/package.json
......@@ -11,7 +11,8 @@
},
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-icons": "^5.5.0"
},
"devDependencies": {
"@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{
height: 2rem;
width: 20rem;
/* h2,
ul,
li,
form,
.merge {
margin: 0;
padding: 0;
}
input,
button {
height: 2rem;
max-width: 18.5rem;
box-sizing: border-box;
}
.input .button button{
height: 2rem;
width: 5rem;
text-align: center;
border: 2px solid black;
padding: 2px;
button {
height: 2rem;
text-align: center;
padding: 2px;
}
.button{
margin-top: 2rem;
.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;
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;
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;
min-width: 340px;
.task {
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;
}
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 {
width: 100%;
box-shadow: 0 1px rgb(120, 120, 120);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
align-items: center;
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 './Input.css'
import React, { createContext, useState } from 'react';
import './Input.css';
import { MdCancel } from "react-icons/md";
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 (
<MyTask.Provider value={{store,setStore}}>
<> <ul>
{store.map((task,index)=>(
<li key={index}><span>{task}</span>
<button className='delete' onClick={()=>Delete(index)}>Delete</button>
<MyTask.Provider value={{ store, setStore }}>
<>
<Header />
<ul>
{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>
))}
</ul>
<form>
<div className='input'>
<input type='text' placeholder='Enter Items' value={task} onChange={Change}/>
</div></form>
<div className='button'>
<button onClick={Add} >Submit</button>
</div>
<Header/>
</>
</MyTask.Provider>
)
}
))}
</ul>
<form onSubmit={(e) => e.preventDefault()}>
<div className="merge">
<input
type="text"
className="input"
placeholder="Enter Items"
value={task}
onChange={Change}
/>
<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'
export const Header = () => {
const {store}=useContext(MyTask);
console.log('store:',store)
return (
<header>
<header className='head'>
<h2>You have {store.length} Todos </h2>
</header>
)
......
todo/src/Main/Main.css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #ffffff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-image: radial-gradient(#ccc 0.5px, transparent 1px);
background-size: 10px 10px;
}
.container{
min-height:50svh;
width: 100%;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
box-shadow: 0 1px 2px black;
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.wrapper {
background-color: #ffffff;
width: 320px;
padding: 20px;
.container {
width: 100vw;
max-width: 300px;
min-height: 20svh;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 1;
}
.head {
background-color: #ffffff;
width: 100%;
background-color: #ffffff;
font-weight: bold;
font-size: 18px;
box-shadow: 0 1px 2px black;
font-size: 13px;
box-shadow: 0 1px black;
color: #000;
text-align: center;
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 { Header } from '../Header/Header'
import { Input } from '../Components/Input'
import './Main.css'
export const Main = () => {
return (
<>
<div className='container'>
<header className='head'>
<Header/>
</header>
<div className='wrapper'>
<Input/>
</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