Add example todo list

examples.html

@@ -178,6 +178,36 @@ <h3>It's easy to get items from the list!</h3>
         </code>
       </details>
     </div>
+    <div class="card" id="markedLists">
+      <h3>Make a simple completed todo list!</h3>
+      <p>The items that you can set complete.</p>
+      <details>
+        <summary>Source Code</summary>
+        <code>
+          <pre>const markedLists = new ListExtender({ showDeleteButton: true })</pre>
+          <pre>markedLists.addAfter('#markedLists p')</pre>
+          <pre>const dataMarkedList = ['bug fixing', 'implement new feature']</pre>
+          <pre>markedLists.addFromArray(dataMarkedList)</pre>
+          <pre>markedLists.element.addEventListener('mouseenter', event => {</pre>
+          <pre>  const children = [...markedLists.element.children]</pre>
+          <pre>  children.forEach(child => {</pre>
+          <pre>    if (child.querySelector('input[type="submit"]')) {</pre>
+          <pre>      child.querySelector('input[type="submit"]').value = 'DONE'</pre>
+          <pre>      child.querySelector('input[type="submit"]').style.visibility = 'visible'</pre>
+          <pre>      child.querySelector('input[type="submit"]').style.background = 'green'</pre>
+          <pre>    }</pre>
+          <pre>  })</pre>
+          <pre>})</pre>
+          <pre>markedLists.element.addEventListener('mousedown', event => {</pre>
+          <pre>  if (event.target.tagName === 'INPUT' && event.target.getAttribute('type') === 'submit') { </pre>
+          <pre>    let ulElement = event.target.parentElement</pre>
+          <pre>    markedLists.element.insertBefore(ulElement, markedLists.element.children[0])</pre>
+          <pre>    ulElement.style['text-decoration'] = 'line-through'</pre>
+          <pre>  }</pre>
+          <pre>})</pre>
+        </code>
+      </details>
+    </div>
   </div>
 </body>
 </html>

js/examples.js

@@ -70,3 +70,27 @@ const handleGetItems = event => {
   const data = getItems.getData()
   p.appendChild(document.createTextNode(`The items given in the list are: ${data.toString()}`))
 }
+
+const markedLists = new ListExtender({ showDeleteButton: true })
+markedLists.addAfter('#markedLists p')
+const dataMarkedList = ['bug fixing', 'implement new feature']
+markedLists.addFromArray(dataMarkedList)
+markedLists.element.addEventListener('mouseenter', event => {
+  const children = [...markedLists.element.children]
+  children.forEach(child => {
+    if (child.querySelector('input[type="submit"]')) {
+      child.querySelector('input[type="submit"]').value = 'DONE'
+      child.querySelector('input[type="submit"]').style.visibility = 'visible'
+      child.querySelector('input[type="submit"]').style.background = 'green'
+    }
+  })
+})
+markedLists.element.addEventListener('mousedown', event => {
+  if (event.target.tagName === 'INPUT' && event.target.getAttribute('type') === 'submit') { 
+    let ulElement = event.target.parentElement
+    // let index = parseInt(ulElement.attributes[0].value) === 1 ? 0 : ulElement.attributes[0].value
+    // console.log(index)
+    markedLists.element.insertBefore(ulElement, markedLists.element.children[0])
+    ulElement.style['text-decoration'] = 'line-through'
+  }
+})