Skip to content

Commit 3751fec

Browse files
PrajapatiRoshanPrajapatiRoshan
PrajapatiRoshan
authored and
PrajapatiRoshan
committed
updated Readme.md
1 parent 40fe544 commit 3751fec

File tree

3 files changed

+115
-6
lines changed

3 files changed

+115
-6
lines changed

‎README.md‎

Lines changed: 105 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,106 @@
1-
# javascript-projects-beginners
1+
# [Javascript-Projects-Beginners](https://github.com/PrajapatiRoshan/javascript-projects-beginners)
22

3-
- learn
3+
**Vanilla JavaScript Projects Collection for Biginners**
4+
5+
Welcome to the Vanilla JavaScript Projects Collection repository! This repository is a treasure trove of mini projects, specifically crafted for beginners who want to deepen their understanding of JavaScript without relying on frameworks or libraries. Whether you're just starting out with JavaScript or looking to practice and refine your skills, this collection offers a wide variety of hands-on projects that cover different aspects of the language.
6+
7+
## 📂 What You'll Find
8+
9+
This repository contains a diverse array of Vanilla JavaScript projects. Each project is meticulously designed to demonstrate specific JavaScript functionalities, best practices, and coding patterns. Here's a glimpse of what you can expect:
10+
11+
- Basic DOM Manipulation: Learn how to interact with the Document Object Model (DOM) using JavaScript to create dynamic and interactive web pages.
12+
- API Integration: Explore how to fetch data from external APIs and display it dynamically on your web pages.
13+
- Event Handling: Understand how to use event listeners to respond to user interactions like clicks, keypresses, and mouse movements.
14+
- Animations and Transitions: Discover how to create smooth animations and transitions using CSS combined with JavaScript control.
15+
- Local Storage: Learn to use the browser's local storage to save and retrieve data, enabling persistent user experiences across sessions.
16+
17+
## 🚀 Why This Repository?
18+
19+
- Beginner-Friendly: All projects are designed with beginners in mind, providing clear, concise, and well-commented code.
20+
- No Frameworks Needed: Focus purely on Vanilla JavaScript to gain a solid foundation before diving into frameworks.
21+
- Progressive Learning: Start with simple projects and gradually take on more challenging ones as your skills improve.
22+
- Hands-On Practice: The best way to learn JavaScript is by doing, and this repository is all about hands-on coding.
23+
24+
# JavaScript Projects (Beginners)
25+
26+
Here is a list of JavaScript projects:
27+
28+
| Index | Project Name | Code Link | Demo Link |
29+
| ----- | -------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
30+
| 01 | ToDoList | [Code](undefined1-ToDoList) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/1-ToDoList) |
31+
| 02 | GradientColor | [Code](undefined2-GradientColor) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/2-GradientColor) |
32+
| 03 | imageCarousel | [Code](undefined3-imageCarousel) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/3-imageCarousel) |
33+
| 04 | profileCarousel | [Code](undefined4-profileCarousel) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/4-profileCarousel) |
34+
| 05 | tabbedCom | [Code](undefined5-tabbedCom) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/5-tabbedCom) |
35+
| 06 | QRCodeGenerator | [Code](undefined6-QRCodeGenerator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/6-QRCodeGenerator) |
36+
| 07 | 3d-box-Background | [Code](undefined7-3d-box-Background) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/7-3d-box-Background) |
37+
| 08 | animated-nav-close | [Code](undefined8-animated-nav-close) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/8-animated-nav-close) |
38+
| 09 | reveal-text-animated | [Code](undefined9-reveal-text-animated) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/9-reveal-text-animated) |
39+
| 10 | flash-slide-background-img | [Code](undefined10-flash-slide-background-img) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/10-flash-slide-background-img) |
40+
| 11 | lazy-loading-img | [Code](undefined11-lazy-loading-img) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/11-lazy-loading-img) |
41+
| 12 | laxy-content-loading | [Code](undefined12-laxy-content-loading) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/12-laxy-content-loading) |
42+
| 13 | fun-jokes | [Code](undefined13-fun-jokes) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/13-fun-jokes) |
43+
| 14 | vertical-slider | [Code](undefined14-vertical-slider) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/14-vertical-slider) |
44+
| 15 | box-dnd | [Code](undefined15-box-dnd) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/15-box-dnd) |
45+
| 16 | simple-drawing-book | [Code](undefined16-simple-drawing-book) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/16-simple-drawing-book) |
46+
| 17 | water-goal-app | [Code](undefined17-water-goal-app) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/17-water-goal-app) |
47+
| 18 | animated-img-expanding | [Code](undefined18-animated-img-expanding) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/18-animated-img-expanding) |
48+
| 19 | form-input-wave | [Code](undefined19-form-input-wave) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/19-form-input-wave) |
49+
| 20 | hover-track | [Code](undefined20-hover-track) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/20-hover-track) |
50+
| 21 | catch-insect-game | [Code](undefined21-catch-insect-game) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/21-catch-insect-game) |
51+
| 22 | movie-banner | [Code](undefined22-movie-banner) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/22-movie-banner) |
52+
| 23 | random-password-generator | [Code](undefined23-random-password-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/23-random-password-generator) |
53+
| 24 | timer-clock | [Code](undefined24-timer-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/24-timer-clock) |
54+
| 25 | wallpaper-clock | [Code](undefined25-wallpaper-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/25-wallpaper-clock) |
55+
| 26 | digital-clock | [Code](undefined26-digital-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/26-digital-clock) |
56+
| 27 | candf-tempeature-convertor | [Code](undefined27-candf-tempeature-convertor) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/27-candf-tempeature-convertor) |
57+
| 28 | random-quote-generator | [Code](undefined28-random-quote-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/28-random-quote-generator) |
58+
| 29 | stopWatch | [Code](undefined29-stopWatch) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/29-stopWatch) |
59+
| 30 | currencyConvert | [Code](undefined30-currencyConvert) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/30-currencyConvert) |
60+
| 31 | ExpenseTracker | [Code](undefined31-ExpenseTracker) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/31-ExpenseTracker) |
61+
| 32 | age-calculator | [Code](undefined32-age-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/32-age-calculator) |
62+
| 33 | video-background-cover | [Code](undefined33-video-background-cover) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/33-video-background-cover) |
63+
| 34 | BMI-calculator | [Code](undefined34-BMI-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/34-BMI-calculator) |
64+
| 35 | button-ripple-anim | [Code](undefined35-button-ripple-anim) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/35-button-ripple-anim) |
65+
| 36 | AnalogClock | [Code](undefined36-AnalogClock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/36-AnalogClock) |
66+
| 37 | english-dictionary | [Code](undefined37-english-dictionary) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/37-english-dictionary) |
67+
| 38 | heart-trailing | [Code](undefined38-heart-trailing) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/38-heart-trailing) |
68+
| 39 | image-search-web | [Code](undefined39-image-search-web) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/39-image-search-web) |
69+
| 40 | image-sliders | [Code](undefined40-image-sliders) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/40-image-sliders) |
70+
| 41 | loan-calculator | [Code](undefined41-loan-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/41-loan-calculator) |
71+
| 42 | small-calender | [Code](undefined42-small-calender) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/42-small-calender) |
72+
| 43 | month-calender | [Code](undefined43-month-calender) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/43-month-calender) |
73+
| 44 | notes-app | [Code](undefined44-notes-app) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/44-notes-app) |
74+
| 45 | photo-generator | [Code](undefined45-photo-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/45-photo-generator) |
75+
| 46 | 2d-image-roller | [Code](undefined46-2d-image-roller) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/46-2d-image-roller) |
76+
| 47 | milsec-stopwatch | [Code](undefined47-milsec-stopwatch) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/47-milsec-stopwatch) |
77+
| 48 | temperature-convert | [Code](undefined48-temperature-convert) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/48-temperature-convert) |
78+
79+
Feel free to explore and use these projects for learning and practice! If you have any questions or need further assistance, don't hesitate to ask.
80+
81+
---
82+
83+
## 🧰 Tools and Technologies
84+
85+
- HTML5: The backbone of our projects, providing structure and content.
86+
- CSS3: Used for styling, layout, and basic animations.
87+
- Vanilla JavaScript: Pure JavaScript without any external libraries or frameworks.
88+
- Browser Developer Tools: Debug and experiment directly in the browser.
89+
90+
## 📚 Learning Resources
91+
92+
If you're new to JavaScript or need a refresher, here are some resources to get you started:
93+
94+
- [MDN Web Docs - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
95+
- [JavaScript.info](https://javascript.info/)
96+
- [Eloquent JavaScript](https://eloquentjavascript.net/)
97+
98+
## 💡 Contributing
99+
100+
Contributions are welcome! If you have a new project idea or improvement, feel free to fork the repository, create a new branch, and submit a pull request. Let's grow this collection together!
101+
102+
## 📝 License
103+
104+
This repository is licensed under the [MIT License](LICENSE). Feel free to use the code for your projects, personal or commercial.
105+
106+
Happy coding! 😉

‎assets/js/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ const projectNameFormatter = (name) => {
99
.join(' ');
1010
};
1111

12+
let _forReadMe = '';
13+
1214
// UpdateUI
1315
const updateUI = (data) => {
14-
const { repo, projects, url } = data;
16+
const { repo, projects, url, demo } = data;
1517
projects.map(({ name, id }) => {
1618
const _folderName = `${Number(id)}-${name}`;
1719
const itemList = document.createElement('li');
@@ -26,7 +28,10 @@ const updateUI = (data) => {
2628
${'{'} code ${'}'}
2729
</a>`;
2830
list.appendChild(itemList);
31+
32+
// _forReadMe += `| ${id} | ${name} | [Code](${url}${_folderName}) | [Demo](${demo}${_folderName}) |\n`;
2933
});
34+
// console.log(_forReadMe);
3035
};
3136

3237
// Fetch data

‎projects.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"repo": "https://github.com/PrajapatiRoshan/javascript-projects-beginners ",
3-
"url": "https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/",
3+
"code-url": "https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/",
4+
"demo": "https://prajapatiroshan.github.io/javascript-projects-beginners/",
45
"projects": [
56
{
67
"id": "01",
@@ -124,7 +125,7 @@
124125
},
125126
{
126127
"id": "31",
127-
"name": "Expense Tracker"
128+
"name": "ExpenseTracker"
128129
},
129130
{
130131
"id": "32",
@@ -164,7 +165,7 @@
164165
},
165166
{
166167
"id": "41",
167-
"name": "loan- calculator"
168+
"name": "loan-calculator"
168169
},
169170
{
170171
"id": "42",

0 commit comments

Comments
 (0)