create a to$-$do list app using react redux Your reducers should allow a user to add, delete, and edit a specific

to$-$do$/$task and change the completed variable.

When your app starts, the UI should display:

A heading with your app name.

The $2$ initial to$-$do items

A info icon $($explained below$)$

A to$-$do counter $($explained below$)$

An add$-$todo button

Each to$-$do$/$task item rendered should then have four styled buttons.

Add,

Edit,

Delete,

and Completed $($checkbox$).$

Add or Edit a to$-$do:

On the UI using an input: A user should also be able to add a to$-$do

using the 'enter key' or a button $($both options should be available$).$

When a to$-$do is added, clear the input. To Edit: you must use a modal or a custom HTML popup to edit a

to$-$do$.$ Use any HTML or React Ul library modal$/$popup for this.

When the user edits a to$-$do$,$ fill in the input with the selected

to$-$do's text.

If a user tries to add a to$-$do with no value. Show a warning message

in the popup.

Do not use any browser methods like prompt or alert.

On your Ul$,$ you must have an info icon. When clicked. A popup will display

above all other content in the centre of the page with user instructions

$($don$\text{'}$t forget to add a close button$).$

On your UI$,$ you must have an element to display the number of to$-$do

items in your global state, i$.$e$.$ a to$-$do counter.

When a to$-$do is added or deleted, this number should also update.

The counter should be in a fixed position on the UI $($meaning$,$ if the

user scrolls down to other to$-$dos, the counter should still be visible$)$

When a to$-$do is checked $($true$),$ the to$-$do should be faded out.

A user should not be able to edit completed to$-$dos.

Your App UI content must be centred and attractively styled. You can use

custom CSS or any React UI library for styling.