Description
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.
Submission:
Zip your html, css, and js files together (PW3-yournetid.zip) and send through eLearning.
Solution Hint:
Define mouseenter event for li element (ul.on(“mouseenter”. “li”, function(){}) for showing the trash bin, and mouseleave for hiding the bin.
https://api.jquery.com/mouseenter/#mouseenter-handler
https://api.jquery.com/mouseleave/#mouseleave-handler
For actually hiding and showing the trash bin, you can use show(), hide(), fadeIn() and fadeOut().
$(this).find(“span”).show();
$(this) will give current li element.