-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (150 loc) · 9.56 KB
/
Copy pathindex.html
File metadata and controls
175 lines (150 loc) · 9.56 KB
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="assets/style.css">
<!--<link rel="https://isisrobbs.github.io/JWD_FinalProject_Group7/assets/style.css">-->
<title>Group 007 To Do</title>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row jumbotron" style="background-color: rgba(253, 168, 128, 0.192);">
<div class="col-12">
<h1 class="display-2 text-center align-center text-uppercase">hello world</h1>
<p class="lead display-5 text-center align-center font-weight-light pb-3">Task Manager</p>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row justify-content-center">
<!--start code for collapse -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<!--start code for expand-->
<div id="collapseAdd" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<div class="col-sm-3"></div>
<!-- Container (Adding a Task)-->
<div
class=" text-center col-auto shadow-lg p-2 bg-light rounded mr-3 ml-3 position-static mt-3 mb-5">
<div style="background-color: rgba(253, 168, 128, 0.235);">
<h5 class="display-6 text-center text-uppercase font-weight-light"></h5>
<br>
<h2 class="font-weight-light mb-4">Add A Task</h2>
<!--Name of Task-->
<!--wrapped forms in form-->
<form id="taskForm" class="needs-validation" data-taskId="" novalidate>
<div class="form-group px-3">
<label for="formTaskNameInput" class="font-weight-light">Task
Name:</label>
<input type="text" class="form-control mx-auto" id="formTaskNameInput"
placeholder="Insert Task Here" required value="">
</div>
<!--Description-->
<div class="form-group col-auto">
<div class="mb-3">
<label for="validationTextarea"
class="font-weight-light">Description:</label>
<textarea class="form-control" id="formTaskDescriptionInput"
placeholder="Enter description of task." required></textarea>
</div>
</div>
<!--Assigned To-->
<h6 class="text-center font-weight-light">Assigned To:</h6>
<div class="row px-3">
<div class="col px-3">
<input type="text" class="form-control width-30 name" id="firstName"
placeholder="First Name" required>
</div>
<div class="col px-3 pb-3">
<input type="text" class="form-control w-100 name" id="lastName"
placeholder="Last Name" required>
</div>
<br>
</div>
<!--Due Date-->
<h6 class="text-center font-weight-light">Due Date:</h6>
<div class="form-group px-3 text-center justify-content-center">
<input style="width: 200px;" class="form-control text-center mx-auto"
id="date" name="date" placeholder="MM/DD/YYYY" type="date" required
data-invalid-message="custom message from php here">
</div>
<!--Status-->
<div class="input-status mb-3">
<div class="input-status-prepend">
<label
class="input-status-text font-weight-light text-center mx-auto"
for="inputStatusSelect01">Current
Status:</label>
</div>
<!-- Changed value of numbers so that they will show on web page -->
<select style="width: 200px" class="custom-select"
id="inputStatusSelect01" required>
<option value="">Choose Status...</option>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Done">Done</option>
</select>
</div>
<!--Submit Button-->
</form>
<div class="row p-3">
<button class="btn btn-light mx-auto" id="addTaskUpdate" style="background-color: rgba(177, 98, 62, 0.804); outline-style:
#000;">Add Task</button>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</div>
<div class="row justify-content-center">
<button id="collapseFormButton" onclick="toggleTaskFormVisibilityHandler(this)"
class="btn-light btn mb-4" type="button" data-toggle="collapse" data-target="#collapseAdd"
aria-expanded="true" aria-controls="collapseAdd closed"
style="background-color: rgba(177, 98, 62, 0.804); outline-style: #000;">
Hide Task Form
</button>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="container">
<!-- Task Cards -->
<div class="shadow-lg p-2 bg-light rounded ml-3 mr-3 mb-3">
<!-- Changed pink background -->
<div class="pb-3" style="background-color: rgba(253, 168, 128, 0.192);">
<!--accordioncontainer-->
<h4 class="font-weight-light text-center p-3"><u>Current Tasks:</u></h4>
<div class="container" id="accordion">
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="align-center text-center">2022 JWD 007 group 07 ©</footer><br>
<!-- Bootstrap's JavaScript Files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="./assets/tasks.js"></script>
<script src="./assets/script.js"></script>
</main>
</body>
</html>