In this practice work, you will create below todo list by using HTML, CSS and JQuery.
Requirements:
When user clicks on the + icon, it will toggle between showing and hiding the textbox which is used to insert a new item to the list.
When user focuses on the textbox, it will change the border color of the textbox and when user presses the enter key, it will add the item to the list.
When user hovers over any todo item, it will show delete button and when clicked on the delete button, will delete the item from the list.
When user clicks on the todo item, it will strike through the item and show it as completed.
Source for icons:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<i class="fa fa-plus">
<i class="fa fa-trash"></i>
You can use different icons from a different source.
