To-Do List Application

Under guidance of

Shreya Banerjee

Java and Python Trainer

A
Project Report
Submitted In Partial Fulfilment Of The Requirements
For The Award Of the
Bachelor of Technology
Project Carried Out At

Ardent Computech Pvt Ltd (An ISO 9001: 2008 Certified)

Module #132, Ground Floor, SDF Building, GP Block, Sector V, Bidhannagar,
Kolkata, West Bengal, Kolkata - 700091

Submitted By
Bikram Karmakar
Sultan Salauddin
Nilash Das
Shahnwaz Khan
Sushma Shaw

Department of Computer Science & Engineering

Narula Institute of Technology
Agarpara, Kolkata-700109
West Bengal, India

1
 (Note: All entries of the proforma of approval should be filled up with appropriate and complete
information of approval in any respect will be summarily rejected.)
1. Name of the Student With Group: 1: Bikram Karmakar
2: Sultan Salauddin
3: Nilash Das
4:Shanwaz Khan
5. Sushma Shaw

2. Title of the Project: To-Do List Application

3. Name and Address of the Guide: Shreya Banerjee
Java and Python Trainer,Ground
Floor, SDF Building, GP Block,Sector
V, Bidhannagar, Kolkata, West Bengal,
Kolkata - 700091

4. Educational Qualification of the Guide: B.Tech*/ M.Tech

5. Working and Teaching experience of the Guide : ………Years

6. Software used in the Project: a. Visual Studio Code

1.
2.
3. Signature of the Guide
4. Date :
5. Name: Shreya Banerjee
Java and Python Trainer.
Signature of the Student Signature, Designation, Stamp of the
Date :17/02/2024 Project Proposal Evaluator
For the office use only

Approved Not Approved

2
 Project Responsibility Form

Serial No Name of Member Responsibility

1. Bikram Karmakar Project Leader, Coding,

Backend
Implementation.

2. Sultan Salauddin Coding, Frontend,

Backend

3. Nilash Das Frontend, Coding.

4. Shahnwaz Debugging,
khan System Design

5. Sushma Shaw Project

Documentation,
System Analysis.
 Self Certificate

This is to certify that the dissertation/project proposal entitled

“To-Do List Application” is done by us, is an Authentic work carried
out forthe partial fulfillment of the requirements forthe award of
the certificate of Bachelor of Technology under the guidance of
Shreya Banerjee. The matter embodied in this project work has
not been submitted earlier for award of any certificate to the best
of our knowledge and belief.

Name of the Student

 Bikram Karmakar
 Sultan Salauddin
 Nilash Das
 Shahnwaz Khan
 Sushma Shaw

Signature of the students

a.
b.
c.
d.
e.
 Certificate by Guide

This is to certify that this project entitled “To_Do List

Application ” submitted in partial fulfillment of the certificate of
Bachelor of Computer Application through Ardent Computech
Pvt Ltd, doneby the Group Members

 Bikram Karmakar
 Sultan Salauddin
 Nilash Das
 Shahnwaz Khan
 Sushma Shaw

is an authentic work carried out under my guidance & best of

our knowledge and belief..
a.
b.
c.
d.
e.

Signature of the students Signature of the Guide

Date :17/02/2024 Date :

5
 Certificate of Approval

This is to certify that this proposal of Minor project, entitled

“To-Do List Application” is a record of bona-fide work, carried
out by :
1. Bikram Karmakar , 2. Sultan Salauddin, 3. Nilash Das,
4.Shahnwaz Khan , 5.Sushma Shaw under my supervision and
guidance through the Ardent Computech Pvt Ltd. In my
opinion, the report in its present form is in partial fulfillment
of all the requirements, as specified by Narula Institute of
Technology as per regulations of the Ardent®. In fact, ithas
attained the standard, necessary for submission. To the best
of my knowledge, the results embodied in this report, are
original in nature and worthy of incorporation in the present
version of the report for Bachelor of Technology.

Guide/Supervisor

Shreya Banerjee
Java And Python Trainer
Ardent Computech Pvt Ltd (An ISO 9001:2008 Certified)
Module #132, Ground Floor, SDF Building, GP Block, Sector V,
Bidhannagar, Kolkata, West Bengal, Kolkata - 700091

