Todo App with feature Add, Delete and Mark as Complete

Nemesis Blog

·

Follow

2 min read

·

3 days ago

--

Share

Prerequisite

1. Jotai

Installation

npm install jotai

Build UI

• Create new file inside file /todo/page.tsx

import TodoList from "./client";

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <TodoList />
    </main>
  );
}

• Create Client component for todo list inside file /todo/client.tsx

"use client";

import { useState } from "react";

export default function TodoList() {
  const todos = [{
    id: 1,
    text: "Todo 1"
  }];
  
  const [text, setText] = useState("");

  const addTodo = () => {};

  const toggleTodo = (id: number) => {};

  const deleteTodo = (id: number) => {};

  return (
    <div className="max-w-md mx-auto p-4 border border-white/20 rounded-lg shadow-lg bg-white/10">
      <h1 className="text-2xl font-bold mb-4">Todo</h1>

      <div className="flex gap-2">
        <input
          className="border p-2 flex-1…