-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (151 loc) · 6.63 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Plan</title>
<!--Load in Bootstrap's CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--Load in Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Load in our local CSS style.css-->
<link rel="stylesheet" href="css/style.css">
</head>
<body class="h-100">
<!--Modal dialog containing form to add new tasks-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center col-12" id="exampleModalLabel">Add New Event
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label ">Event name:</label>
<div class="col-sm-9">
<input type="name" class="form-control" id="name" placeholder="Event name">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please choose a name longer than 5 characters.
</div>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description:</label>
<div class="col-sm-9">
<div class="input-group">
<textarea style="width: 20em; height:5em;" name="description"
id="description" placeholder="Description"></textarea>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please choose a description longer than 5 characters.
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="assign" class="col-sm-3 col-form-label">Assigned to:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="assign" placeholder="Assigned to">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please fill in this field.
</div>
</div>
</div>
<div class="form-group row">
<label for="dueDate" class="col-sm-3 col-form-label">Due Date:</label>
<div class="col-sm-9">
<input name="setTodaysDate" type="date" class="form-control date" id="dueDate">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please select a due date.
</div>
</div>
</div>
<div class="form-group row">
<label for="assign" class="col-sm-3 col-form-label">Status:</label>
<div class="col-sm-9">
<select type="text" class="form-control is-valid" id="status">
<option>TO DO</option>
<option>IN PROGRESS</option>
<option>REVIEW</option>
<option>DONE</option>
</select>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please select a valid status option.
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="submit" class="btn" type="button" data-dismiss="modal">Add Events</button>
</div>
</div>
</div>
</div>
<!--This container contains the entire layout for the webapp-->
<div class="container-md bg-light pb-4 mt-5">
<!--FIRST ROW: This is the FIRST ROW of the layout, it contains only one column, the 'Main Menu' bar-->
<div class="row">
<div class="col-12 py-4">
<!--Button to open modal form-->
<div class="position-absolute" id="plusbutton">
<button id="start-btn" type="button" class="btn btn-1" data-toggle="modal" data-toggle="tooltip" data-target="#exampleModal">
<i class="fa fa-plus" style="font-size:40px;"></i>
</button>
<span id="btnDiv"></span>
</div>
<!--Main Menu text-->
<h3 class="text-center text-secondary font-weight-bold mb-0">Tasks <span><img src="/task.png" alt="" class="task"></span></h3>
</div>
</div>
<!--SECOND ROW: This is the SECOND ROW, it contains only our three filter tabs for 'To-Do', 'Finished', and 'All'-->
<div class="row text-center d-none">
<div class="col-4 py-4 border border-secondary bg-white">
<h2 class="mb-0"><a href="#">Not done</a></h2>
</div>
<div class="col-4 py-4 border border-secondary bg-white">
<h2 class="mb-0"><a href="#">Done</a></h2>
</div>
<div class="col-4 py-4 border border-secondary bg-white">
<h2 class="mb-0"><a href="#">All</a></h2>
</div>
</div>
<!--UNORDERED LIST ELEMENT, THIS CONTAINS ALL OF OUR TASKS-->
<ul id="task-list" class="list-inline">
<!--List items will be inserted here by the Task Manager-->
</ul>
</div>
<!--Load in Bootstrap's JavaScript-->
<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/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!--JS SRC-->
<script src="./js/taskManager.js" defer></script>
<script src="./js/index.js" defer></script>
</body>
</html>