External Examiner(s) Head of the Department

Department of Computer Science
Boral , W.B
(Affiliated to MAKAUT , WB)

6
 SL. NO. NAME OF THE TOPIC PAGE NO.

1 Company Profile 8

2 Introduction 9 - 11

2.A. Objective 10

2.B. Scope 11

3 System Analysis 12 - 22

3.A. Identification of Need 13

3.B. Feasibility Study 14

3.C. Work Flow 15

3.D. Study of the System 18

3.E. Input & Output 19

3.F. Software Requirements Specification (SRS) 20

3.G. Software Engineering Paradigm Applied 22

4 System Design 23 - 32

4.A. Data Flow Diagram 24

4.B. Sequence Diagram 27

4.C. Use-Case Diagram 29-32

5 UI snapshot 33 – 40

6 Conclusion 41
 1. ARDENT COMPUTECH PVT.LTD.
Ardent Computech Private Limited is an ISO 9001-2008 certified
Software Development Company in India. It has been operating
independently since 2003. It was recently merged with ARDENT
TECHNOLOGIES.
Ardent Technologies
ARDENT TECHNOLOGIES is a Company successfully providing its
services currently in UK, USA, Canada and India. The core line of
activity at ARDENT TECHNOLOGIES is to develop customized
application software covering the entire responsibility of
performing the initial system study, design, development,
implementation and training. It also deals with consultancy services
and Electronic Security systems. Its primary clientele includes
educational institutes, entertainment industries, resorts, theme
parks, service industry, telecom operators, media and other
business houses working in various capacities.
Ardent Collaborations
ARDENT COLLABORATIONS, the Research Training and Development
Department of ARDENT COMPUTECH PVT LTD is a professional
training Company offering IT enabled services & industrial trainings
for B-Tech, MCA, BCA, MSc and MBA fresher’s and experienced
developers/programmers in various platforms. Summer Training /
Winter Training / Industrial training will be provided for the
students of B.TECH, M.TECH, MBA and MCA only. Deserving
candidates may be awarded stipends, scholarships and other
benefits, depending on their performance and recommendations of
the mentors.
Associations
Ardent is an ISO 9001:2008 company.
It is affiliated to National Council of Vocational Training (NCVT),
Directorate General of Employment & Training (DGET), Ministry of
Labor & Employment, and Government of India.
 2 .INTRODUCTION

Welcome to our cutting-edge To-Do List platform, where

organization meets simplicity in the fast-paced world we live in
today. Designed to streamline your task management experience,
our platform is your ultimate companion in conquering your daily
agenda with ease.
With a sleek and intuitive interface, navigating through your tasks
has never been more effortless. Say goodbye to cluttered to-do lists
and hello to a visually appealing layout that prioritizes your
productivity. Whether you're juggling work projects, personal
errands, or planning your next big adventure, our system ensures
that everything is conveniently accessible at your fingertips.
Stay on top of your tasks with real-time updates and notifications,
keeping you informed of any changes or upcoming deadlines. Our
commitment to accessibility means that managing your to-do list is
a breeze, allowing you to focus on what truly matters without any
unnecessary complications.
Security is our top priority, and rest assured, your data is protected
through robust authentication measures. Plus, with secure online
syncing across devices, you can access your to-do list anytime,
anywhere, with peace of mind.
Experience the convenience and efficiency of task management like
never before with our innovative To-Do List platform. Say hello to a
more organized and productive you.

9
 2A.OBJECTIVE

The objective of the To-Do List project is to create a simple and efficient tool
for organizing tasks and managing time effectively. Through intuitive user
interfaces and customizable features, the project aims to provide users with a
seamless experience in prioritizing, tracking, and completing their tasks. The
To-Do list will allow users to create, edit, and delete tasks, set deadlines,
categorize tasks, and receive reminders. By offering both web and mobile
platforms, the project seeks to enhance productivity and reduce stress by
enabling users to stay organized and focused on their goals, whether personal
or professional, in a convenient and accessible manner.

10
 2.B.SCOPE
