This repository has been archived by the owner on Dec 7, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
schedulePopUp.html
133 lines (111 loc) · 3.91 KB
/
schedulePopUp.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
<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1">
<title>Mock Schedule</title>
<link rel="stylesheet" type="text/css" href="CSS_Files/SchedulePopUp.css">
</head>
<body>
<div class="header">
<img alt="LSU logo" align="left" class=logo height=20px
style="padding-top: 15px; padding-right: 15px; padding-left: 15px"
src="https://www.lsu.edu/_resources_fierce/svgs/lsu-logo.svg" width=auto>
<div style="text-align: left; font-size: 20px; padding-top: 15px">
Schedule Planner
</div>
</div>
<br><br>
<ol id="parent" style="padding:0; line-height: 0; margin : 0;">
<th>Department
Course Number
Section
Credit Hours
</th>
</ol>
<table style="table-layout: fixed; width: 100%; position: fixed; bottom: 35px;">
<td>Department:</td>
<td><select id="dept" name="chooseDepartment">
<option disabled selected value> -- Select a department --</option>
<option value="CSC"> Computer Science</option>
<option value="ENGL"> English</option>
<option value="ENGR"> Engineering</option>
<option value="HNRS"> Honors</option>
</select></td>
<br/><br/>
<tr>
<td>Course Number:</td>
<td><input type="text" id="num"
placeholder="Course number"
value=""/>
</td>
</tr>
<br>
<tr>
<td>Course Section:</td>
<td><input type="text" id="section"
placeholder="Course section"
value=""/></td>
</tr>
<br>
<tr>
<td>Credit Hours:</td>
<td><input type="text" id="hours"
placeholder="Credit hours"
value=""/></td>
</tr>
</table>
<buttons style="position: fixed; bottom: 5px;">
<button type="button" id="addButton"
onclick="Courses.addItem(), Courses.clearItems()">
Add
</button>
<button type="button" id="removeButton"
onclick="Courses.removeItem()">
Remove
</button>
</buttons>
<script>
let Courses = {
addItem: function () {
// Get type of element from form
let type = "body"
//Get the text/value for the tag from the form
let value = document.getElementById("dept").value.padEnd(21, " \xa0") +
document.getElementById("num").value.padEnd(28, " \xa0") +
document.getElementById("section").value.padEnd(19, " \xa0") +
document.getElementById("hours").value.padEnd(19, " \xa0");
// createElement() is used for creating a new element
type
= document.createElement(type);
type.appendChild(
document.createTextNode(value));
// Append as child to the parent
document.getElementById(
"parent").appendChild(type);
},
removeItem: function () {
// Get type of element from form
let select = document.getElementById('parent');
select.removeChild(select.lastChild);
},
clearItems: function () {
document.getElementById("dept").value = "";
document.getElementById("num").value = "";
document.getElementById("section").value = "";
document.getElementById("hours").value = "";
},
getClassInstance: function () {
// Condition checking existence of instance
if (!document) {
document.getElementById("dept").value = "";
document.getElementById("num").value = "";
document.getElementById("section").value = "";
document.getElementById("hours").value = "";
}
}
};
</script>
</body>
</html>