Scribd
Upload
25 views

Assignment 9

This document provides instructions for a coding assignment to build a basic to-do list application in React. Students are asked to create a text area and button to add tasks, render tasks in the order they are added, and include edit and delete buttons for each task. Tasks should be editable with a text area and save button, and not saved if empty. The initial task list should be empty. Students should use controlled inputs with onChange instead of refs and submit the coded assignment in a compressed zip file.

Uploaded by

Sai Chandu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Assignment 9

This document provides instructions for a coding assignment to build a basic to-do list application in React. Students are asked to create a text area and button to add tasks, render tasks in the order they are added, and include edit and delete buttons for each task. Tasks should be editable with a text area and save button, and not saved if empty. The initial task list should be empty. Students should use controlled inputs with onChange instead of refs and submit the coded assignment in a compressed zip file.

Uploaded by

Sai Chandu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment-9

(Todo-List)
Please watch this video first before going through the problem statement:
https://drive.google.com/file/d/14YynaHto2ccZZDJLTwiV6JeP879mfdgN/vie
w?usp=sharing

This assignment will teach students how to make the most basic and most
asked question of interviews i.e making a to-do list in react.

You have to make a to-do list with some basic functionalities like add, edit,
and delete tasks.

Make a textarea with id="task" where the content to be added is typed,


please trigger onchange instead of using ref as test cases depend on it.

Make a button with id="btn" which on click adds the task to the list.

Each item in the list should have a classname "list"

Please ensure to render the task in the sequence they are added for
example if a task "Buy milk" is added and then task "Buy vegetable" is
added then they should be rendered in the same sequence first "Buy milk"
and then "Buy vegetable".

Each task should have edit and delete buttons corresponding to each task
with class edit and delete respectively.

There should be a textarea and save button corresponding to each task


with class editTask and saveTask respectively which will be conditionally
rendered when the edit button is clicked, please trigger onchange instead
of using ref in editing task as test cases depend on it.
The edited task should not be saved if the text area contains an empty
string at this particular time save button should not be functional.

On save the task should be updated and back to its normal state i.e edit
and delete functionality is available.

Initially, the task list should be empty.

**Please use onChange instead of ref for controlled inputs as test


cases depend on it.

Submission Steps:
1. Download the Zip file and extract it.
2. Open the extracted file using VSCode
3. Cd to correct path and run npm install in terminal
4. Now make changes in the file according to the problem statement
5. Compress your folder in zip file and submit it.
Boiler-plate link:
https://drive.google.com/file/d/1LMFL5Hbup-wm5ESY5OYt2gK_8wqZ9NE
m/view?usp=sharing

Note: Make sure that if node modules folder is present in src folder or public
folder, don't include it while compressing the Assignment

You might also like