-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathvideo_resources.html
333 lines (285 loc) · 15.7 KB
/
video_resources.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QS598XH622"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-QS598XH622');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Resources - Department of Computer Application</title>
<link rel="stylesheet" href="stylevideo.css">
<link rel="shortcut icon" href="emoji.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="department-title" id="home-button">
🖥️ Department of Computer Application
</div>
<nav>
<ul>
<li>
<a href="contacts/contact.html">
<img src="icons/world-wide-web (1).png" alt="Contact" class="contact-icon" id="contact-icon">
</a>
</li>
<li>
<div class="theme-switch" id="theme-switch"></div>
</li>
</ul>
</nav>
</header>
<main>
<section id="readme">
<h2>README</h2>
<p> Here, you can easily access YouTube videos from professional instructors for each semester. To get started, simply select your year from the dropdown menu.
After making your selection, you'll be able to explore and watch videos tailored to that specific year and semester.
Each card corresponds to a semester's subject video playlist or channel.
You can click on a card to directly access the specific videos.
If you have any questions or encounter any issues, feel free to reach out through the contact link provided on the website.
</p>
</section>
<h2>📹 Video Resources</h2>
<div class="dropdown-container">
<select id="year-select" class="dropdown-select">
<option value="Select Year" disabled selected>Select your Year</option>
<option value="year1">Year 1</option>
<option value="year2">Year 2</option>
<!-- <option value="year3">Year 3</option> -->
</select>
</div>
<div class="dropdown-container">
<select id="semester-select" class="dropdown-select">
<option value="Select Semester" disabled selected>Select your Semester</option>
<!-- Year 1 Semesters -->
<option value="Select Semester" data-year="year1" disabled selected>Select your Semester</option>
<option value="sem1" data-year="year1">Semester 1</option>
<option value="sem2" data-year="year1">Semester 2</option>
<!-- Year 2 Semesters -->
<option value="Select Semester" data-year="year2" disabled selected>Select your Semester</option>
<option value="sem3" data-year="year2">Semester 3</option>
<option value="sem4" data-year="year2">Semester 4</option>
<!-- Year 3 Semesters -->
<option value="Select Semester" data-year="year3" disabled selected>Select your Semester</option>
<option value="sem5" data-year="year3">Semester 5</option>
<option value="sem6" data-year="year3">Semester 6</option>
</select>
</div>
<!-- Year 1 -->
<div class="year">
<h3></h3> <!-- Placeholder for Year Header -->
<h3></h3> <!-- Placeholder for Semester Header -->
<div class="video-row">
<!-- Video 1 -->
<a href="https://www.youtube.com/playlist?list=PLdo5W4Nhv31a8UcMN9-35ghv8qyFWD9_S" target="_blank"
class="video-box" data-year="year1" data-semester="sem1">
<h3>C - Language Basics to Advance</h3>
<p>No need to go through the entire playlist—just watch the brief explanations for your
understanding and then try solving the question papers.</p>
</a>
<!-- Video 2 -->
<a href="https://youtube.com/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w&si=JqeJdrULfbsW5MbE"
target="_blank" class="video-box" data-year="year1" data-semester="sem1">
<h3>Web Development Series for Beginners to Pro Level Web Dev</h3>
<p>No need to go through the entire playlist—just watch the core lectures of HTML, CSS, and
JavaScript, and focus more on the language as you have to write the paper for your understanding
and then try solving the question papers.</p>
</a>
<!-- Video 3 -->
<a href="https://www.youtube.com/@DreamMaths/featured" target="_blank" class="video-box" data-year="year1" data-semester="sem1">
<h3>Discrete Mathematics</h3>
<p>In maths, you can either choose this channel or one of your choice.</p>
</a>
<!-- Video 4 -->
<a href="https://youtube.com/playlist?list=PLUhebcqFf6aEm07MOovpDrXcyxfNNZgGi&si=SLRbGNUeyz4FNRFU"
target="_blank" class="video-box" data-year="year1" data-semester="sem1">
<h3>Digital Electronics</h3>
<p>Digital Electronics may seem like a tricky subject, but if you master the theory along with some
tips and tricks, it could be a game changer for your CGPA.</p>
</a>
<!-- Video 5 -->
<a href="https://youtube.com/playlist?list=PLIC0i9IRboHb19v2dF0yuenG7xDOGJLeP&si=MsW_l0YlAx6xKYtA"
target="_blank" class="video-box" data-year="year1" data-semester="sem1">
<h3>Environmental Studies</h3>
<p>Since it's a qualifying subject, don't stress too much, but don't overlook it either, as it can
boost your CGPA.</p>
</a>
</div>
<div class="video-row">
<a href="https://www.youtube.com/playlist?list=PLdo5W4Nhv31bbKJzrsKfMpo_grxuLl8LU" target="_blank"
class="video-box"data-year="year1" data-semester="sem2">
<h3>Data Structure and Algorithms</h3>
<p>No need to go through the entire playlist—just watch the brief explanations for your
understanding and then try solving the question papers.</p>
</a>
<!-- Video 2 -->
<a href="https://www.youtube.com/playlist?list=PL-JvKqQx2Atfuxo1LR0m9RQramPymoBsj" target="_blank"
class="video-box" data-year="year1" data-semester="sem2">
<h3>Computer Organization And Architecture</h3>
<p>No need to go through the entire playlist—just watch the core lectures of the topics and try to
learn the concepts as it is a total theoritical subject as well.</p>
</a>
<!-- Video 3 -->
<a href="https://www.youtube.com/@DreamMaths/featured" target="_blank" class="video-box" data-year="year1" data-semester="sem2">
<h3>Discrete Mathematics II</h3>
<p>In maths, you can either choose this channel or one of your choice.</p>
</a>
<!-- Video 4 -->
<a href="https://www.youtube.com/playlist?list=PL9RcWoqXmzaKWxaNoDhW4O1kA0hK9AYys" target="_blank"
class="video-box" data-year="year1" data-semester="sem2">
<h3>Professional Communication</h3>
<p>Try exploring the topics in this specific playlist, as not all topics are available in one place.
However, this playlist can help you comfortably cover the entire syllabus..</p>
</a>
<!-- Video 5 -->
<a href="https://www.youtube.com/playlist?list=PLTUO2J9MZQt3HbVdCA1zCArSqPsg5P1nl" target="_blank"
class="video-box" data-year="year1" data-semester="sem2">
<h3>Human Value and Ethics</h3>
<p>Focus on moral values and everyday principles for a fulfilling life. Covering the entire playlist
will equip you to craft thoughtful and insightful answers in your exams, making the process both
easier and more engaging.</p>
</a>
</div>
<div class="video-row">
<a href="https://www.youtube.com/playlist?list=PLqzoL9-eJTNBDdKgJgJzaQcY6OXmsXAHU" target="_blank" class="video-box" data-year="year2" data-semester="sem3">
<h3>Statistical Computing With R Programming</h3>
<p>This video thoroughly covers all the core components of the R language course, providing a
comprehensive overview of the essential topics.</p>
</a>
<!-- Video 2 -->
<a href="https://www.youtube.com/playlist?list=PLC36xJgs4dxGcz7nZaxGxxmbJrcgDXhFk" target="_blank"
class="video-box"data-year="year2" data-semester="sem3">
<h3>Data-Base-Management And SQL</h3>
<p>This playlist provides in-depth knowledge of
DBMS and SQL. Be sure to cover all the topics listed
in the core syllabus, as reflected in the video titles.
Additionally, focus on gaining practical experience,
as applying theory in practice is crucial for mastering
DBMS.</p>
</a>
<!-- Video 3 -->
<a href="https://www.youtube.com/playlist?list=PLEHGYFbPuuMFV4_ZNPO6fXa4kZ0EM0vP1" target="_blank"
class="video-box" data-year="year2" data-semester="sem3">
<h3>Discrete Mathematics III</h3>
<p>
For math, you can either choose this channel or select one of your preference, as the syllabus
is broad enough to accommodate different options.</p>
</a>
<!-- Video 4 -->
<a href="https://www.youtube.com/playlist?list=PLDzeHZWIZsTr3nwuTegHLa2qlI81QweYG" target="_blank"
class="video-box" data-year="year2" data-semester="sem3">
<h3>Operating System</h3>
<p>Try exploring the topics in this specific playlist, as not all topics are available in one place.
However, this playlist can help you comfortably cover the entire syllabus..</p>
</a>
</div>
</div>
</main>
<footer>
<a href="HOME.html"><p>© 2024 Video Resources</p></a>
<p class="contact-footer"><a href="contacts/contact.html">Contact</a></p>
</footer>
<script>
document.getElementById('home-button').addEventListener('click', function () {
if (window.location.pathname === '/HOME.html' || window.location.pathname === '/') {
window.location.reload(); // Reloads the page if it's already the homepage
} else {
window.location.href = 'HOME.html'; // Navigates to the homepage if not already there
}
});
document.addEventListener('DOMContentLoaded', function () {
const themeSwitch = document.getElementById('theme-switch');
const currentTheme = localStorage.getItem('theme') || 'light';
// Apply the saved theme on load
if (currentTheme === 'dark') {
document.body.classList.add('dark');
themeSwitch.classList.add('dark-theme');
}
themeSwitch.addEventListener('click', function () {
document.body.classList.toggle('dark');
themeSwitch.classList.toggle('dark-theme');
// Save the user's theme preference
if (document.body.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Get the header elements (updated selectors)
const yearHeader = document.querySelector('.year h3:first-of-type');
const semesterHeader = document.querySelector('.year h3:nth-of-type(2)');
// Video Resource Filtering Logic (With data attributes)
const yearSelect = document.getElementById('year-select');
const semesterSelect = document.getElementById('semester-select');
const videoResources = document.querySelectorAll('.video-box');
const semesterOptions = document.querySelectorAll('#semester-select option');
// Initially hide all video resources
videoResources.forEach(video => {
video.style.display = 'none';
});
// Hide semesters initially
semesterOptions.forEach(option => {
option.style.display = 'none';
});
// Year Change Event Listener
yearSelect.addEventListener('change', function () {
const selectedYear = yearSelect.value;
// Filter semesters based on selected year
semesterOptions.forEach(option => {
if (option.dataset.year === selectedYear) {
option.style.display = 'block';
} else {
option.style.display = 'none';
}
});
// Hide all video resources
videoResources.forEach(video => {
video.style.display = 'none';
});
// Update the header titles
yearHeader.textContent = `Year ${selectedYear.replace('year', '')}`;
// DON'T reset semesterHeader here, let it stay as is
// Remove the semester placeholder (if it exists)
semesterHeader.textContent = ''; // Clear the placeholder content
// Reset the semester dropdown
semesterSelect.value = 'Select Semester'; // Set the default value
// Update video resources on semester change
semesterSelect.addEventListener('change', function () {
const selectedSemester = semesterSelect.value;
semesterHeader.textContent = `Semester ${selectedSemester.replace('sem', '')}`;
videoResources.forEach(video => {
const resourceYear = video.dataset.year;
const resourceSemester = video.dataset.semester;
if (selectedYear === resourceYear && selectedSemester === resourceSemester) {
video.style.display = 'block'; // Show the video
} else {
video.style.display = 'none'; // Hide the video
}
});
});
});
// Semester Change Event Listener (Outside of Year Change)
semesterSelect.addEventListener('change', function () {
const selectedSemester = semesterSelect.value;
const selectedYear = yearSelect.value; // Get selected year
// Update the header titles
semesterHeader.textContent = `Semester ${selectedSemester.replace('sem', '')}`;
videoResources.forEach(video => {
const resourceYear = video.dataset.year;
const resourceSemester = video.dataset.semester;
if (selectedYear === resourceYear && selectedSemester === resourceSemester) {
video.style.display = 'block'; // Show the video
} else {
video.style.display = 'none'; // Hide the video
}
});
});
});
</script>
</body>
</html>