## Homework01: TODO List in Pure JS Due: 9pm, Tuesday, 03/12 --- #### Let's see the [demo](https://www.facebook.com/ric2k1/videos/pcb.786193475061908/10218102411928873/?type=3&theater&ifg=1)  --- ### Step #1: Let's create an HTML  * Download the reference program [here](https://github.com/ric2k1/ric2k1.github.io/blob/master/W3_0306/practice/todo_list_starter.tgz)! ---- #### 1.1. Design the frames  ---- #### 1.2. Understand the CSS file ```css input[type='checkbox'] { } /* No space between */ /* <input> tag with type='checkbox' */ .todo-app__input:focus { } /* When the input component is waiting for input */ .todo-app__input::placeholder { } /* pseudo element */ /* The 'placeholder' attribute of <input> */ .todo-app__item { flex-direction: row; } /* So compenents within this item will be placed horizontally */ .todo-app__checkbox input[type='checkbox']:checked + label { } /* For the decedent of class todo-app__checkbox, * select the <label> that is ajacent to an <input> * with type = 'checkbox' */ ``` ---- ## Are you done with the HTML/CSS? --- ### Step #2: Let's make some simple interactions ---- ### Add a TODO input * Note: If you define the HTML (input) components and use the corresponding CSS selectors properly, you should be able to handle the input effect/style already. * Now the remaining questions are: How to detect the "enter" key is entered and add the text to a new TODO item? * Recall: to add a dynamic effect... * What is the triggered element? * What is the triggering event? * What actions need to be done? ---- ### What is the triggered element? ```javascript const input = document.getElementById('todo-input'); ``` ---- ### What is the triggering event? * When the key is "up", and the entered key is a "return" key, and the entered string is NOT empty. ```javascript input.addEventListener('keyup', event => { if (event.keyCode === 13 && event.target.value !== '') { ... } }); ``` ---- ### What actions need to be done? * Create an TODO item whose content is the entered string * You should have an array to hold all the TODO items * Add the new TODO item to the end of the array * Update display * Clean up the input value * (optional) Update count ---- * Let's compare the differences after the item is added * Before  * After  ---- ### Dynamically create HTML like this...  ---- ### In other words... * Inside the code --- ```javascript input.addEventListener('keyup', event => { if (event.keyCode === 13 && event.target.value !== '') { ... } }); ``` * You need to add --- ```javascript const newItem = someCodeToCreateNewItem(); ``` ---- ### In "someCodeToCreateNewItem()" * You need to create some HTML elements and compose them into the TODO item * For example --- ```javascript const itemNode = document.createElement("LI"); const wrapper = document.createElement("DIV"); const checkbox = document.createElement("INPUT"); checkbox.setAttribute("id", id); checkbox.setAttribute("onClick", "someFuncToHandleOnClick()"); ... wrapper.appendChild(checkbox); ... itemNode.appendChild(wrapper); ``` ---- ### Other Effects * Need to have a property "isComplete" to distinguish whether this todo item is completed ```javascript newItem = { node: itemNode, isComplete: false }; ``` * Handle counter ```javascript todoCount = document.getElementById("todo-count"); todoCount.innerHTML = todoListData.filter(ele => !ele.isComplete).length; ``` ---- ### Other Effects * When the checkbox is check, change the styles of the checkbox and the text (line-through) ```javascript // Note: checkbox style has been handeled in CSS file const node = document.getElementById(id); node.style["textDecoration"] = "line-through"; node.style["opacity"] = 0.5; ``` * When the mouse is over the todo item, the 'X' will present and when it is clicked, the item will be deleted * Array methods: map(funcObj), splice(startId, numDeleted) --- ### Remaining nice-to-have features * Filter: all/active/completed items * Array method: filter(predicate) * Define a "state" variable * "Clear completed" button to remove all the completed items * Array method: some(predicate) --- ## That's it! ## Enjoy the Homework~