The scope of the To-Do List project encompasses the development
of both front-end and back-end systems, including user interfaces,
database management, and integration with notification services.
It involves designing intuitive user experiences that prioritize ease
of use and accessibility across multiple platforms, such as web
browsers and mobile devices. Additionally, the project includes
features such as task categorization, deadline setting, task
prioritization, and reminder functionalities. The scope also involves
implementing security measures to safeguard user data and
ensuring scalability to accommodate potential future expansion
and increased user demand. Testing and iterative refinement are
integral parts of the project to deliver a robust and reliable todo
list application..

11
 3.A.IDENTIFICATION OF NEED

The identification of the need for a To-do List project stems from the increasing
demands of modern life, characterized by busy schedules, multiple
responsibilities, and constant distractions. Individuals, professionals, and teams
often struggle to stay organized, prioritize tasks effectively, and manage their
time efficiently. Consequently, there arises a need for a streamlined tool that
can help users keep track of their tasks, set reminders, and allocate time
efficiently to accomplish their goals. Moreover, the prevalence of digital
platforms and mobile devices underscores the necessity for a flexible and
accessible solution that can seamlessly integrate into users' daily routines,
empowering them to enhance productivity and reduce stress.
 3.B.FEASIBILITY STUDY
A Feasibility Study is a comprehensive assessment conducted to
evaluate the practicality and viability of a proposed project or
business endeavor. This study aims to determine whether the project
is technically, financially, operationally, and economically feasible. It
involves an in-depth analysis of various factors, including market
conditions, technical requirements, legal considerations, and
financial resources.
During a Feasibility Study, potential risks and challenges
are identified, and potential solutions are explored. The study helps
stakeholders make informed decisions by providing insights into the
project's potential success or failure. Key components of a Feasibility
Study include a market analysis, technical requirements assessment,
financial projections, and risk assessment.
Ultimately, a well-conducted Feasibility Study serves as
a crucial foundation for decision-making, guiding stakeholders in
deciding whether to proceed with the project or explore alternative
options based on a thorough understanding of the associated
challenges and opportunities.

14
 3.C.WORKFLOW
This Document plays a vital role in the development life cycle (SDLC) as
it describes the complete requirements of the system. It is meant for
use by the developers and will be the basic during the testing phase.
Any changes made to the requirements in the future will have to go
through a formal change approval process.
The Waterfall Model was the first Process Model to be
introduced. It is also referred to as a linear-sequential life cycle model. It
is very simple to understand and use. In a waterfall model, each phase
must be completed before the next phase can begin and there is no
overlapping in the phases.
The waterfall model is the earliest SDLC approach that was used for
software development.
The waterfall Model illustrates the software development
process in a linear sequential flow; hence it is also referred to as a
linear-sequential life cycle model. This means that any phase in the
development process begins only if the previous phase is complete. In
the waterfall model phases do not overlap.
 Waterfall Model design :
The waterfall approach was the first SDLC Model to be used widely in
Software Engineering to ensure the success of the project. In “The
Waterfall” approach, the whole process of software development is
divided into separate phases. In the Waterfall model, typically, the
outcome of one phase acts as the input for the next phase sequentially.
 Iterative Waterfall Design :
 Definition: The Iterative Waterfall Model is a variation of the
traditional Waterfall model, which is a linear and sequential software
development methodology. In the Iterative Waterfall Model, the
development process is divided into small, manageable cycles,
allowing for the revisiting and refinement of phases before
progressing to the next stage. It combines the systematic structure of
the Waterfall model with the flexibility of iterative development.

15
The sequential phases in Iterative Waterfall model are:
 Requirement Gathering and analysis : All possible requirements of
the system to be developed are captured in this phase and
documented in a requirement specification doc.
 System Design : The requirement specifications from first phase are
studied in this phase and system design is prepared. System Design
helps in specifying hardware and system requirements and also helps
in defining overall system architecture.
 Implementation : With inputs from system design, the system is first
developed in small programs called units, which are integrated in the
next phase. Each unit is developed and tested for its functionality
which is referred to as Unit Testing.
 Integration and Testing : All the units developed in the
implementation phase are integrated into a system after testing of
each unit. Post integration the entire system is tested for any faults
and failures.
 Deployment of system: Once the functional and non functional
