Todos Application button { background: rgb(15, 59, 155); height: 32px; padding: 6px; color: white; } input[type=text] { height: 26px; min-width: 240px; } li { border-bottom:

---

I just need Problem 6 and 7. Thank you in advance!

Problem 1 (Creating a To-Do List Web Page) In this tutorial, you will be building a client-side application that allows the user to create and manage a 'to-do list'. This will allow the user to add new items, remove selected items, highlight/un-highlight selected items, and sort the items. To start, create a todo.html file. When opened, this web page should have: 1. A textbox to enter the names of new items 2. An 'Add Item' button 3. A 'Remove Items' button 4. A 'Toggle Highlight' button 5. A Sort Items' button For the time being, these buttons shouldn't do anything. We'll be adding functionality to the page throughout the rest of the tutorial. When the page initially loads, there should be no items present on the page. However, for development and testing purposes, it may be useful to create an onload handler that adds items to the list automatically, so that you will not need to type new items in whenever you want to test a new version. You can remove this handler once you are finished so the list is blank when it loads. Problem 2 (Creating an Add Handler) Create a JavaScript file and include it in the HTML file you created in the previous problem. In your JavaScript file, implement a click handler for the 'Add Item' button. When the user click the button and the item name is valid, a new item should be added to the page's to-do list. This new item must have a checkbox so the item can be selected/deselected, as well as the text that was in the item name textbox when the button was clicked. Whether duplicate items can be added to the list is left as a design decision for you to make. You should verify that the item name is at least 1 character long (i.e., no blank items allowed), and should reset the textbox to a blank state once the new item is created. In order to complete this problem, as well as the rest of this tutorial, your JavaScript code will need to edit the HTML document's contents by accessing and manipulating the DOM. If you need a refresher on how to do this, review the lecture slides, lecture recording, and/or use w3schools' tutorial on the subject to help get you started: As you may have noticed, there are many ways in which you can solve the problems in this tutorial. This will be a common theme in this course. Before you start, you should think of a plan to organize your data and code before starting. If you start with a solid plan, the development process will likely be smoother. For example, in this problem, consider how you will represent each item in the list, what naming scheme you will use so that you can find/modify the information you need, etc. It would be a good idea to look through the various HTML tags and their attributes to decide which ones you will want to use. Problem 3 (Creating a Remove Handler) Implement a click handler for the 'Remove Items' button. This handler should remove any checked items from the page's to-do list. Remember, checkboxes in HTML have a property called 'checked' that will allow you to determine if it is checked or not. You could also store the state of each checkbox, and update this model using the onchange event that is triggered when a checkbox is checked/unchecked the user. The better choice will largely depend on the design decisions you have made. Problem 4 (Adding a Highlight Handler) Implement a click handler for the 'Toggle Highlight button. This handler should: 1. Highlight any checked list items that are not currently highlighted. The highlight can be implemented in any way you want (e.g., changing the text color, the background color, etc.) 2. Remove the highlight from any checked list items that are already highlighted. 3. Not change the highlighting of any unchecked items. Problem 5 (Adding a Sort Handler) Implement a click handler for the 'Sort Items' button. This event handler should sort the list items in alphabetical order. Whether you sort with case sensitivity or not is up to you. The handler should not change the selected or highlighted status of any of the items. It should only re-arrange all existing items into sorted order. Alternatively, you can modify your 'add item' handling code to automatically maintain a sorted list. If you do this, remove the 'Sort Items' button, as you will not need it. Problem 6 (Including Estimated Time) Modify the HTML page and JavaScript code so that the user also must enter an estimated duration for the task. This time should be displayed in some way beside the item in the list. Add a selection mechanism (radio button, drop-down list, etc.) by the Sort Items button so the user can decide to sort based on the task name or the task duration. Add a selection mechanism to allow the user to sort in ascending or descending order. Problem 7 (Allowing Color-Coding) Instead of toggling highlighting on/off, create a way to allow the user to set the highlighting color of selected items. This could allow the user to categorize different tasks by color. Add an additional sorting selection that sorts by color so the user can easily see tasks of the same color together. Hint: HTML has a built-in color selector element. Problem 1 (Creating a To-Do List Web Page) In this tutorial, you will be building a client-side application that allows the user to create and manage a 'to-do list'. This will allow the user to add new items, remove selected items, highlight/un-highlight selected items, and sort the items. To start, create a todo.html file. When opened, this web page should have: 1. A textbox to enter the names of new items 2. An 'Add Item' button 3. A 'Remove Items' button 4. A 'Toggle Highlight' button 5. A Sort Items' button For the time being, these buttons shouldn't do anything. We'll be adding functionality to the page throughout the rest of the tutorial. When the page initially loads, there should be no items present on the page. However, for development and testing purposes, it may be useful to create an onload handler that adds items to the list automatically, so that you will not need to type new items in whenever you want to test a new version. You can remove this handler once you are finished so the list is blank when it loads. Problem 2 (Creating an Add Handler) Create a JavaScript file and include it in the HTML file you created in the previous problem. In your JavaScript file, implement a click handler for the 'Add Item' button. When the user click the button and the item name is valid, a new item should be added to the page's to-do list. This new item must have a checkbox so the item can be selected/deselected, as well as the text that was in the item name textbox when the button was clicked. Whether duplicate items can be added to the list is left as a design decision for you to make. You should verify that the item name is at least 1 character long (i.e., no blank items allowed), and should reset the textbox to a blank state once the new item is created. In order to complete this problem, as well as the rest of this tutorial, your JavaScript code will need to edit the HTML document's contents by accessing and manipulating the DOM. If you need a refresher on how to do this, review the lecture slides, lecture recording, and/or use w3schools' tutorial on the subject to help get you started: As you may have noticed, there are many ways in which you can solve the problems in this tutorial. This will be a common theme in this course. Before you start, you should think of a plan to organize your data and code before starting. If you start with a solid plan, the development process will likely be smoother. For example, in this problem, consider how you will represent each item in the list, what naming scheme you will use so that you can find/modify the information you need, etc. It would be a good idea to look through the various HTML tags and their attributes to decide which ones you will want to use. Problem 3 (Creating a Remove Handler) Implement a click handler for the 'Remove Items' button. This handler should remove any checked items from the page's to-do list. Remember, checkboxes in HTML have a property called 'checked' that will allow you to determine if it is checked or not. You could also store the state of each checkbox, and update this model using the onchange event that is triggered when a checkbox is checked/unchecked the user. The better choice will largely depend on the design decisions you have made. Problem 4 (Adding a Highlight Handler) Implement a click handler for the 'Toggle Highlight button. This handler should: 1. Highlight any checked list items that are not currently highlighted. The highlight can be implemented in any way you want (e.g., changing the text color, the background color, etc.) 2. Remove the highlight from any checked list items that are already highlighted. 3. Not change the highlighting of any unchecked items. Problem 5 (Adding a Sort Handler) Implement a click handler for the 'Sort Items' button. This event handler should sort the list items in alphabetical order. Whether you sort with case sensitivity or not is up to you. The handler should not change the selected or highlighted status of any of the items. It should only re-arrange all existing items into sorted order. Alternatively, you can modify your 'add item' handling code to automatically maintain a sorted list. If you do this, remove the 'Sort Items' button, as you will not need it. Problem 6 (Including Estimated Time) Modify the HTML page and JavaScript code so that the user also must enter an estimated duration for the task. This time should be displayed in some way beside the item in the list. Add a selection mechanism (radio button, drop-down list, etc.) by the Sort Items button so the user can decide to sort based on the task name or the task duration. Add a selection mechanism to allow the user to sort in ascending or descending order. Problem 7 (Allowing Color-Coding) Instead of toggling highlighting on/off, create a way to allow the user to set the highlighting color of selected items. This could allow the user to categorize different tasks by color. Add an additional sorting selection that sorts by color so the user can easily see tasks of the same color together. Hint: HTML has a built-in color selector element