Please create a ToDo List project in Javascript with:

An HTML file called index.html that contains the following:

An HTML form that contains $1$ text input field, a label for the input field, and a submit button with an ID add$-$item.

An unordered list with an ID todo$-$list that initially contains no items.

A JavaScript file that contains the following:

A variable that stores the HTML element with the ID todo$-$list.

A variable that stores the HTML element with the ID add$-$item.

A function called addItemToList that is called when the add$-$item button is clicked. This function should receive a todo list item from the user via the HTML form and display it in a list. This function should exhibit the following behavior:

Store the text from the HTML text input field.

Create a new li element with the text from the input field.

Add the new li element to a class called todo$-$list$-$item.

Call a function called createCheckmarkButton that will add a button to mark the list item as completed $($see step D to implement this function$).$

Add the new li element to the todo$-$list element.

Prevent a page refresh and reset the text input field to an empty string after saving the list item in the todo list.

A function called createCheckmarkButton that adds a button to each list item. This function should take one parameter representing a new list item element passed from the addItemToList function. This item marks the todo list item as "completed" by deleting it from the todo list. This function should exhibit the following behavior:

Create an HTML button element that belongs to a class called checkmark$-$button.

Add some text to the button that indicates its functionality $($e$.$g$.,,$ X$,$ done, etc.$).$

Listen to the checkmark button click and delete its corresponding list item.

Add the checkmark button to the list item passed as an argument.

A CSS file linked in the HTML file that styles the todo list however you like!