testing is done, the product is deployed in the customer environment
or released into the market.
 Maintenance: There are some issues which come up in the client
environment. To fix those issues patches are released. Also to
enhance the product some better versions are released.
Maintenance is done to deliver these changes in the customer
environment.
All these phases are cascaded to each other in which
progress is seen as flowing steadily downwards (like a waterfall) through
the phases. The next phase is started only after the defined set of goals
are achieved for previous phase and it is signed off, so the name
“Iterative Waterfall Model”. In this model phases do not overlap.
 Advantages :
1 . Flexibility : Iterations permit adjustments based on feedback.
2 . Early Delivery : Partial systems can be delivered incrementally.
3 . Risk Management : Identifying and addressing issues early in the
process .

16
 Disadvantages :
1. Increased Complexity : The iterative nature can make the process more
complex.
2. Potential for Scope Creep : Frequent iterations may lead to scope
changes.
3. Resource Intensive : Continuous revisiting of phases may demand
more resources.

 Applications :
The Iterative Waterfall Model is suitable for projects with evolving or
unclear requirements. It is commonly used in software development
projects where regular feedback and refinement are essential.
Additionally, it is applicable in scenarios where partial system
delivery is beneficial, allowing stakeholders to assess progress and
make adjustments.

17
 3.D.STUDY OF THE SYSTEM
Modules: The modules used in this software are as follows :

Login :
1 . User Login: Allows registered users to log in securely.

Signup :
1 . Register: Enables new users to create accounts..

Home :
1 . Home: This page is the main page where we can perform many Operations.

 Admin Interface :
1. Admin Login: Allows administrators to access privileged features and
manage user data.
2. User Database: Provides admin access to view and manage user accounts.
3. Task Database: Enables admins to view and manage tasks created by
users.

 User Interface:
1. Main Interface: The primary interface where users interact with their to-
do lists.
2. Input Field: Provides a space for users to input new tasks.
3. List Display: Displays the user's tasks in a list format for easy viewing.
4. Buttons: Interface elements for performing actions such as adding,
editing, and deleting tasks..

18
 3.E.INPUT AND OUTPUT
The main inputs , outputs and the major function the details are :

 INPUT :

1. User Input: Text entered by the user in the input field provided by the application.
2. User Actions: Interaction with the interface elements such as buttons for adding,
editing, or deleting tasks.
3. Admin Actions: Actions performed by administrators, such as logging in, managing
user accounts, and viewing task databases.

 OUTPUT :

1 Task List Display: The list of tasks entered by the user, displayed in the interface.
2 User Feedback: Messages or notifications provided to the user upon task addition,
deletion, or modification.
3 Admin Feedback: Messages or notifications provided to administrators upon
successful login, user account management, or task database operations.
4 Error Messages: Messages displayed to the user in case of input validation errors,
server errors, or other issues encountered during application usage

19
 3.F.SOFTWARE REQUIREMENT
SPECIFICATIONS
The To-Do List Application is aimed at providing users with a platform to
manage their tasks effectively. It will allow users to create, edit, prioritize, and
track tasks in a user-friendly interface..

Functional Requirements :
 User Authentication:
o The system shall provide users to log in securely.
 Task Management:
o Users shall be able to add new tasks to their to-do lists.
o Tasks shall have attributes such as title.
o Users shall be able to edit existing tasks to modify their details.
o Users shall be able to mark tasks as completed or delete them from their lists.
 Task Organization:
o Users shall be able to categorize tasks into different lists or projects for better
organization.
Non-Functional Requirements :
 Performance:
o The system shall be responsive and provide quick task management
functionality, even with a large number of tasks.
 Security:
o User authentication and data transmission shall be encrypted to ensure the
security of user data.
o The application shall implement measures to prevent unauthorized access or
tampering with user accounts and tasks.
 Reliability:
o The system shall be reliable and stable, with minimal downtime or disruptions
in service.
o Data backups shall be performed regularly to prevent data loss in case of
system failures.
 Scalability:
o The system architecture shall be scalable to accommodate a growing number
of users and tasks.
 o Performance shall not degrade significantly as the user base expands.
 User Experience:
o The application shall provide a seamless and intuitive user experience, with
clear navigation and minimal learning curve.

 Hardware Requirements :
