-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
446 lines (380 loc) · 21.4 KB
/
app.js
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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
// Dom controller
class Dom{
constructor(){
this.navbar=document.querySelector('.navbar');
console.log('Dom constructor called');
}
}
// setEventLestener();
// App Controller
class AppController{
constructor(){
this.myDom=new Dom();
this.mynav=this.myDom.navbar;
this.mythis=this;
// console.log('app controller constructor called');
}
showNav(){
var elem=document.querySelectorAll('li.showHide');
for(var i=0;i<elem.length;i++){
elem[i].style.display='inline-block';
}
document.querySelector('.navbar').style.height='300px';
document.querySelector('.nav-btn').style.display='none';
document.querySelector('.close-btn').style.display='block';
}
closeNav(){
var elem=document.querySelectorAll('li.showHide');
for(var i=0;i<elem.length;i++){
elem[i].style.display='none';
}
document.querySelector('.navbar').style.height='60px';
document.querySelector('.nav-btn').style.display='block';
document.querySelector('.close-btn').style.display='none';
}
// all events are setupped in this function
setEventLestener(){
// mythis variable is declared to access insert course method from deep scope
var mythis=this;
console.log('set event lestener function called');
document.querySelector('.nav-btn').addEventListener('click' , this.showNav);
document.querySelector('.close-btn').addEventListener('click' , this.closeNav);
window.addEventListener('resize', ()=> {
if(window.innerWidth > 768){
var elem=document.querySelectorAll('li.showHide');
for(var i=0;i<elem.length;i++){
elem[i].style.display='block';
}
document.querySelector('.navbar').style.height='150px';
document.querySelector('.nav-btn').style.display='none';
document.querySelector('.close-btn').style.display='none';
}else{
document.querySelector('.navbar').style.height='60px';
var elem=document.querySelectorAll('li.showHide');
for(var i=0;i<elem.length;i++){
elem[i].style.display='none';
}
document.querySelector('.nav-btn').style.display='block';
}
});
// event for search input when someone press enter key
document.addEventListener('keypress', function(event){
if(event.keyCode ===13 || event.which ===13){
// console.log("enter pressed");
let searchInput=document.querySelector('#searchInp');
let searchPattern=new RegExp(searchInput.value,'i','g');
// const courseObj=new courses();
const courseArray=courses.createCourses();
let searchResult=new Array();
for(let i=0;i<courseArray.length;i++){
if(searchPattern.test(courseArray[i].title) || searchPattern.test(courseArray[i].description)){
searchResult.push(courseArray[i]);
}
}
//we should empty the Search Result block(division) if not it will be doplicated
document.querySelector('.searchResult').innerHTML='';
//check if a search result exist or not
if(searchResult.length==0){
// we should empty the course list container
let courseElements=document.querySelector('.col2');
courseElements.innerHTML='';
courseElements.insertAdjacentHTML("beforeend",'<h1 class="notMatched">Course Not found</h1>');
document.querySelector('.searchResult').insertAdjacentHTML("beforeend",`<h1 class="title">0 , Result for "${searchInput.value}"</h1>
`);
document.querySelector('.search-result').innerHTML=' ';
}else{
document.querySelector('.searchResult').insertAdjacentHTML("beforeend",`<h1 class="title">${searchResult.length} , Result for "${searchInput.value}"</h1>
<p class="course-info bold">Explore <span class="purple big">${searchInput.value}</span> cousrses</p>
<p class="suggest bold">student also learn , <span class="purple">Data science, Machine Learning , Flask , Web Scraping , programming fundamental, Data analysis</span></p>`);
// upadate search result text
document.querySelector('.search-result').innerHTML=`${searchResult.length}, Search Result`;
// show result on page
mythis.insertcourses(searchResult);
// let obj=new AppController();
// obj.insertcourses(searchResult);
}
}
});
document.querySelector('.sort-opt').addEventListener('change',()=>{
let sortOption=document.querySelector('.sort-opt').value;
console.log(this.ManuplatedArray)
this.sortCourses(this.ManuplatedArray,sortOption);
// if(sortOption=='relavant'){
// console.log('we sshould search on most relavant')
// }else if(sortOption=='viewed'){
// console.log('we should search most vied')
// }else if(sortOption=='rated'){
// console.log('we should search Highest rated')
// }else if(sortOption=='newest'){
// console.log('we should search newest');
// }// no need for else statement
});
// filters event
document.querySelectorAll('.options').forEach( element=>{
element.addEventListener('change',()=>{
let className=element.className;
className=className.slice(0,className.search(' '));
let filteredArray=courses.createCourses();
// here we need to execute all if statement so therefore selected if's rather than (if elseif)
if(document.querySelector(`.${className}`).value==''){
document.querySelector('.NumOfFilter').textContent=parseInt(document.querySelector('.NumOfFilter').textContent.valueOf())-1;
let filterValuesObject=this.getAllfiltersValues();
if(filterValuesObject.rated!==''){
console.log(document.querySelector(`.${className}`).value);
filteredArray=this.filterCourses(filteredArray,document.querySelector(`.rated`).value,'rated');
}
if(filterValuesObject.language!==''){
console.log(document.querySelector(`.${className}`).value);
filteredArray=this.filterCourses(filteredArray,document.querySelector(`.language`).value,'language');
}
if(filterValuesObject.videoDuration!==''){
console.log(className);
console.log(document.querySelector(`.${className}`).value);
filteredArray=this.filterCourses(filteredArray,document.querySelector(`.videoDuration`).value,'videoDuration');
}
if(filterValuesObject.topic!==''){
filteredArray=this.filterCourses(filteredArray,document.querySelector(`.topic`).value,'topic');
}
console.log(filteredArray);
this.insertcourses(filteredArray);
}else{
this.filterCourses(this.ManuplatedArray,document.querySelector(`.${className}`).value, className);
}
});
});
// document.querySelector('.rated').addEventListener('change',()=>{
// if(document.querySelector('.rated').value==''){
// let filterObject=this.getAllfiltersValues();
// console.log(filterObject.rated);
// console.log(filterObject.language);
// console.log(filterObject.videoDuration);
// console.log(filterObject.topic);
// }
// this.filterCourses(this.ManuplatedArray,document.querySelector('.rated').value,'rated');
// });
// document.querySelector('.language').addEventListener('change',()=>{
// this.filterCourses(this.ManuplatedArray,document.querySelector('.language').value,'language');
// });
// document.querySelector('.videoDuration').addEventListener('change',()=>{
// this.filterCourses(this.ManuplatedArray,parseFloat(document.querySelector('.videoDuration').value),'videoDuration');
// });
// document.querySelector('.topic').addEventListener('change',()=>{
// this.filterCourses(this.ManuplatedArray,document.querySelector('.topic').value,'topic');
// });
}
getAllfiltersValues(){
return {
rated: document.querySelector('.rated').value,
language: document.querySelector('.language').value,
videoDuration: document.querySelector('.videoDuration').value,
topic: document.querySelector('.topic').value,
allcourses: courses.createCourses()
};
}
insertcourses(array){
// we should empty the course list container
let courseElements=document.querySelector('.col2');
courseElements.innerHTML='';
// check array if there is some courses or not
if(array.length==0){
courseElements.insertAdjacentHTML("beforeend",'<h1 class="notMatched">Course Not found</h1>');
document.querySelector('.search-result').innerHTML=' ';
}
// Store current manupated array
this.ManuplatedArray=array;
//for loop to iterate through array and set element content
let stars;
for(let i=0;i<array.length;i++){
// insert exact course rated star
if(array[i].ratedStar==1){
stars=`<span class="stars">★</span>`;
}else if(array[i].ratedStar==2){
stars=`<span class="stars">★★</span>`;
}else if(array[i].ratedStar==3){
stars=`<span class="stars">★★★</span>`;
}else if(array[i].ratedStar==4){
stars=`<span class="stars">★★★★</span>`;
}else if(array[i].ratedStar>4){
stars=`<span class="stars">★★★★☆</span>`;
}
//insert course on page
document.querySelector('.col2').insertAdjacentHTML('beforeend',`<div class="courses">
<div class="cover-image">
<img src="${array[i].Img}" alt="course cover image">
</div>
<div class="course-details">
<div class="related-details">
<h5 class="title">${array[i].title}</5>
<p class="para">${array[i].description}</p>
<h6 class="course-instructor">${array[i].instructor}</h6>
<h6 class="rated">${array[i].ratedStar} ${stars} (${array[i].viewed})</h6>
<h6 class="content-info">${array[i].Duration} total hours - ${array[i].lectures} lectures : ${array[i].level}</h6>
</div>
<div class="course-price">
<h3 class="price">${array[i].price}$</h3>
<h3 class="price">${array[i].date}</h3>
</div>
</div>
</div>`);
// document.querySelector()
// console.log(courseDiv);
}
}
sortCourses(array,sortType){
// console.log(`sort function called with ${array} and ${sortType}`);
// we will sort with bubble sort algorithm
let temp;// for swapping
switch(sortType){
case 'relavant' :
this.insertcourses(array);
break;
case 'viewed' :
for(let i=0;i<array.length;i++)
for(let j=0;j<array.length-i-1;j++){
if(array[j+1].viewed>array[j].viewed){
[array[j+1],array[j]]=[array[j],array[j+1]];
}
}
this.insertcourses(array);
break;
case 'rated' :
for(let i=0;i<array.length;i++)
for(let j=0;j<array.length-i-1;j++){
if(array[j+1].ratedStar>array[j].ratedStar){
[array[j+1],array[j]]=[array[j],array[j+1]];
}
}
this.insertcourses(array);
break;
case 'newest' :
// let currentDate=new Date();
// console.log(currentDate.setDate(currentDate.getMonth()-11));
for(let i=0;i<array.length;i++)
for(let j=0;j<array.length-i-1;j++){
// let checkDate=new Date(array[j].date);
console.log(new Date(array[j+1].date).valueOf() > new Date(array[j].date).valueOf() );
if(new Date(array[j+1].date).getMonth() > new Date(array[j].date).getMonth() && new Date(array[j+1].date).getFullYear() >= new Date(array[j].date).getFullYear()){
[array[j+1],array[j]]=[array[j],array[j+1]];
console.log('swapped occur');
}
}
this.insertcourses(array);
console.log('newest sorting is done');
break;
}
}
filterCourses(array,filterValue,option){
console.log()
let filteredArray=new Array();
// checking for filter applying and unapplying and change filter number with matched condition
if(document.querySelector(`.${option}`).value !=''){
document.querySelector('.NumOfFilter').textContent=parseInt(document.querySelector('.NumOfFilter').textContent.valueOf())+1;
}else{
document.querySelector('.NumOfFilter').textContent=parseInt(document.querySelector('.NumOfFilter').textContent.valueOf())-1;
}
switch(option){
case 'rated':
// filter courses by selected number of rated star
for(let i=0;i<array.length;i++){
if(array[i].ratedStar>=filterValue){
filteredArray.push(array[i]);
}
}
break;
case 'language':
for(let i=0;i<array.length;i++){
// console.log(array[i]);
if(array[i].language==filterValue){
filteredArray.push(array[i]);
}
}
break;
case 'videoDuration':
console.log('filter value '+filterValue);
console.log('filter video Duration');
for(let i=0;i<array.length;i++){
// console.log(array[i]);
// console.log("backend "+typeof array[i].Duration);
if(array[i].Duration<=filterValue){
filteredArray.push(array[i]);
}
}
console.log(filteredArray);
break;
case 'topic':
for(let i=0;i<array.length;i++){
// console.log(array[i]);
// console.log("backend "+typeof array[i].Duration);
if(array[i].topic==filterValue){
filteredArray.push(array[i]);
}
}
break;
}
if(filteredArray.length==0){
filteredArray=courses.createCourses();
}
this.ManuplatedArray=filteredArray;
this.insertcourses(filteredArray)
console.log(filteredArray);
return filteredArray;
}
}
class courses{
constructor(Img,title,description,instructor,ratedStar,Duration,level,language,feature,date,topic,price,lectures,viewed){
this.Img=Img;
this.title=title;
this.description=description;
this.instructor=instructor;
this.ratedStar=ratedStar;
this.Duration=Duration;
this.level=level;
this.language=language;
this.feature=feature;
this.date=date;
this.topic=topic;
this.price=price;
this.lectures=lectures;
this.viewed=viewed;
}
static createCourses(){
// Creating courses with fake contents
let course1=new courses('courseCoverImg/image1.PNG','100 Days of Code: The Complete phyton pro bootcamp for 2023','Master <span class="important">Phyton</span> by building 100 projects in 100 days. learn data science , automation, build websites, games and apps.','Dr. Angela YU',4.3,64,'All level','English','notknown','4,12,2022','programming','30',44,66489);
let course2=new courses('courseCoverImg/image2.PNG','2022 complete phyton Bootcamp from zero to hero','learn phyton like professional, start from basic and go all the way to create your own application and games.','Jose portila',4.7,34,'All level','English','notknown','5,12,2021','programming','12',22,129988);
let course3=new courses('courseCoverImg/cssFoundationFramwork.PNG','Css foundation framwork 2022','learn the cool framwork ande enjoy easy design.','Dr. Amit mehra',4.1,3,'intermediate','Urdu','notknown','6,12,2021','programming','6',13,917219);
let course4=new courses('courseCoverImg/exprssJsAndNodeJs.PNG','Node.js and express.js complete course','learn node and express with one project on each and make your own application with fun.','mike willis',3,17,'basic','Arabic','notknown','2,1,2020','programming','15',24,32200);
let course5=new courses('courseCoverImg/meterializeCss.PNG','Css meterialize framwork complete','spare your time with meterialize framwork and make responsive design pretty easy.','Rahmat Dansih',2,1,'All level','Persion','notknown','3,7,2022','programming','8',8,1500);
let course6=new courses('courseCoverImg/oraclePashto.PNG','Oracle complete pashto course','learn oracle in pashto and make great databases and learn useful query with bank MS project.','Abdullah sorush',1,32,'basic','Pashtoo','notknown','4,12,2022','database','13',75,689762);
let course7=new courses('courseCoverImg/laravelFromScratch.PNG','Laravel complete freeCodeCamp course form scratch','learn laravel and build great and secure website , include two project','james gasoline',3,44,'Expert','English','notknown','1,24,2022','programming','36',72,23119);
let course8=new courses('courseCoverImg/oraclePashto.PNG','networking complete course form zero to hero','learn networking including CCNA, CCNP, CCNE. ','Abdullah sorush',2,16,'expert','Pashtoo','notknown','9,12,2022','network','18',39,1125);
let course9=new courses('courseCoverImg/image2.PNG','data science with phyton complete from scratch','learn phyton like professional, work with data science .','william\'s george',4.4,7,'expert','English','notknown','12,3,2022','data science','115',35,1123255);
let course10=new courses('courseCoverImg/javascript.PNG','Modern javascript from the begining','learn javascript, make interactive and dynamic webiste.','Abbacki',4.5,17,'All level','English','notknown','10,6,2022','programming','90',136,6097);
let course11=new courses('courseCoverImg/javascript1.PNG','The complete javascript course','learn javascript form intial state to master level.','Jonas schemedtmann',4.6,26,'All level','Persion','notknown','15,9,2022','programming','70',87,753297);
let course12=new courses('courseCoverImg/javascriptPersion.PNG','The complete javascript Pashtoo course','learn javascript with ease and enjoy making application and websites.','ahmad wiyar',4.2,44,'All level','Pashtoo','notknown','10,11,2022','programming','10',49,335512);
let course13=new courses('courseCoverImg/typescript.PNG','The complete typescript diamond course','learn typescript(javascript) language and enjoy the cool feature of javascript.','mikewell schorlet',4.2,23,'expert','English','notknown','21,6,2022','programming','15',30,335512);
let course14=new courses('courseCoverImg/LMSproject.PNG','Libray management system in java','build a library management system with full features.','mikewell schorlet',4.2,30,'expert','English','notknown','21,12,2022','programming','29',70,335512);
let course15=new courses('courseCoverImg/ReactJS.PNG','React (javascript) full course','learn react framework and build beautiful app and websites.','jose waker',4.4,73,'expert','English','notknown','6,12,2022','programming','29',120,1112355);
//place courses in array
let arr=[course1,course2,course3,course4,course5,course6,course7,course8,course9,course10,course11,course12,course13,course14,course15];
return arr;
}
getCourses(){
console.log('you will get the courses');
}
}
function main(){
console.log('main function loaded');
// create objects
const myDom=new Dom();
const AppCtrl=new AppController();
// const AppCtrl=Object.create(AppController);
AppCtrl.setEventLestener();
//create courses
const arr=courses.createCourses();
// insert courses on page
AppCtrl.insertcourses(arr);
function getCourses(){
return arr;
}
}
window.addEventListener('load',()=>{main();});