-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (118 loc) · 3.9 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
<!--
Page shows following layout:
1. Heading for search
2. Search box and dropdown for number of results to show
3. Result table
4. each row in result table:
Sample card to show
1. Name
2. Kerberos
3. Courses
4. Button to hide and show courses
Use the function showmore() to show the courses
use bootstrap
make the html responsive
-->
<!--
Page shows following layout:
1. Heading for search
2. Search box and dropdown for number of results to show
3. Result table
4. each row in result table:
Sample card to show
1. Name
2. Kerberos
3. Courses
4. Button to hide and show courses
Use the function showmore() to show the courses
use bootstrap
make the html responsive
-->
<html>
<head>
<title>Search Courses - IIT Delhi</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="iitd, iit delhi, courses">
<meta name="author" content="Anirudha Kulkarni">
<meta name="description" content="Find the courses taken by your friends. Judge the course load and make better choices.">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Search Window</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- list of steps to follow -->
<div class="row">
<div class="col-sm-12">
<h4>Tips</h4>
<ol>
<li>You can search through Name, Entry Number, Kerberos, Course code</li>
<li>Search is case insensitive</li>
<li>Sample queries:
<ul>
<li>Search for all students in COL106: <b>COL106</b></li>
<li>Search for all students in COL106 from 1st semester of 2022: <b>2201-COL106</b></li>
<li>Search for all Btech students from 2020 CS department<b></b>: <b>2020CS</b></li>
</ul>
</li>
<li>The stats such as average courses/max courses will be shown for subset of students matching the pattern</li>
<li>Contribute here <a href="https://github.com/anirudhakulkarni/courseSearch">Github</a> <img src="https://anirudhakulkarni-visitor-badge.glitch.me/badge?page_id=anirudhakulkarni.coursesearch" title="Free Counter" Alt="web counter" border="0" >
</li>
</ol>
</div>
</div>
<!-- break line -->
<div class="row">
<div class="col-sm-12">
<hr />
</div>
<form onkeypress="return event.keyCode!=13">
<div class="form-group">
<label>Search:</label>
<input type="text" id="search" placeholder="Search with Name/Entry Number/Kerberos/Course" />
</div>
<div class="form-group">
<label for="sel1">Select Max Results:</label>
<select class="form-control" id="maxResults">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="10000">10000</option>
</select>
</div>
<!-- show number of results found -->
<div id = "resultsFound">
<p>Results Found:
<span id = "resultsFoundNumber"></span>
</p>
<span id = "resultsStats"></span>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="result"></div>
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>