1 . Computer has Intel I5 Processor
2 . 8 GB RAM
 Software Requirements :
3 . Windows 10 OS
. Visual Studio Code
SOFTWARE ENGINEERING PARADIGM APPLIED
Software paradigms refer to the methods and steps, which are taken while
designing the software. There are many methods proposed and are in work
today, but we need to see where in software engineering these paradigms stand.
These can be combined into various categories, though each of them is contained
in one another.

The programming paradigm is a subset of Software design paradigm which is

further a subset of the Software development paradigm.
There are two levels of reliability. The first is meeting the right requirements. A
careful and thorough systems study is needed to satisfy this aspect of reliability.
The second level of systems reliability involves the actual work delivered to the
user. At this level, the system’s reliability is interwoven with software engineering
and development.
There are three approaches to reliability.
1. Error avoidance: Prevents errors from occurring in software.
2. Error detection and correction: In this approach, errors are recognized
whenever they are encountered, and correcting the error by the effect of the
error of the system does not fail.
3. Error tolerance: In this approach, errors are recognized whenever they occur,
but enables the system to keep running through degraded performance or
Applying values that instruct the system to continue process.

22
23
 4.A.DATA FLOW DIAGRAM
A data flow diagram (DFD) is a graphical representation of the "flow"
of data through an information system, modeling its process aspects. A
DFD is often used as a preliminary step to create an overview of the
system, which can later be elaborated.
DFDs can also be used for the visualization of data processing
(structured design).
A DFD shows what kind of information will be input to and output from
the system, where the data will come from and go to, and where the
data will be stored. It does not show information about the timing of
the process or information about whether processes will operate in
sequence or in parallel (which is shown on a flowchart).
This context-level DFD is next "exploded", to produce a Level 1
DFD that shows some of the detail of the system being modeled. The
Level 1 DFD shows how the system is divided into sub-systems
(processes), each of which deals with one or more of the data flows to
or from an external agent, and which together provide all of the
functionality of the system as a whole. It also identifies internal data
stores that must be present for the system to do its job and shows the
flow of data between the various parts of the system.
Data flow diagrams are one of the three essential perspectives of the
structured-systems analysis and design method SSADM. The sponsor of
a project and the end users will need to be briefed and consulted
throughout all stages of a system's evolution. With a data flow
diagram, users can visualize how the system will operate, what the
system will accomplish, and how the system will be implemented. The
old system's dataflow diagrams can be drawn up and compared with
the new system’s dataflow diagrams to draw comparisons to
implement a more efficient system. Data flow diagrams can be used to
provide the end user with a physical idea of where the data they input
ultimately affects the structure of the whole system from order to
dispatch to report.

24
How any system is developed can be determined through a data flow diagram
model.
In the course of developing a set of leveled data flow diagrams, the
analyst/designer is forced to address how the system may be decomposed into
component sub-systems and to identify the transaction data in the data model.
Data flow diagrams can be used in both the Analysis and Design phase of the SDLC.
There are different notations to draw data flow diagrams. defining different visual
representations for processes, data stores, data flow, and external entities.

 DFD Notation :

 DFD EXAMPLE :

Steps to Construct Data Flow Diagram :-

Four Steps are generally used to construct a DFD.
 Process should be named and referred for easy reference. Each name should
be representative of the reference.
 The destination of flow is from top to bottom and from left to right.
 When a process is distributed into lower-level details they are numbered.
 The names of data stores, sources, and destinations are written in capital
letters.

25
Rules for constructing a Data Flow Diagram:-
 Arrows should not cross each other.
 Squares, Circles, and Files must bear a name.
 Decomposed data flow squares and circles can have the same names.
 Draw all data flow around the outside of the diagram.

CONTEXT DIAGRAM:

26
 4.B.SEQUENCE DIAGRAM
