"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "React is a popular JavaScript library for building interactive user interfaces. Creating a todo app teaches you how to structure components, manage state, and handle user input. These are all essential skills for working with React." }), "\n", _jsxs(_components.p, { children: ["Let’s jump into it and see how to set up our project. This requires you to have a basic understanding of reactjs and its JSX syntax. ", _jsx(_components.a, { href: "https://programmingly.dev/the-fundamentals-of-reactjs-a-rich-understanding-of-its-basics", children: "Learn the basics of react" }), " & ", _jsx(_components.a, { href: "https://programmingly.dev/everything-about-jsx-syntax-and-its-basics-a-quick-guide", children: "JSX syntax in detail" }), " here. Make sure that you’re comfortable with react functional components because this is now standard and we’ll use functional components in our react todo app."] }), "\n", _jsx(_components.h3, { children: "Project Goal" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Build a to-do app where users can add tasks" }), "\n", _jsx(_components.li, { children: "mark them as complete" }), "\n", _jsx(_components.li, { children: "and delete tasks." }), "\n"] }), "\n", _jsx(_components.h3, { children: "Prerequisites" }), "\n", _jsx(_components.p, { children: "Basic knowledge of Reactjs is required to build this app." }), "\n", _jsx(_components.h2, { children: "1) Setting Up the Development Environment" }), "\n", _jsxs(_components.p, { children: ["To get started, make sure you have ", _jsx(_components.a, { href: "https://nodejs.org/", children: "Node.js" }), " installed on your machine. Node.js includes npm (Node Package Manager), which allows you to install libraries and tools like React."] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Initialize a New React Project by running the below command In your terminal, run:" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " create" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " vite@latest" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-react-app" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --template" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " react" })] }) }) }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Navigate to Your Project Directory" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: "cd" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-react-app" })] }) }) }) }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Start the Development Server" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " run" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " dev" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["Your project should now be up and running on ", _jsx(_components.code, { children: "http://localhost:5173" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why we are not using create-react-app command, but vite?" }), " Because the app installed using create-react-app (webpack) is too slow and lacks many features that Vite provides. You can ", _jsx(_components.a, { href: "https://programmingly.dev/building-applications-with-create-react-app-vs-vite-which-one-is-better", children: "check the complete head-to-head comparison of both vite & webpack (using create-react-app)" }), "."] }), "\n", _jsx(_components.h2, { children: "2) Creating the App Structure" }), "\n", _jsx(_components.p, { children: "In React, our application is divided into smaller re-useable components. For our Todo App, we need to create these components." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "App Component:" }), " The main component that houses the entire app."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ToDoList Component:" }), " A container for our list of to-dos."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ToDoItem Component:" }), " Represents each individual to-do item."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ToDoForm Component:" }), " A form for adding new to-dos."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "3) Building the To-Do Components" }), "\n", _jsx(_components.p, { children: "Let’s start building our Todo components" }), "\n", _jsxs(_components.h3, { children: ["3.1) App Component (", _jsx(_components.code, { children: "app.jsx" }), ")"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "app.jsx" }), " servers as the main component that holds the state of the to-do list."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React, { useState } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoList " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " './components/todo-list'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoForm " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " './components/todo-form'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " App" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "todos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setTodos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([]);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " addTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "text" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setTodos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "todos, { text, completed: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }]);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " toggleTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " newTodos" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "todos];" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " newTodos[index].completed " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " !" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "newTodos[index].completed;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setTodos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(newTodos);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " deleteTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " newTodos" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "todos];" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " newTodos." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "splice" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index, " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setTodos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(newTodos);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"todo-app\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">React To-Do App" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ToDoForm" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " addTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{addTodo} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ToDoList" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " todos" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{todos} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "toggleTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{toggleTodo} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "deleteTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{deleteTodo} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " App; " })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3.2) ToDoForm Component" }), "\n", _jsx(_components.p, { children: "The form component allows users to add a new todo." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React, { useState } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ToDoForm" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "addTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "value" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "e" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " e." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "preventDefault" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "value) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " addTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(value);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "form" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onSubmit" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleSubmit}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"text\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{value}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "e" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setValue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(e.target.value)}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Add a new task\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"submit\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Add" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoForm;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3.3) ToDoList Component" }), "\n", _jsxs(_components.p, { children: ["The list component will render each to-do item, which takes all todo’s from ", _jsx(_components.code, { children: "app.jsx" }), " component in the form of props."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoItem " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./todo-item\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ToDoList" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "toggleTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "deleteTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {todos." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ToDoItem" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{index}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " index" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{index}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " todo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{todo}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " toggleTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{toggleTodo}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " deleteTodo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{deleteTodo}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoList; " })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3.4) TodoItem Component" }), "\n", _jsx(_components.p, { children: "Each to-do item will have a checkbox to mark it as complete and a delete button." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ToDoItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "toggleTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "deleteTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"checkbox\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " checked" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{todo.completed}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " toggleTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index)}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ textDecoration: todo.completed " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'line-through'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " ''" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {todo.text}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " deleteTodo" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index)}>Delete" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ToDoItem; " })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3.5) Styling the To-Do App" }), "\n", _jsxs(_components.p, { children: ["You can add some simple CSS to enhance the app’s appearance. Create a ", _jsx(_components.code, { children: "main.css" }), " file in the ", _jsx(_components.code, { children: "src" }), " folder and add the following:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-family" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Arial" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "sans-serif" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "flex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " justify-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " align-items" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " padding" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "50" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ".todo-app" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " width" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "400" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "flex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " flex-direction" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "column" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " justify-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " align-items" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#333" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " text-align" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " list-style-type" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "none" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " width" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "100" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "%" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#f1f1f1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border-radius" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " padding" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 20" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " margin-top" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "20" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " margin" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "flex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " align-items" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " justify-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "space-between" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " >" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: " div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "flex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " justify-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " align-items" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "center" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " gap" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "10" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "[" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"text\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " padding" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " margin-right" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "10" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " margin-left" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "10" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " padding" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "5" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 10" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#007bff" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "white" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " border" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "none" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " cursor" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "pointer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ":hover" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#0056b3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.h3, { children: "3.6) Testing Your Todo App" }), "\n", _jsx(_components.p, { children: "After implementing your components, test your todo app to ensure everything functions correctly. Verify that you can:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Add new todos" }), "\n", _jsx(_components.li, { children: "Mark tasks as completed." }), "\n", _jsx(_components.li, { children: "Delete tasks." }), "\n"] }), "\n", _jsx(_components.p, { children: "You can test the final working example below:" }), "\n", _jsx(_components.h3, { children: "Final Thoughts" }), "\n", _jsx(_components.p, { children: "Congratulations on building your first React todo app! This project has taught you essential concepts like component structure, state management, and React hooks." }), "\n", _jsx(_components.p, { children: "Consider adding more features, such as:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Persistent Storage:" }), " Use ", _jsx(_components.code, { children: "localStorage" }), " to save tasks, so they remain even after refreshing the page."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Edit Task:" }), " Allow users to edit an existing to-do."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Filter Tasks:" }), " Add options to filter tasks by status (All, Completed, Pending)."] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };