AlnurFaisal / dom-todo-list

DOM Manipulation Lab: Todo List

Instructions:

1. fork repo
2. clone repo: git clone https://github.com/your_username/dom-todo-list
3. cd into directory and run open index.html to open the page on a browser
4. complete the following tasks
   • Link your css and javascript to your HTML page (test that it works with a console.log and some css style)
   • For each todo in the tasks array, append it to the <ul id='todo-list'></ul> element
   • Create a css class (e.g. .done) that, when applied on an element, adds the text-decoration: line-through property
   • Add a click listener to the <li></li> elements and a callback function that adds the css class that you created in the previous step
   • Update the callback function so that clicking on the list element toggles (i.e. add/remove) the .done css class
   • Add a <input> HTML element and a <button>Add Todo</button> HTML element that displays the user's input as part of the todo list when the button is clicked
   • Add css styling and make this a nice todo list that you can show off!

Bonus:

• when you are tired of refreshing your browser with every change, you can install this vscode plugin to do auto reload: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

---

Copyright (c) 2018 ThoughtWorks. For personal use and training purposes only; not to be copied or distributed without further approval.