A Sequence diagram is an interaction diagram that shows how
processes operate with one another and what is their order. It is a
construct of a Message Sequence Chart. A sequence diagram shows
object interactions arranged in a time sequence. It depicts the objects
and classes involved in the scenario and the sequence of messages
exchanged between the objects needed to carry out the functionality
of the scenario. Sequence diagrams are typically associated with use
case realizations in the Logical View of the system under development.
Sequence diagrams are sometimes called event diagrams or event
scenarios.
A sequence diagram shows, as parallel vertical lines (lifelines),
different processes or objects that live simultaneously, and, as
horizontal arrows, the messages exchanged between them, in the
order in which they occur. This allows the specification of simple
runtime scenarios in a graphical manner.
A sequence diagram is the most common kind of interaction diagram,
which focuses on the message interchange between several lifelines.
A sequence diagram describes an interaction by focusing on the
sequence of messages that are exchanged, along with their
corresponding occurrence specifications on the lifelines.
The following nodes and edges are typically drawn in a UML sequence
diagram: lifeline, execution specification, message, fragment,
interaction, state invariant, continuation, and destruction occurrence.

27
Sequence Diagram Of To-Do List Application
 4.C.USE CASE DIAGRAM
A Use case diagram at its simplest is a representation of a user's
interaction with the system that shows the relationship between the user
and the different use cases in which the user is involved. A use case
diagram can identify the different types of users of a system and the
different use cases and will often be accompanied by other types of
diagrams as well.
So only static behavior is not sufficient to model a system rather dynamic
behavior is more important than static behavior. In UML there are five
diagrams available to model dynamic nature and a use case diagram is one
of them. Now as we have to discuss that the use case diagram is dynamic
in nature there should be some internal or external factors for making the
interaction.
These internal and external agents are known as actors. So use case
diagrams consist of actors, use cases, and their relationships. The diagram
is used to model the system/subsystem of an application. A single-use case
diagram captures a particular functionality of a system.
So to model the entire system numbers of use case diagrams are used.
The purpose of a use case diagram is to capture the dynamic aspect of a
system. But this definition is too generic to describe the purpose.
Because the other four diagrams (activity, sequence, collaboration, and
State chart) are also having the same purpose. So we will look into some
specific purpose that will distinguish it from the other four diagrams.
Use case diagrams are used to gather the requirements of a system
including internal and external influences. These requirements are mostly
design requirements. So when a system is analyzed to gather its
functionalities use cases are prepared and actors are identified.
Now when the initial task is complete use case diagrams are modelled to
present the outside view.
So in brief, the purposes of use case diagrams can be as follows:
 Used to gather requirements of a system.
 Used to get an outside view of a system.
 Identify external and internal factors influencing the system.
 Show the interaction among the requirements actors.

29
How to draw Use Case Diagram ?
Use case diagrams are considered for high level requirement analysis
of a system. So when the requirements of a system are analyzed the
functionalities are captured in use cases.
So we can say that uses cases are nothing but the system
functionalities written in an organized manner. Now the second things
which are relevant to the use cases are the actors. Actors can be
defined as something that interacts with the system.
The actors can be human user, some internal applications or may be
some external applications. So in a brief when we are planning to draw
a use case diagram we should have the following items identified.
 Functionalities to be represented as an use case
 Actors
 Relationships among the use cases and actors.

Use case diagrams are drawn to capture the functional requirements

of a system. So after identifying the above items we have to follow the
following guidelines to draw an efficient use case diagram.
 The name of a use case is very important. So the name should be
chosen in such a way so that it can identify the functionalities
performed.
 Give a suitable name for actors.
 Show relationships and dependencies clearly in the diagram.
 Do not try to include all types of relationships. Because the main
purpose of the diagram is to identify requirements.
 Use note whenever required to clarify some important points.

30
31
 Schema Design
The schema is an abstract structure or outline representing the
logical view of the database as a whole. Defining categories of
data and relationships between those categories, database
schema design makes data much easier to retrieve, consume,
manipulate, and interpret.

DB schema design organizes data into separate entities,

determines how to create relationships between organized
entities, and influences the applications of constraints on data.
Designers create database schemas to give other database
users, such as programmers and analysts, a logical
understanding of data.
//App.js

import React, { Component } from "react";

import "bootstrap/dist/css/bootstrap.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import ListGroup from "react-bootstrap/ListGroup";

