complete spa

abhishek97 · abhishek97 · commit 9b8e3e501713 · 2019-09-27T12:25:56.000+05:30
diff --git a/spa/index.html b/spa/index.html
@@ -5,19 +5,44 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <style>
   .striked {
     text-decoration: line-through;
   }
+  ul > li:hover {
+    cursor: pointer;
+  }
 </style>
 <body>
-  <input id="newTodo" type="text" placeholder="Add new todo">
-  <button onclick="addTodo()"> ADD +</button>
+  <div class="container mt-5">
+    <div class="row">
+      <div class="col-8 form-group">
+          <input class="form-control" id="newTodo" type="text" placeholder="Today i must...">
+          <small class="form-text text-muted">Add a new todo</small>
+      </div>
+      <div class="col-4">
+        <div class="flex-row justify-content-center align-items-center"> 
+          <button class="btn btn-primary mt-1 mt-md-0" onclick="addTodo()">ADD +</button>
+          <button class="btn btn-secondary mt-1 mt-md-0" >Reset</button>
+          <button class="btn btn-danger mt-1" onclick="removeTodos()">Bin</button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row mt-2">
+      <div class="col-10 offset-1">
+          <ul class="list-group">
+        
+            </ul>
+      </div>
+      
+    </div>
+    
 
-  <ul>
+  </div>
 
-  </ul>
 
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="index.js" defer></script>
diff --git a/spa/index.js b/spa/index.js
@@ -1,4 +1,4 @@
-const todos = [
+let todos = [
   {
     id: 1,
     name: "Teach Class at Nagarro",
@@ -14,7 +14,10 @@ const todos = [
 function render(state) {
   return state
     .map(todo => {
-      const classString = todo.done ? `class = "striked"` : ''
+      // 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 `<li data-todo="${todo.id}" ${classString}> ${todo.name} </li>`;
     })
     .join("");
@@ -39,6 +42,14 @@ function addTodo() {
 }
 
 
+
+function removeTodos() {
+  todos = todos.filter(todo => !todo.done)
+
+  paint()
+}
+
+
 $('ul').on("click", function (e) {
   const idToFind = e.target.dataset.todo
   const todo = todos.find(todo => todo.id == idToFind)
@@ -47,4 +58,10 @@ $('ul').on("click", function (e) {
   paint()
 })
 
+$('#newTodo').on("keypress", function (e) {
+  if (e.which == 13) {
+    addTodo()
+  }
+})
+
 paint();
