-
Notifications
You must be signed in to change notification settings - Fork 91
Expand file tree
/
Copy pathindex.html
More file actions
479 lines (432 loc) · 25 KB
/
Copy pathindex.html
File metadata and controls
479 lines (432 loc) · 25 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico" />
<title>
100+ JavaScript Projects | Learn and Master JavaScript with 100+
dynamic projects.
</title>
<meta name="description"
content="Explore 100 JavaScript projects to enhance your coding skills. Explore a diverse range of 100 JavaScript projects, including web development, interactive applications, and creative solutions. Enhance your coding skills, deepen your understanding of JavaScript, and build a robust portfolio with these hands-on projects, perfect for developers at all levels." />
<meta name="keywords"
content="100 JavaScript Project, JavaScript, GitHub Project, JavaScript beginner, projects, JavaScript tutorials, coding projects, JavaScript practice, web development, JavaScript skills" />
<meta name="author" content="100 JavaScript Project" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<!-- Open Graph / Facebook -->
<meta property="og:title" content="100 JavaScript Projects: Learn and Master JavaScript" />
<meta property="og:description"
content="Explore 100 JavaScript projects to enhance your coding skills. From beginner to advanced, find hands-on projects to practice and master JavaScript." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://100jsproject.vercel.app/" />
<meta property="og:image" content="https://100jsproject.vercel.app/assets/images/og-image.png" />
<meta property="og:image:alt" content="100 JavaScript Projects" />
<meta property="og:site_name" content="100 JavaScript Projects" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="100 JavaScript Projects: Learn and Master JavaScript" />
<meta name="twitter:description"
content="Explore 100 JavaScript projects to enhance your coding skills. From beginner to advanced, find hands-on projects to practice and master JavaScript." />
<meta name="twitter:image" content="https://100jsproject.vercel.app/assets/images/twitter-image.jpg" />
<link rel="canonical" href="https://100jsproject.vercel.app" />
<!-- Styles -->
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap"
rel="stylesheet" />
<!-- CDN scripts -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter&display=swap"
rel="stylesheet">
</head>
<body
class="font-inter bg-white text-neutral-900 antialiased leading-relaxed selection:bg-indigo-200/60 overflow-x-hidden">
<!-- Header -->
<header
class="w-full sticky top-0 z-20 backdrop-blur supports-[backdrop-filter]:bg-white/70 border-b border-neutral-200">
<div class="mx-auto max-w-7xl px-6 lg:px-10 flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" class="flex items-center gap-2 group">
<i data-lucide="rocket" class="w-6 h-6 text-indigo-600 group-hover:scale-110 transition-transform"></i>
<span class="font-space text-lg font-semibold tracking-tight">100 JS Projects</span>
</a>
<!-- Nav -->
<nav class="hidden md:flex items-center gap-8 text-sm">
<a href="#features" class="hover:text-indigo-600 transition-colors">Features</a>
<a href="#projects" class="hover:text-indigo-600 transition-colors">Projects</a>
<a href="#contribute" class="hover:text-indigo-600 transition-colors">Contribute</a>
<a href="#contact" class="hover:text-indigo-600 transition-colors">Contact</a>
</nav>
<!-- CTA -->
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
class="text-sm font-medium flex items-center gap-2 bg-neutral-900 text-white px-4 py-2 rounded-lg hover:bg-neutral-800 transition-colors">
<i data-lucide="github" class="w-4 h-4"></i>
Star on GitHub
</a>
</div>
</header>
<!-- Hero -->
<section class="relative isolate overflow-hidden">
<!-- Decorative gradient -->
<div aria-hidden="true"
class="pointer-events-none absolute inset-x-0 top-[-10rem] sm:top-[-12rem] md:top-[-15rem] -z-10">
<div style="background:radial-gradient(600px at 50% 0,#6366f1 10%,transparent 70%)"
class="w-full h-[30rem] opacity-20"></div>
</div>
<div class="max-w-3xl mx-auto text-center px-6 lg:px-10 pt-20 sm:pt-28 md:pt-36 space-y-8">
<h1 class="font-space text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight animate-fade-in opacity-0"
style="animation-delay:.1s;">🚀 100 JavaScript Projects<br />From Beginner → Intermediate
</h1>
<p class="text-neutral-600 md:text-lg animate-fade-in opacity-0" style="animation-delay:.2s;">Master
modern
JavaScript by building real-world applications with <strong class="text-neutral-900">zero
frameworks</strong>. Clone the repo, open any project, and start learning through
hands-on
code.</p>
<div class="flex justify-center gap-4 pt-4 animate-fade-in opacity-0" style="animation-delay:.3s;">
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-lg text-sm font-medium transition-colors">Browse
Repository</a>
<a href="#projects"
class="bg-white hover:bg-neutral-100 border border-neutral-200 text-neutral-900 px-6 py-3 rounded-lg text-sm transition-colors">Preview
Projects</a>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="mx-auto max-w-7xl px-6 lg:px-10 mt-24 space-y-16">
<div class="text-center max-w-2xl mx-auto space-y-4">
<h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">What’s Inside?</h2>
<p class="text-neutral-600">A carefully-curated set of projects covering every core concept you need to
become a confident JavaScript developer.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature card -->
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="file-code" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">100 Unique Projects</h3>
<p class="text-sm text-neutral-600">Carefully ranked by difficulty so you can progress from “Hello
World” to production-ready apps.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="zap" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">Modern JavaScript (ES6+)</h3>
<p class="text-sm text-neutral-600">Arrow functions, async/await, template literals, modules and
more—no
outdated patterns.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="monitor" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">Real-World Logic</h3>
<p class="text-sm text-neutral-600">From API calls to LocalStorage, each project mirrors tasks
you’ll
face in production.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="list-checks" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">Clean Source Code</h3>
<p class="text-sm text-neutral-600">Readable, commented, and ready to fork—perfect for learning best
practices.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="folder-open" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">Detailed READMEs</h3>
<p class="text-sm text-neutral-600">Every project ships with step-by-step setup instructions and
explanations.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
<i data-lucide="users" class="w-7 h-7 text-indigo-600 mb-4"></i>
<h3 class="font-medium mb-2">Active Community</h3>
<p class="text-sm text-neutral-600">Open source & contribution-friendly. Share ideas, submit
PRs, or
request new challenges!</p>
</div>
</div>
</section>
<!-- Projects preview -->
<section id="projects" class="mx-auto max-w-7xl px-6 lg:px-10 mt-32 space-y-16">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
<div class="space-y-4">
<h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">Project Sneak Peek</h2>
<p class="text-neutral-600 max-w-lg">Here are a few highlights—clone the repo for the full list.</p>
</div>
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
class="flex items-center gap-2 text-sm font-medium text-indigo-600 hover:text-indigo-500 transition">
View All 100 Projects
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Table -->
<div class="overflow-hidden border border-neutral-200 rounded-2xl">
<table class="min-w-full text-sm bg-white">
<thead class="bg-neutral-50 text-left">
<tr>
<th class="py-3 px-6 font-medium">#</th>
<th class="py-3 px-6 font-medium">Project</th>
<th class="py-3 px-6 font-medium hidden sm:table-cell">Category</th>
<th class="py-3 px-6 font-medium">Code</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-neutral-200 hover:bg-neutral-50">
<td class="py-4 px-6">01</td>
<td class="py-4 px-6">To-Do List App</td>
<td class="py-4 px-6 hidden sm:table-cell">DOM & LocalStorage</td>
<td class="py-4 px-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/tree/master/01-To-Do%20List%20App"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 flex items-center gap-1">GitHub<i
data-lucide="external-link" class="w-4 h-4"></i></a>
</td>
</tr>
<tr class="border-t border-neutral-200 hover:bg-neutral-50">
<td class="py-4 px-6">02</td>
<td class="py-4 px-6">Simple Calculator</td>
<td class="py-4 px-6 hidden sm:table-cell">DOM Math</td>
<td class="py-4 px-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/tree/master/02-Simple%20Calculator"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 flex items-center gap-1">GitHub<i
data-lucide="external-link" class="w-4 h-4"></i></a>
</td>
</tr>
<tr class="border-t border-neutral-200 hover:bg-neutral-50">
<td class="py-4 px-6">03</td>
<td class="py-4 px-6">Digital Clock</td>
<td class="py-4 px-6 hidden sm:table-cell">Date & Time</td>
<td class="py-4 px-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/tree/master/03-Digital%20Clock"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 flex items-center gap-1">GitHub<i
data-lucide="external-link" class="w-4 h-4"></i></a>
</td>
</tr>
<tr class="border-t border-neutral-200 hover:bg-neutral-50">
<td class="py-4 px-6">04</td>
<td class="py-4 px-6">Tip Calculator</td>
<td class="py-4 px-6 hidden sm:table-cell">Math Forms</td>
<td class="py-4 px-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/tree/master/04-Tip%20Calculator"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 flex items-center gap-1">GitHub<i
data-lucide="external-link" class="w-4 h-4"></i></a>
</td>
</tr>
<tr class="border-t border-neutral-200 hover:bg-neutral-50">
<td class="py-4 px-6">05</td>
<td class="py-4 px-6">Temperature Converter</td>
<td class="py-4 px-6 hidden sm:table-cell">Math Forms</td>
<td class="py-4 px-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/tree/master/05-Temperature%20Converter"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 flex items-center gap-1">GitHub<i
data-lucide="external-link" class="w-4 h-4"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Difficulty chart -->
<div class="max-w-md mx-auto pt-12 space-y-4">
<h3 class="text-center text-sm font-medium text-neutral-500">Projects by Difficulty</h3>
<div class="rounded-lg border border-neutral-200 p-4 bg-white">
<div>
<canvas id="difficultyChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Get started -->
<section class="mx-auto max-w-7xl px-6 lg:px-10 mt-32 space-y-14">
<div class="text-center max-w-2xl mx-auto space-y-4">
<h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">Get Started in Minutes</h2>
<p class="text-neutral-600">Clone, open a project, and run it in your browser. No build tools, no
config—just code.</p>
</div>
<div class="grid md:grid-cols-3 gap-10">
<div class="flex flex-col items-center text-center gap-4">
<i data-lucide="download" class="w-8 h-8 text-indigo-600"></i>
<h4 class="font-medium">1. Clone</h4>
<code
class="text-xs bg-neutral-50 border border-neutral-200 px-3 py-1.5 rounded-lg">git clone https://github.com/pradipchaudhary/100-js-projects.git</code>
</div>
<div class="flex flex-col items-center text-center gap-4">
<i data-lucide="folder" class="w-8 h-8 text-indigo-600"></i>
<h4 class="font-medium">2. Pick a Project</h4>
<code
class="text-xs bg-neutral-50 border border-neutral-200 px-3 py-1.5 rounded-lg">cd 01-To-Do\ List\ App</code>
</div>
<div class="flex flex-col items-center text-center gap-4">
<i data-lucide="play" class="w-8 h-8 text-indigo-600"></i>
<h4 class="font-medium">3. Run & Learn</h4>
<code
class="text-xs bg-neutral-50 border border-neutral-200 px-3 py-1.5 rounded-lg">open index.html</code>
</div>
</div>
</section>
<!-- Project Showcase Section -->
<!-- FAQ Section -->
<section id="faq" class="py-28">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl font-semibold tracking-tight text-center mb-12" data-animate>
Frequently Asked Questions
</h2>
<div class="divide-y divide-white/10 border border-white/10 rounded-2xl" data-animate>
<!-- FAQ Item 1 -->
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
aria-expanded="false">
<span class="font-medium">Are these projects beginner friendly?</span>
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
</button>
<div class="faq-content px-6 text-sm text-slate-400">
Yes! Projects are tagged by difficulty, starting from very basic to advanced.
</div>
<!-- FAQ Item 2 -->
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
aria-expanded="false">
<span class="font-medium">Can I contribute my own project?</span>
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
</button>
<div class="faq-content px-6 text-sm text-slate-400">
Absolutely. Fork the repo, add your project, and open a pull request. Guidelines are in the
README.
</div>
<!-- FAQ Item 3 -->
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
aria-expanded="false">
<span class="font-medium">Do I need any frameworks?</span>
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
</button>
<div class="faq-content px-6 text-sm text-slate-400">
No frameworks are required. Pure JavaScript is all you need, though you’re welcome to
explore libraries.
</div>
</div>
</div>
</section>
<!-- Contribute -->
<section id="contribute" class="mx-auto max-w-7xl px-6 lg:px-10 mt-32 space-y-16">
<div class="text-center max-w-2xl mx-auto space-y-4">
<h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">Contribute & Grow</h2>
<p class="text-neutral-600">Have ideas or improvements? Open a PR and join hundreds of developers
building
together.</p>
</div>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-center gap-6">
<a href="https://github.com/pradipchaudhary/100-js-projects/fork" target="_blank"
class="bg-neutral-900 hover:bg-neutral-800 text-white px-6 py-3 rounded-lg text-sm font-medium flex items-center gap-2">
<i data-lucide="git-fork" class="w-4 h-4"></i>
Fork Repository
</a>
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
class="bg-white hover:bg-neutral-100 border border-neutral-200 text-neutral-900 px-6 py-3 rounded-lg text-sm flex items-center gap-2 font-medium">
<i data-lucide="plus-circle" class="w-4 h-4"></i>
Open Pull Request
</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="max-w-7xl mx-auto px-6 lg:px-10 mt-32">
<div class="border-t border-gray-200 pt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Column 1: Let's Connect -->
<div class="space-y-5">
<h2 class="text-2xl font-semibold text-gray-900 tracking-tight">Let’s Connect</h2>
<p class="text-gray-600">Have a question, feedback, or idea? Feel free to reach out anytime.</p>
<div class="flex items-center gap-3 text-sm text-gray-700">
<i data-lucide="mail" class="w-4 h-4 text-indigo-600"></i>
<a href="mailto:chaudharypradip678@gmail.com" class="hover:text-indigo-600 transition-colors">
chaudharypradip678@gmail.com
</a>
</div>
</div>
<!-- Column 2: Quick Links -->
<div class="space-y-5">
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Quick Links</h3>
<ul class="text-sm space-y-3 text-gray-700">
<li>
<a href="https://github.com/pradipchaudhary" target="_blank"
class="flex items-center gap-2 hover:text-indigo-600 transition">
<i data-lucide="github" class="w-4 h-4"></i> GitHub Profile
</a>
</li>
<li>
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
class="flex items-center gap-2 hover:text-indigo-600 transition">
<i data-lucide="book-open" class="w-4 h-4"></i> 100 JS Projects Repo
</a>
</li>
</ul>
</div>
<!-- Column 3: Social Media (Optional or Replace) -->
<div class="space-y-5">
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Follow Me</h3>
<ul class="flex gap-5 text-gray-500">
<li>
<a href="#" class="hover:text-indigo-600 transition" aria-label="Twitter">
<i data-lucide="twitter" class="w-5 h-5"></i>
</a>
</li>
<li>
<a href="#" class="hover:text-indigo-600 transition" aria-label="Facebook">
<i data-lucide="facebook" class="w-5 h-5"></i>
</a>
</li>
<li>
<a href="#" class="hover:text-indigo-600 transition" aria-label="LinkedIn">
<i data-lucide="linkedin" class="w-5 h-5"></i>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-20 mb-12 px-6 lg:px-10 text-center text-xs text-gray-500">
© 2024 <span class="font-medium">100 JS Projects</span> • MIT License
</footer>
<!-- Scripts -->
<script>
// Icons
lucide.createIcons();
// Fade-in animation on view
document.querySelectorAll(".animate-fade-in").forEach((el) => {
el.style.opacity = 0;
el.style.transform = "translateY(12px)";
const observer = new IntersectionObserver(([entry], obs) => {
if (entry.isIntersecting) {
el.style.transition = "opacity .6s ease, transform .6s ease";
el.style.opacity = 1;
el.style.transform = "translateY(0)";
obs.disconnect();
}
}, { threshold: 0.15 });
observer.observe(el);
});
// Difficulty chart
const ctx = document.getElementById("difficultyChart");
new Chart(ctx, {
type: "bar",
data: {
labels: ["Beginner", "Intermediate", "Advanced"],
datasets: [{
data: [45, 40, 15],
backgroundColor: ["#6366f1", "#a5b4fc", "#c7d2fe"],
borderRadius: 4
}]
},
options: {
plugins: { legend: { display: false } },
scales: {
x: { grid: { display: false }, ticks: { font: { size: 12 } } },
y: { display: false }
}
}
});
</script>
</body>
</html>