forked from sachidanand-pradhan/udemy-clone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesc.html
525 lines (435 loc) · 26.2 KB
/
desc.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
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
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="./scripts/navbar.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="desc.css">
</head>
<body style="font-family: sf pro text,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
color: #1c1d1f;">
<header id="nav"></header>
<div class="flex mb-10">
<div id="left">
<div style="background-color: #1c1D1F; color: #ffffff;" id="black" class="flex">
<div id="blackLeft" class="w-2/3">
<div id="inner" class="ml-36 pt-4 pr-14">
<div style="color: #CEC0FC;" class="cursor-pointer font-bold text-sm py-4"> Development > Web
Devlopment >
<span id="title">Javascript</span>
</div>
<h1 id="courseName" class="text-3xl pb-2 font-bold">The Complete JavaScript Course 2021: From
Zero to Expert!
</h1>
<h3 id="course1" class="text-lg pb-2 font-semibold">The modern JavaScript course for everyone!
Master JavaScript with
projects, challenges and theory. Many courses in one!</h3>
<div class="pb-2"> <span
style="background-color: #eceb98;color:#3d3c0a; padding: 4px 6px;">Bestseller</span><span
id="rating"><p>⭐⭐⭐⭐⭐</p> 4.7</span><span><a href="#" style="color: #CEC0FC;"> <u>.(118,739
ratings).</u> </a></span><span>521,515
students</span></div>
<div class="pb-2">
<span>Created by </span><a id="author_name" style="color: #CEC0FC;" href=""><u>Jonas
Schmedtmann</u></a>
</div>
<div class="pb-2">
<span>Last updated 10/2021 </span><span>English</span><span> English, French
[Auto],</span><span><a href="#"> <u>6 more</u></a></span>
</div>
</div>
</div>
<div id="blackRight" class="border mt-32" style="width: 336px;">
</div>
</div>
<div id="white" class="flex">
<div id="whiteLeft" class="w-2/3 ml-36">
<div id="learn" class="w-3/4"> </div>
<div id="curated" class="w-3/4 border flex p-4 mt-6 border-gray-300">
<div id="u-lo">
<img class="h-6 w-6" src="https://cdn.worldvectorlogo.com/logos/udemy-3.svg" alt="">
</div>
<div class="ml-5 pt-1">
<span class="font-bold">Curated for the <a style="color:
#401b9c;" href="#"><u>Udemy Buisness</u></a> collection</span>
</div>
</div>
<h1 class="w-3/4 mt-6 font-bold text-2xl ">Course content</h1>
<div class="flex w-3/4 border border-gray-300 mt-6">
<div>
<span>21 sections </span><span class="font-bold">.</span><span> 315 lectures</span><span> .
</span><span>68h 21m total length</span>
</div>
<div>
<span style="color:
#401b9c;" class="cursor-pointer ml-28"><u>Expand all</u></span>
</div>
</div>
<div id="content" class="w-3/4 border border-gray-300 mt-6"></div>
<div id="requirements" class="w-3/4 mt-6">
<h1 class="font-bold text-2xl">Requirements</h1>
<ul class="p-6 text-sm">
<li id="r1"> No coding experience is necessary to take this course! I take you from beginner
to expert!</li><br />
<li id="r2">Any computer and OS will work — Windows, macOS or Linux. We will set up your
text editor the course.
</li> <br />
<li id="r3">A basic understanding of HTML and CSS is a plus, but not a must! The course
includes an HTML and CSS
crash course.</li>
</ul>
</div>
<div id="top_companies" class="w-3/4 border border-gray-300 p-4 mt-6">
<h1 style="color:#1c1d1f;
font-family:SuisseWorks;
font-size:19px;
font-weight:700;" class="pt-2 ml-4">Top companies trust Udemy</h1>
<h3 class="ml-4 mt-1">Get you team access to Udemy's top 6,000+ courses</h3>
<div id="com-logo" class="flex mt-3 pb-3">
<div class=""><img class="w-20" src="https://s.udemycdn.com/partner-logos/v4/apple-dark.svg"
alt=""></div>
<div><img class="w-24 ml-5" src="https://s.udemycdn.com/partner-logos/v4/box-dark.svg"
alt=""></div>
<div><img class="w-20 ml-5"
src="https://s.udemycdn.com/partner-logos/v4/volkswagen-dark.svg" alt=""></div>
<div><img class="w-36 ml-5" src="https://s.udemycdn.com/partner-logos/v4/netflix-dark.svg"
alt=""></div>
<div><img class="w-36 ml-5"
src="https://s.udemycdn.com/partner-logos/v4/eventbrite-dark.svg" alt=""></div>
</div>
<button class="border border-black font-bold cursor-pointer p-2">Try Udemy Buisness</button>
</div>
<div id="show_desc" class="w-3/4 mt-6">
<h1 class="font-extrabold text-2xl pb-2">Description</h1>
<p class="text"><span id="desc1" class="font-bold italic">* The #1 bestselling JavaScript course
on Udemy! *</span> <br /><span id="desc2" class="font-bold italic">* Completely re-built
from scratch in October 2020 (68 hours video) *</span> <br /> <span id="desc3"
class="italic text-sm">"Really, really well made course. Super in-depth, with great
challenges and projects that will solidify your Javascript understanding. I found the
lectures were paced perfectly -- Jonas doesn't skip over anything that might be useful
to a JS developer" </span><span class="font-semibold">-- </span> <span class="text-lg"
id="author">Carson Bartholomew</span> <span class="hidden" id="moreText"> <span
class="text-sm" id="desc4">JavaScript is the most popular programming language in
the world. It powers the entire modern web. It provides millions of high-paying jobs
all over the world.</span> <br /> <span class="text-sm">That's why you want to learn
JavaScript too. And you came to the right place!</span> <br /> <span
class="font-bold ">Why is this the right JavaScript course for you?</span> <br />
<span class="italic">This is the most complete JavaScript course on Udemy. It's an
all-in-one package that will take you from the very fundamentals of JavaScript, all
the way to building modern and complex applications.</span> <br /> <span
class="text-sm">You will learn modern JavaScript from the very beginning,
step-by-step. I will guide you through </span> <span
class="font-bold text-sm">practical and fun code examples, important theory </span>
<span class="text-sm">about how JavaScript works behind the scenes, and </span><span
class="cla
font-bold text-sm">beautiful and complete projects.</span> <br /> <span class="text-sm">You
will also learn how to think like a developer, how to plan application features, how
to architect your code, how to debug code, and a lot of other real-world skills that
you will need on your developer job.</span> <br /> <span class="text-sm">And unlike
other courses, this one actually contains beginner, intermediate, advanced, and even
expert topics, so </span><span class="text-sm font-bold">you don't have to buy any
other course in order to master JavaScript from the ground up!</span> <br /> <span
class="text-sm">But... You don't have to go into all these topics. This is a huge
course, because, after all, it's "The Complete JavaScript Course". In fact, it's
like many courses in one! But you can become an excellent developer by watching only
parts of the course. That's why I built this course in a very modular way, and
designed pathways that will take you through the course faster.</span> <br />
<span class="text-sm italic">By the end of the course, you will have the knowledge and
confidence that you need in order to ace your job interviews and become a
professional developer.</span></span></p>
<span style="color:
#401b9c;" id="read_more_btn" class="cursor-pointer font-bold flex">Show more</span>
</div>
<div id="F-review" class="w-3/4 mt-6 border border-gray-300">
<h1 class="font-bold text-2xl p-6">Featured review</h1>
<div class="flex">
<div class="rounded-full ml-5 h-24 w-24 items-center -mt-3 mb-2 justify-center"><img
class="rounded-full" src="https://img-c.udemycdn.com/user/200_H/106349520_68e8.jpg"
alt=""></div>
<div class="ml-6">
<h1 class="font-bold text-base">Vishal Ramane</h1>
<h1>18 courses</h1>
<h1>1 review</h1>
</div>
</div>
<h1 class="ml-5">⭐⭐⭐⭐⭐ 10 months ago</h1>
<h1 class="text-sm ml-5">I had some development experience before (backend) and I wanted to
really learn JavaScript and I must tell you, this is the best JavaScript course on the
internet period. It has everything you need to get you up to speed and more!!! Apart from
innovative challenges and awesome projects, what I personally really admired was the fact
that Jonas really took a lot of effort in explaining "How JS works under the hood" and that
is the most precious</h1>
<br />
<h1 id="feedback" class="ml-5">Was this review helpful?</h1>
<div class="flex mt-2 ml-5 mb-3">
<div id="thumsup" class="rounded-full bg-gray-300 justify-center"><button><img
class="h-10 w-11 p-2" src="https://cdn-icons-png.flaticon.com/512/25/25297.png"
alt=""></button></div>
<div id="thumsdown" class="rounded-full bg-gray-300 justify-center ml-4"><button><img
class="h-10 w-11 p-2 pb-1"
src="https://cdn-icons-png.flaticon.com/512/25/25237.png" alt=""></button></div>
<div class="ml-8 tex mt-2"><a href="#"><u>Report</u></a></div>
</div>
</div>
<div id="instructor" class="w-3/4 mt-6">
<h1 class="font-bold text-2xl">Instructor</h1>
<h1 style="color:
#401b9c;" class="font-bold text-lg mt-2 mb-1"><u>Jonas Schmedtmann</u></h1>
<h2 class="mb-2">Web Developer, Designer, and Teacher</h2>
<div class="flex mt-4 mb-4">
<div>
<img class="rounded-full w-1/2 ml-2"
src="https://img-c.udemycdn.com/user/200_H/7799204_2091_5.jpg" alt="">
</div>
<div>
<h1>⭐⭐⭐⭐⭐ 4.7 Instructor Rating</h1>
<h1>255,741 Reviews</h1>
<h1>1,189,656 Students</h1>
<h1>5 Courses</h1>
</div>
</div>
<p class="text1 text-sm">Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors
and all my premium courses have earned the best-selling status for outstanding performance
and student satisfaction. <br /> <br />
I'm a full-stack web developer and designer with a passion for building beautiful things
from scratch. I've been building websites and apps since 2010 and also have a Master's
degree in Engineering. <br /> <br /> <span class="hidden" id="moreText1">
I discovered my passion for teaching and helping others by sharing all I knew when I was
in college, and that passion brought me to Udemy in 2015. <br /> <br />
Here, in all my courses, what students love the most is that I take the time to explain
every concept in a way that everyone can easily understand. <br /> <br />
<span class="font-bold italic"> So, do you want to learn how to build awesome websites
with modern HTML and CSS?</span> <br /> <br />
<span class="font-bold italic">Looking for a complete JavaScript course that takes you
from zero to an advanced developer?</span> <br /> <br />
<span class="font-bold italic">Or maybe you want to build modern and fast back-end
applications with Node.js?</span>
<br /> <br />
Then don't waste your time with random tutorials or incomplete youtube videos. All my
courses are easy-to-follow, all-in-one packages that will take your skills to the next
level. <br /> <br />
These courses are exactly the courses I wish I had when I was first getting into web
development! <br /> <br />
So see for yourself, enroll in one of my courses (or all of them :D) and join <span
class="font-bold">1,000,000+</span> happy students today.
</span>
</p>
<span style="color:
#401b9c;" id="read_more_btn1" class="cursor-pointer font-bold flex">Show more</span>
</div>
</div>
<div id="whiteRight" class="w-3/12 sticky top-0 z-50 border bg-white h-96 mr-28 "
style="width: 336px;"></div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer"></div>
</body>
</html>
<script type="module">
import navbar from "./components/header.js";
import footer from './components/footer.js';
let promise = new Promise((resolve, reject) => {
let header = document.getElementById("nav");
header.innerHTML = navbar();
resolve("Navbar imported");
});
promise.then((res) => {
console.log(res);
addFunctionalityToNavbar();
console.log("done");
});
let footerDiv = document.getElementById('footer');
footerDiv.innerHTML = footer();
</script>
<script>
const readMoreBtn = document.querySelector('#read_more_btn');
const text = document.querySelector('.text');
readMoreBtn.addEventListener('click', (e) => {
text.classList.toggle('show_more');
if (readMoreBtn.innerHTML === 'Show more') {
readMoreBtn.innerHTML = 'Show less ^';
} else {
readMoreBtn.innerHTML = 'Show more ';
}
})
const readMoreBtn1 = document.querySelector('#read_more_btn1');
const text1 = document.querySelector('.text1');
readMoreBtn1.addEventListener('click', (e) => {
text1.classList.toggle('show_more1');
if (readMoreBtn1.innerHTML === 'Show more') {
readMoreBtn1.innerHTML = 'Show less ^';
} else {
readMoreBtn1.innerHTML = 'Show more ';
}
})
const tu = document.querySelector('#thumsup');
const td = document.querySelector('#thumsdown');
const fb = document.querySelector('#feedback');
tu.addEventListener('click', (e) => {
fb.innerHTML = "Thankyou for your feedback"
})
td.addEventListener('click', (e) => {
fb.innerHTML = "Thankyou for your feedback"
})
//-------- Append data from the server
let desData = JSON.parse(localStorage.getItem("decData"));
// console.log(desData);
showdata(desData[desData.length - 1]);
let cart = JSON.parse(localStorage.getItem("cart"));
// console.log("----+++", cart);
function showdata(data) {
let right = document.getElementById("whiteRight");
right.innerText = null;
//right
let imgdiv = document.getElementById("blackRight")
let imageDiv = document.createElement("div");
let img = document.createElement("img");
img.src = data.image;
img.setAttribute('class', 'w-full')
// imageDiv.append(img);
imageDiv.append(img);
imageDiv.setAttribute('class', 'w-full');
imgdiv.append(imageDiv)
let price = document.createElement("p");
price.innerText = "₹ " + data.price;
price.setAttribute('class', 'mt-4 ml-4 text-2xl font-bold text-black');
let btn = document.createElement("button");
btn.innerText = "Add To Cart";
btn.setAttribute('class', 'bg-purple-600 w-56 py-3 mt-4 ml-14 font-bold hover:bg-purple-800 text-white');
btn.onclick = function () {
addtocart(data);
}
let buyNow = document.createElement("button");
buyNow.innerText = "Buy Now";
buyNow.setAttribute('class', 'border-black border w-56 py-3 mt-4 ml-14 font-bold');
buyNow.onclick = function () {
buyNowfun(data);
}
let includeDiv = document.createElement("div");
// console.log(data.include[0]);
let i1 = document.createElement("h2");
i1.innerText = data.include[0].i1;
i1.setAttribute('class', 'ml-2 mt-2 font-bold')
let i2 = document.createElement("p");
i2.innerText = data.include[0].i2;
i2.setAttribute('class', 'ml-2 mt-1 text-base');
let i3 = document.createElement("p");
i3.innerText = data.include[0].i3;
i3.setAttribute('class', 'ml-2 mt-1 text-base');
let i4 = document.createElement("p");
i4.innerText = data.include[0].i4;
i4.setAttribute('class', 'ml-2 mt-1 text-base');
let i5 = document.createElement("p");
i5.innerText = data.include[0].i5;
i5.setAttribute('class', 'ml-2 mt-1 text-base');
let i6 = document.createElement("p");
i6.innerText = data.include[0].i6;
i6.setAttribute('class', 'ml-2 mt-1 text-base mb-10');
let div = document.createElement("div")
div.append(price, btn, buyNow, i1, i2, i3, i4, i5, i6)
right.append(div);
div.setAttribute('class', 'w-96')
let cn = document.getElementById('courseName');
let ti = document.getElementById('title');
let rat = document.getElementById('rating');
let sd = document.getElementById('course1');
let auth = document.getElementById('author_name');
cn.innerHTML = data.title;
ti.innerHTML = data.name;
rat.innerHTML = data.rating;
sd.innerHTML = data.shortDecp;
auth.innerHTML = data.author;
let re1 = document.getElementById('r1');
let re2 = document.getElementById('r2');
let re3 = document.getElementById('r3');
re1.innerHTML = data.requirement[0].r1
re2.innerHTML = data.requirement[0].r2
re3.innerHTML = data.requirement[0].r3
let des1 = document.getElementById('desc1');
let des2 = document.getElementById('desc2');
let des3 = document.getElementById('desc3');
let des4 = document.getElementById('desc4');
des1.innerHTML = data.description[0].desc1;
des2.innerHTML = data.description[0].desc2;
des3.innerHTML = data.description[0].desc3;
des4.innerHTML = data.description[0].desc4;
/////-------whta you will learn
let addLearn = document.createElement("div");
let learnDiv = document.createElement("div");
let learnDiv1 = document.createElement("div");
let learnDiv2 = document.createElement("div");
let learn = document.createElement("h1");
learn.innerText = data.learn[0].heading;
learn.setAttribute("class", "text-black font-bold text-2xl mb-4");
let learn_li = document.createElement("p");
learn_li.innerText = "✓ " + data.learn[0].l1;
learn_li.setAttribute("class", "ml-2 text-black block");
let learn_li2 = document.createElement("p");
learn_li2.innerText = "✓ " + data.learn[0].l2;
learn_li2.setAttribute("class", "ml-2 text-black");
let learn_li3 = document.createElement("p");
learn_li3.innerText = "✓ " + data.learn[0].l3;
learn_li3.setAttribute("class", "ml-2 text-black");
let learn_li4 = document.createElement("p");
learn_li4.innerText = "✓ " + data.learn[0].l4;
learn_li4.setAttribute("class", "ml-2 text-black");
let learn_li5 = document.createElement("p");
learn_li5.innerText = "✓ " + data.learn[0].l5;
learn_li5.setAttribute("class", "ml-2 text-black");
let learn_li6 = document.createElement("p");
learn_li6.innerText = "✓ " + data.learn[0].l6;
learn_li6.setAttribute("class", "ml-2 text-black");
let learn_li7 = document.createElement("p");
learn_li7.innerText = "✓ " + data.learn[0].l7;
learn_li7.setAttribute("class", "ml-2 text-black");
let learn_li8 = document.createElement("p");
learn_li8.innerText = "✓ " + data.learn[0].l8;
learn_li8.setAttribute("class", "ml-2 text-black");
learnDiv1.append(learn_li, learn_li2, learn_li3, learn_li4);
learnDiv2.append(learn_li5, learn_li6, learn_li7, learn_li8);
learnDiv.append(learnDiv1, learnDiv2);
learnDiv.setAttribute('class', 'flex');
addLearn.append(learn, learnDiv);
let ler = document.getElementById('learn');
ler.append(addLearn, learnDiv1, learnDiv2, learnDiv);
addLearn.setAttribute('class', ' w-full m-auto bg-whit mt-8');
let contentDiv = document.getElementById('content');
let contMain = document.createElement("div");
let contetnt_c1 = document.createElement("p");
contetnt_c1.innerText = " " + data.content[0].c1;
contetnt_c1.setAttribute("class", "text-black ml-4 font-bold");
let contetnt_c2 = document.createElement("p");
contetnt_c2.innerText = "🟃 " + data.content[0].c2;
contetnt_c2.setAttribute("class", "text-black ml-4");
let contetnt_c3 = document.createElement("p");
contetnt_c3.innerText = "🟃 " + data.content[0].c3;
contetnt_c3.setAttribute("class", "text-black ml-4");
let contetnt_c4 = document.createElement("p");
contetnt_c4.innerText = "🟃 " + data.content[0].c4;
contetnt_c4.setAttribute("class", "text-black ml-4");
let contetnt_c5 = document.createElement("p");
contetnt_c5.innerText = "🟃 " + data.content[0].c5;
contetnt_c5.setAttribute("class", "text-black ml-4");
contMain.append(contetnt_c1, contetnt_c2, contetnt_c3, contetnt_c4, contetnt_c5);
contMain.setAttribute('class', 'w-8/12 bg-white');
contentDiv.append(contMain);
}
function addtocart(p) {
let data = JSON.parse(localStorage.getItem("cart"));
data.push(p);
localStorage.setItem("cart", JSON.stringify(data));
alert("Course added to cart");
}
function buyNowfun(p){
let data = JSON.parse(localStorage.getItem("cart"));
data.push(p);
localStorage.setItem("cart", JSON.stringify(data));
window.location.href = "cartPage.html";
}
</script>