Scribd
Upload
28 views

Pract 14 Code

Uploaded by

kambliakshay22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Pract 14 Code

Uploaded by

kambliakshay22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

IP : Experiment 14

Aim : To install React Hook & use the Hooks as such usestate, useEffect and
useContext in your basic program.

App.jsx

import React, { useState, useEffect, createContext, useContext } from


"react"
import { PlusCircle, CheckCircle, Circle, Trash2 } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from
"@/components/ui/card"

const TodoContext = createContext(null)

export default function TodoList() {


const TodoProvider = ({ children }) => {
const [todos, setTodos] = useState([])
const [newTodo, setNewTodo] = useState("")

useEffect(() => {
console.log("Current todos:", todos)
}, [todos])

const addTodo = () => {


if (newTodo.trim() === "") return
setTodos([...todos, { text: newTodo, completed: false }])
setNewTodo("")
}

const toggleTodo = (index) => {


const updatedTodos = todos.map((todo, i) =>
i === index ? { ...todo, completed: !todo.completed } : todo
)
setTodos(updatedTodos)
}

const removeTodo = (index) => {


const updatedTodos = todos.filter((_, i) => i !== index)
setTodos(updatedTodos)
}

return (
<TodoContext.Provider
value={{ todos, newTodo, setNewTodo, addTodo, toggleTodo,
removeTodo }}
>
{children}
</TodoContext.Provider>
)
}

const TodoListContent = () => {


const { todos, newTodo, setNewTodo, addTodo, toggleTodo,
removeTodo } = useContext(TodoContext)

return (
<div className="flex items-center justify-center min-h-screen
bg-gradient-to-r from-blue-100 to-purple-100 p-4">
<Card className="w-full max-w-md shadow-xl">
<CardHeader>
<CardTitle className="text-2xl font-bold text-center
text-gray-800">Todo List</CardTitle>
</CardHeader>
<CardContent>
<div className="flex space-x-2 mb-4">
<Input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="Add a new task"
className="flex-grow"
onKeyPress={(e) => e.key === 'Enter' && addTodo()}
/>
<Button onClick={addTodo} className="bg-blue-500
hover:bg-blue-600">
<PlusCircle className="w-5 h-5" />
</Button>
</div>
<ul className="space-y-2">
{todos.map((todo, index) => (
<li
key={index}
className={`flex items-center justify-between p-3 rounded-lg
transition-all duration-300 ${
todo.completed ? "bg-green-100" : "bg-white"
}`}
>
<div className="flex items-center space-x-3">
<button onClick={() => toggleTodo(index)}
className="focus:outline-none">
{todo.completed ? (
<CheckCircle className="w-5 h-5 text-green-500" />
):(
<Circle className="w-5 h-5 text-gray-400" />
)}
</button>
<span className={`${todo.completed ? "line-through
text-gray-500" : "text-gray-800"}`}>
{todo.text}
</span>
</div>
<button
onClick={() => removeTodo(index)}
className="text-red-500 hover:text-red-600
focus:outline-none"
>
<Trash2 className="w-5 h-5" />
</button>
</li>
))}
</ul>
</CardContent>
</Card>
</div>
)
}

return (
<TodoProvider>
<TodoListContent />
</TodoProvider>
)
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy