diff --git a/spa/index.html b/spa/index.html index 36f06aa..1ea3fa6 100644 --- a/spa/index.html +++ b/spa/index.html @@ -1,50 +1,132 @@ - - - - - - Document - - - - -
-
-
- - Add a new todo -
-
-
- - - -
-
-
- -
-
-
    - -
-
- + .addBtn:hover { + background-color: #bbb; + } + #clear-list{ + width: 30%; + font-weight: bold; + font-style: italic; + font-size: xx-large; + font-family: "Times New Roman"; + margin: 40px 35%; + background-color: darkblue; + color: white; + } + #clear-list:hover{ + background-color: blue; + color: white; + } + + + +
+

AMANVEER's To Do List

+ + Add
- - -
- - - - - - \ No newline at end of file + + + + + diff --git a/spa/index.js b/spa/index.js index 062d888..c23656d 100644 --- a/spa/index.js +++ b/spa/index.js @@ -1,67 +1,54 @@ -let todos = [ - { - id: 1, - name: "Teach Class at Nagarro", - done: true - }, - { - id: 2, - name: "Get Coffee", - done: false - } -]; - -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(""); +var myNodelist = document.getElementsByTagName("LI"); +var i; +for (i = 0; i < myNodelist.length; i++) { + var span = document.createElement("SPAN"); + var txt = document.createTextNode("\u00D7"); + span.className = "close"; + span.appendChild(txt); + myNodelist[i].appendChild(span); } - -function paint() { - $("ul").html(render(todos)); +// Click on a close button to hide the current list item +var close = document.getElementsByClassName("close"); +var i; +for (i = 0; i < close.length; i++) { + close[i].onclick = function() { + var div = this.parentElement; + div.style.display = "none"; + } } - -function addTodo() { - // document.getElementById('newTodo') != $('#newTodo') - const inputBox = $('#newTodo') - todos.push({ - id: todos.length + 1, - name: inputBox.val(), - done: false - }) - - inputBox.val('') - - paint() +// Add a "checked" symbol when clicking on a list item +var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if (ev.target.tagName === 'LI') { + ev.target.classList.toggle('checked'); + } +}, false); +// Create a new list item when clicking on the "Add" button +function newElement() { + var li = document.createElement("li"); + var inputValue = document.getElementById("myInput").value; + var t = document.createTextNode(inputValue); + li.appendChild(t); + if (inputValue === '') { + alert("You must write something!"); + } else { + document.getElementById("myUL").appendChild(li); + } + document.getElementById("myInput").value = ""; + var span = document.createElement("SPAN"); + var txt = document.createTextNode("\u00D7"); + span.className = "close"; + span.appendChild(txt); + li.appendChild(span); + for (i = 0; i < close.length; i++) { + close[i].onclick = function() { + var div = this.parentElement; + div.style.display = "none"; + } + } } - - - -function removeTodos() { - todos = todos.filter(todo => !todo.done) - - paint() +//Clearing the list +function removeAll(){ + var lst = document.getElementsByTagName("ul"); + lst[0].innerHTML = ""; } - - -$('ul').on("click", function (e) { - 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();