/
reminders.html
119 lines (111 loc) · 4.81 KB
/
reminders.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
<!-- This was a educational project made for UIC CS 422
Authors: Cecilia Avila, Sidney Spurgeon, Latrell Thomas, Kaveesha Weerasiri, Adrian Zavala-->
<!DOCTYPE html>
<html>
<head>
<title>Chemistry: Reminders</title>
<link rel="stylesheet" href="CSS/remindersLayout.css">
<link rel="stylesheet" href="CSS/navbarLayout.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
updateX();
readyModal();
});
function updateX(){
var closebtns = document.getElementsByClassName("liClose");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
}
function readyModal(){
$(document).on('click', '#helpButton', function(){
document.getElementById("helpModal").style.display = "block";
});
$(document).on('click', '.modalClose', function(){
document.getElementById("helpModal").style.display = "none";
});
window.onclick = function(event) {
var modal = document.getElementById("helpModal");
if (event.target == modal) {
modal.style.display = "none";
}
}
}
$(document).on('click', '#addButton', function(){
var rDesc = document.getElementById('reminderDesc').value;
var rDate = document.getElementById('pickDate').value;
if((rDesc !== "") && (rDate !== "")){
rDate = rDate.replace(/-/g,"/");
rDate = new Date(rDate);
rDOW = rDate.toString().substring(0,3);
rDate = rDOW + " " + rDate.toLocaleDateString();
var $newReminder = $('<li class="list-group-item">'+ rDesc + ' ' + ' - ' + rDate + '<span class="liClose">X</span></li>');
$('#reminderList').append($newReminder);
document.getElementById('reminderDesc').value = "";
document.getElementById('pickDate').value = "";
updateX();
}
else{
alert("Please enter a Description and Date.");
}
});
</script>
</head>
<body>
<div class="rContainer">
<div class = "rCenter">
<input type="button" id="helpButton" value="?">
<p id="chemistryTitle">Chemistry</p>
<p id="reminders">Reminders</p>
</div>
<div class="header">
<nav>
<ul>
<li><a href="index.html">Courses</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a class = "active" href="reminders.html">Reminders</a></li>
<li><a href="messages.html">Direct Messages</a></li>
<li><a href="assistance.html">Assistance</a></li>
<li><a href="settings.html">Settings</a></li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div class="listContainer">
<ul id="reminderList" class="list-group">
<li class="list-group-item">Assignment #4 - Tue 11/10/2020<span class="liClose">X</span></li>
<li class="list-group-item">Exam #2 - Fri 11/13/2020<span class="liClose">X</span></li>
</ul>
</div>
<div class="reminderInput">
<form id="reminderForm">
<div class="form-group">
<label for="reminderDesc">Reminder Description</label>
<input type="text" class="form-control" id="reminderDesc" placeholder="Description">
</div>
<div class="form-group">
<div class="md-form md-outline input-with-post-icon datepicker">
<label for="pickDate">Select a date:</label>
<input type="date" class="form-control" id="pickDate" placeholder="Select date" maxlength="100">
</div>
</div>
</form>
<button id="addButton" class="btn btn-primary">Add Reminder</button>
</div>
</div>
<!-- Modal content that should be placed in every html file with a help button -->
<div id="helpModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h1 style="text-align: center;">Need Help?<span class="modalClose">X</span></h1>
<img src="images/helpinstructions.png"/>
</div>
</div>
</body>
</html>