This project is built on JavaScript
, Tailwind
, React
and React-Redux
.It is responsive for different devices.
vite@latest
npm install
npm install -D tailwindcss
npx tailwindcss init
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
npm i react-redux
- Add new todo.
- Update existing todo.
- Save todo in local Storage.
- Delete todo from a list.
- Toggle an existing todo.
import {TodoContext, Todoprovider, useTodo } from './TodoContext'
export {
TodoContext,
Todoprovider,
useTodo
}
import {createContext, useContext} from "react";
export const TodoContext = createContext({
todos : [
{
id : 1,
todo : "Todo msg",
completed : false,
},
],
addTodo : (todo) => {},
updatedTodo : (id, todo) => {},
deleteTodo : (id) => {},
toggleComplete : (id) => {}
})
export const useTodo = () => {
return useContext(TodoContext)
}
export const Todoprovider = TodoContext.Provider
import { useState } from 'react'
import { Todoprovider } from './contexts'
import { useEffect } from 'react'
function App() {
const [todos, setTodos] = useState([])
const addTodo = (todo) => {
setTodos((prev) => [{id: Date.now(),...todo}, ...prev])
}
const updatedTodo = (id, todo) => {
setTodos((prev) => prev.map((prevTodo) => (prevTodo.id === id ? todo : prevTodo)))
}
const deleteTodo = (id) => {
setTodos((prev) => prev.filter((todo) => todo.id !== id))
}
const toggleComplete = (id) => {
setTodos((prev) => prev.map((prevTodo) => prevTodo === id ? { ...prevTodo, completed : !prevTodo.completed} : prevTodo))
}
useEffect(() => {
const todos = JSON.parse(localStorage.getItem("todos"))
if(todos && todos.length > 0){
setTodos(todos)
}
},[])
useEffect( () => {
localStorage.setItem("todos", JSON.stringify(todos))
}, [todos])
return (
<Todoprovider value = {{todos, addTodo, updatedTodo, deleteTodo, toggleComplete}}>
<div className = "bg-[#172842] min-h-screen py-8">
<div className = "w-full max-w-2xl mx-auto shadow-md rounded-lg px-4 py-3 text-white">
<h1 className = "text-2xl font-bold text-center mb-8 mt-2">Manage Your Todos</h1>
<div className = "mb-4">
{/* Todo form goes here */}
</div>
<div className = "flex flex-wrap gap-y-3">
{/*Loop and Add TodoItem here */}
</div>
</div>
</div>
</Todoprovider>
)
}
export default App