class App extends Component {

constructor(props) {
super(props);

// Setting up state
this.state = {
userInput: "",
list: [],
};
}

// Set a user input value

updateInput(value) {
this.setState({
userInput: value,
});
}

// Add item if user input in not empty

addItem() {
if (this.state.userInput !== "") {
const userInput = {
// Add a random id which is used to delete
id: Math.random(),

// Add a user value to list

value: this.state.userInput,
};

// Update list
const list = [...this.state.list];
list.push(userInput);

// reset state
this.setState({
list,
userInput: "",
});
}
}
// Function to delete item from list use id to delete
deleteItem(key) {
const list = [...this.state.list];

// Filter values and leave value which we need to delete

const updateList = list.filter((item) => item.id !== key);

// Update list in state

this.setState({
list: updateList,
});
}

editItem = (index) => {

const todos = [...this.state.list];
const editedTodo = prompt('Edit the todo:');
if (editedTodo !== null && editedTodo.trim() !== '') {
let updatedTodos = [...todos]
updatedTodos[index].value= editedTodo
this.setState({
list: updatedTodos,
});
}
}

render() {
return (
<Container>
<Row
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "3rem",
fontWeight: "bolder",
}}
>
TODO LIST
</Row>

<hr />
<Row>
<Col md={{ span: 5, offset: 4 }}>
<InputGroup className="mb-3">
<FormControl
placeholder="add item . . . "
size="lg"
value={this.state.userInput}
onChange={(item) =>
this.updateInput(item.target.value)
}
aria-label="add something"
aria-describedby="basic-addon2"
/>
 <InputGroup>
<Button
variant="dark"
className="mt-2"
onClick={() => this.addItem()}
>
ADD
</Button>
</InputGroup>
</InputGroup>
</Col>
</Row>
<Row>
<Col md={{ span: 5, offset: 4 }}>
<ListGroup>
{/* map over and print items */}
{this.state.list.map((item, index) => {
return (
<div key = {index} >
<ListGroup.Item
variant="dark"
action
style={{display:"flex",
justifyContent:'space-between'
}}
>
{item.value}
<span>
<Button style={{marginRight:"10px"}}
variant = "light"
onClick={() => this.deleteItem(item.id)}>
Delete
</Button>
<Button variant = "light"
onClick={() => this.editItem(index)}>
Edit
</Button>
</span>
</ListGroup.Item>
</div>
);
})}
</ListGroup>
</Col>
</Row>
</Container>
);
}
}

export default App;

//App.css

.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
//App.test.js

import { render, screen } from '@testing-library/react';

import App from './App';

test('renders learn react link', () => {

render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

//index.css

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
//package.json

{
"name": "todo-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"bootstrap": "^5.3.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
//Add item
addItem() {
if (this.state.userInput !== "") {
const userInput = {
// Add a random id which is used to delete
id: Math.random(),

// Add a user value to list

value: this.state.userInput,
};

//Delete item

deleteItem(key) {
const list = [...this.state.list];

// Filter values and leave value which we need to delete

const updateList = list.filter((item) => item.id !== key);

// Update list in state

this.setState({
list: updateList,
});
}
//edit Item

editItem = (index) => {

const todos = [...this.state.list];
const editedTodo = prompt('Edit the todo:');
if (editedTodo !== null && editedTodo.trim() !== '') {
let updatedTodos = [...todos]
updatedTodos[index].value= editedTodo
this.setState({
list: updatedTodos,
});
}
}
 CONCLUSION

In conclusion, the future of To-Do List Applications is poised for

dynamic transformation driven by technological advancements and
evolving user preferences. As these applications embrace artificial
intelligence, machine learning, and natural language processing, they
stand on the cusp of delivering unparalleled productivity experiences.
Integration with virtual assistants and smart devices will further
enhance accessibility and usability.
Sustainability is becoming a guiding principle in software development,
leading to the implementation of eco-friendly practices and a
heightened awareness of digital footprint. The integration of
collaborative features ensures seamless teamwork and project
management, catering to diverse user needs.
Cross-platform compatibility and synchronization will contribute to a
more unified and efficient task management experience. Amid these
innovations, To-Do list applications are set to redefine themselves,
promising a future that blends innovation, sustainability, and a
heightened focus on the individual productivity needs of users in
various aspects of their lives.