diff --git a/spa/index.html b/spa/index.html index 36f06aa..9f4b7cf 100644 --- a/spa/index.html +++ b/spa/index.html @@ -1,50 +1,62 @@ - - - - Document - + + + + + + + + + + Document + + -
-
-
- - Add a new todo -
-
-
- - - -
-
-
- -
-
-
    - -
-
- -
- -
+
+
+
+ + + + + +
+
+ + + + +
+
+

+
+
+
    + +
+
+ +
+ + +
+ + + - - + - \ No newline at end of file + diff --git a/spa/index.js b/spa/index.js index 062d888..f82faba 100644 --- a/spa/index.js +++ b/spa/index.js @@ -1,67 +1,113 @@ let todos = [ - { - id: 1, - name: "Teach Class at Nagarro", - done: true - }, - { - id: 2, - name: "Get Coffee", - done: false + { + id: 1, + name: "Teach Class at Nagarro", + done: true, + d:"2019-11-23" + }, + { + id: 2, + name: "Get Coffee", + done: false, + d:"2020-11-28" + } + ]; + + function render(state) { + return state + .map(todo => { + // const li = document.createElement('li') + // li.classList.add("striked") + // document.body.append(li) + + const classString = todo.done ? `class = "list-group-item striked"` : `class = "list-group-item"` + return `
  • ${todo.name} ${todo.d} ${' '}
    • `; + }) + .join(""); + } + + function paint() { + $("ul").html(render(todos)); + const upBtn=`` + + } + function moveUp(id){ + const tempArray = [].concat(todos); + tempArray.push(tempArray.shift()) + todos = tempArray.map((el, index) => ({ + ...el, + id: index + 1, + })) + paint() } -]; - -function render(state) { - return state - .map(todo => { - // const li = document.createElement('li') - // li.classList.add("striked") - // document.body.append(li) - const classString = todo.done ? `class = "list-group-item striked"` : `class = "list-group-item"` - return `
  • ${todo.name}
    • `; - }) - .join(""); -} - -function paint() { - $("ul").html(render(todos)); -} - -function addTodo() { - // document.getElementById('newTodo') != $('#newTodo') - const inputBox = $('#newTodo') - todos.push({ - id: todos.length + 1, - name: inputBox.val(), - done: false - }) - - inputBox.val('') - - paint() -} - - -function removeTodos() { - todos = todos.filter(todo => !todo.done) + function moveDown(id){ + const tempArray = [].concat(todos); + tempArray.unshift(tempArray.pop()) + todos = tempArray.map((el, index) => ({ + ...el, + id: index + 1, + })) - paint() -} + paint() + } -$('ul').on("click", function (e) { - const idToFind = e.target.dataset.todo - const todo = todos.find(todo => todo.id == idToFind) - todo.done = !todo.done + + function addTodo() { + // document.getElementById('newTodo') != $('#newTodo') + const inputdate=$('#dateInput') + const inputBox = $('#newTodo') + todos.push({ + id: todos.length + 1, + name: inputBox.val(), + done: false, + d:inputdate.val() + }) + + inputBox.val('') + + paint() + } + + + + function removeTodos() { + todos = todos.filter(todo => !todo.done) + + paint() + } + function resetItems(){ + const inputBox = $('#newTodo') + inputBox.val('') + } - paint() + $('#sortitems').click(()=>{ + todos.sort((b,a)=> new Date(a.d) - new Date(b.d) ); + paint() }) - -$('#newTodo').on("keypress", function (e) { - if (e.which == 13) { - addTodo() +$('ul').on("click", function (e) { + if(e.target.localName === 'button'){ + if(e.target.innerText === "Up"){ + moveUp(+e.target.dataset.todo) + }else if (e.target.innerText === "Down"){ + moveDown(+e.target.dataset.todo) + } + }else{ + const idToFind = e.target.dataset.todo + const todo = todos.find(todo => todo.id == idToFind) + todo.done = !todo.done + + paint() } + }) + $('#newTodo').on("keypress", function (e) { + if (e.which == 13) { + addTodo() + } + }) + + paint(); + -paint();