todos.ejs
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Todo App</title> 9 <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 10 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 11 <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 12 </head> 13 14 <body> 15 <div class="app"> 16 <header> 17 <nav class="navbar navbar-dark bg-primary"> 18 <span class="navbar-brand mb-0 h1">Todo Appppppp</span> 19 </nav> 20 </header> 21 <div class="container"> 22 <div class="row"> 23 <div class="col-md-8 m-auto pt-4"> 24 <form method="POST" action="/" autocomplete="off"> 25 <div class="row"> 26 <div class="col-12 form-group"> 27 <label for="todo">Enter your task</label> 28 <input type="text" name="task" class="form-control" /> 29 </div> 30 </div> 31 </form> 32 <hr> 33 <div class="row"> 34 <div class="col-12"> 35 <% if(Object.keys(tasks).length> 0) { %> 36 <ul class="nav flex-column"> 37 <% tasks.forEach(todo=> { %> 38 <li class="nav-item"> 39 <div class="d-flex justify-content-between py-1"> 40 <div class="d-flex flex-row"> 41 <div> 42 <%= todo.task %> 43 <p class="text-muted"><small> 44 <%= moment(todo.created_at).fromNow() %> 45 </small></p> 46 </div> 47 </div> 48 <a href="javascript:;" onclick="this.children[0].submit()" 49 class="text-danger"> 50 <form method="POST" action="/todo/destroy"> 51 <input type="hidden" name="_key" value="<%= todo._id %>" /> 52 </form> 53 <i class="fa fa-trash-o"></i> 54 </a> 55 </div> 56 </li> 57 <% }) %> 58 </ul> 59 <% } else { %> 60 <div class="text-center"><strong>Please add some task.</strong></div> 61 <% }%> 62 </div> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 </body> 69 70 </html>