add logic to todolist

championswimmer · championswimmer · commit 0614d8efcd82 · 2019-09-14T17:51:04.000+05:30
Signed-off-by: Arnav Gupta &lt;arnav@codingblocks.com&gt;
diff --git a/Lecture07/todolist/index.html b/Lecture07/todolist/index.html
@@ -14,7 +14,7 @@
 
   <!--  Our files -->
   <link rel="stylesheet" href="style.css">
-  <script src="script.js"></script>
+  <script defer src="script.js"></script>
 
 </head>
 <body>
@@ -53,11 +53,6 @@ <h1 class="display-4 py-2" align="center">Todo List</h1>
 
     <div class="row px-4">
       <ul class="list-group col-12" id="taskList">
-        <li class="list-group-item">Cras justo odio</li>
-        <li class="list-group-item">Dapibus ac facilisis in</li>
-        <li class="list-group-item done">Morbi leo risus</li>
-        <li class="list-group-item">Porta ac consectetur ac</li>
-        <li class="list-group-item">Vestibulum at eros</li>
       </ul>
     </div>
 
diff --git a/Lecture07/todolist/script.js b/Lecture07/todolist/script.js
@@ -0,0 +1,42 @@
+let inpNewTask = document.getElementById('inpNewTask')
+let btnAdd = document.getElementById('btnAdd')
+let taskList = document.getElementById('taskList')
+
+// Code for managing model layer
+
+let tasks = [{ title: 'first task', done: false }, { title: 'another task', done: true }]
+
+function addItem(taskTitle) {
+  tasks.push({ title: taskTitle, done: false })
+}
+
+// Code for managing views
+
+function renderList() {
+  taskList.innerHTML = ''
+  for (let i = 0; i < tasks.length; i++) {
+    let item = document.createElement('li')
+    item.innerText = tasks[i].title
+    item.className = tasks[i].done ? 'list-group-item done' : 'list-group-item'
+    taskList.appendChild(item)
+  }
+}
+
+function addItemFromInput() {
+  if (inpNewTask.value) {
+    addItem(inpNewTask.value)
+    inpNewTask.value = ''
+  }
+  renderList()
+}
+
+// Code for view <-> model interactions
+
+btnAdd.addEventListener('click', addItemFromInput)
+inpNewTask.addEventListener('keypress', (event) => {
+  if (event.keyCode == 13) addItemFromInput()
+})
+
+// When page starts
+
+renderList()
