Creating a todo list in javascript only -
i have problem here.i need create todo list following specifications: should have list,form , local storage components described below. list component's responsibilities to:
attach list element in html.
maintain active todo list in running web app.
draw list of todos.
redraw list when new item added or removed.
interact storage service retrieve list of todo items browser's local storage on launch , save list of todos browser's local storage whenever changes.
the form component's responsibilities to:
attach list-form element in html.
draw form, input, , submit button.
add new item todo list when form submited interacting list component.
clearing input after new todo item has been added allowing new item entered.
the local storage component's responsibilities to:
provide methods store , retrieve list of todos in browser's local storage. have tired following code:
function get_todos() { var todos = new array; var todos_str = localstorage.getitem('todo'); if (todos_str !== null) { todos = json.parse(todos_str); } return todos; } //local storage function add() { var task = document.getelementbyid('task').value; var todos = get_todos(); todos.push(task); localstorage.setitem('todo', json.stringify(todos)); show(); return false; } function remove() { var id = this.getattribute('id'); var todos = get_todos(); todos.splice(id, 1); localstorage.setitem('todo', json.stringify(todos)); show(); return false; } //local storage function show() { var todos = get_todos(); var html = '<ul>'; for(var i=0; i<todos.length; i++) { html += '<li>' + todos[i] + '<button class="remove" id="' + + '">x</button></li>'; }; html += '</ul>'; document.getelementbyid('k').innerhtml = html; //document.getelementsbytagname("list"); var buttons = document.getelementsbyclassname('remove'); (var i=0; < buttons.length; i++) { buttons[i].addeventlistener('click', remove); }; } document.getelementbyid('add').addeventlistener('click', add); show();
please need assistance.
Comments
Post a Comment