-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (112 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<title>To Do List</title>
</head>
<body class="bg-light">
<div class="container">
<h1 class="text-center text-info p-3 display-3">To Do List</h1>
<form method="POST" action="/send" class="p-2">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label text-left">Name of Task:</label>
<div class="col-sm-10">
<input type="text" class="form-control " name="name" placeholder="Enter task name" required>
</div>
</div>
<fieldset class="form-group text-left">
<div class="row">
<legend class="col-form-label col-sm-2">Priority:</legend>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio1" value="High">
<label class="form-check-label" for="inlineRadio1">High</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio2" value="Medium">
<label class="form-check-label" for="inlineRadio2">Medium</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio3" value="Low" checked>
<label class="form-check-label" for="inlineRadio3" >Low</label>
</div>
</div>
</div>
</fieldset>
<div class="row">
<span class="col-sm-2"></span>
<div class="col-sm-1 text-center">
<button class="btn btn-outline-primary">Submit</button>
</div>
<span class="col-sm-8"></span>
</div>
</form>
<br/>
<div class="todo-list border-top border-secondary p-2">
<h1 class="p-2">Task List</h1>
<% if(message){ %>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<h5> Successful
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<% } %>
<% Todo.forEach(details => { %>
<div class="p-3 mb-2 bg-white border border-secondary rounded text-dark">
<div class="row">
<% if (details._id == idTask) { %>
<form method="POST" action="/edit/<%= details._id %>">
<div class="row p-3">
<label class="col-form-label col-sm-2">Edit Task:</label>
<input type="text" class="form-control col-sm-10" name="name" value="<%= details.name %>" required>
<legend class="col-form-label col-sm-2">Priority:</legend>
<div class="col-sm-10 p-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio1" value="High">
<label class="form-check-label" for="inlineRadio1">High</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio2" value="Medium">
<label class="form-check-label" for="inlineRadio2">Medium</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="priority" id="inlineRadio3" value="Low" checked>
<label class="form-check-label" for="inlineRadio3" >Low</label>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-outline-success">Save Changes</button>
<a href="/" type="button" class="btn btn-outline-danger">Cancel</a>
</div>
</form>
<% } else { %>
<h4 class="todo-list-item-name col"><%= details.name %>
<span class="badge badge-pill badge-info"><%= details.priority %></span>
</h4>
<a href="/edit/<%= details._id %>" class="edit col text-right">
<span class="btn btn-outline-success">Edit</span>
</a>
<a href="/remove/<%= details._id %>" onclick="return confirm('Are you sure to delete this record ?');" class="remove col">
<span class="btn btn-outline-danger">Remove</span>
</a>
<% } %>
</div>
</div>
<% }) %>
</div>
</div>
</body>
</html>