Instructions:
- fork repo
- clone repo:
git clone https://github.com/your_username/dom-todo-list
cd
into directory and runopen index.html
to open the page on a browser- 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 thetext-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!
- Link your css and javascript to your HTML page (test that it works with a
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.