Welcome to my JavaScript Learning Journey! 👨💻
This repository showcases 16 fun and practical mini-projects built with HTML, CSS, and Vanilla JavaScript. Each project is designed to solidify my frontend development skills by focusing on essential DOM manipulation and core JavaScript concepts. It's a beginner-friendly collection, perfect for anyone looking to get hands-on experience with browser interactions.
| No. | Project Title | Description |
|---|---|---|
| 1 | 🔥 Color Changer | Dynamically changes the background color using JavaScript events. |
| 2 | 🌑 BMI Generator | Calculates and displays Body Mass Index (BMI) based on user input. |
| 3 | 😎 Digital Clock | A live digital clock implemented using setInterval. |
| 4 | 😳 Guess the Number | A classic number guessing game incorporating random number generation logic. |
| 5 | 👻 Keyboard Check | Detects and displays real-time information about keyboard key presses. |
| 6 | 🧠 Unlimited Colors | Features auto-changing background colors with interactive start/stop options. |
| 7 | 👀 Scroll like NextJS | Demonstrates smooth scrolling effects, inspired by Next.js websites. |
| 8 | 📚 Your Typer Library | Creates a typing effect animation, simulating a typewriter. |
| 9 | 📊 Mouse Circle | Displays an animated circle that follows the mouse pointer. |
| 10 | 🥠 Emoji Generator | Generates and displays a random emoji with each click. |
| 11 | ✍️ Text Editor | A minimal rich text editor built using the contentEditable attribute. |
| 12 | 🖼️ Random Image | Fetches and displays random images from external APIs. |
| 13 | 😆 Jokes App | Fetches and presents random jokes from a public API. |
| 14 | 🐱 Cats API | Displays adorable cat images sourced from TheCatAPI. |
| 15 | 📌 DOM CRUD | Illustrates basic Create, Read, Update, and Delete (CRUD) operations within the DOM. |
| 16 | 🏀 Debouncing Demo | Clearly demonstrates the debounce effect, particularly useful for search and input events. |
- HTML5
- CSS3
- JavaScript (Vanilla)
The primary goals of creating this repository are to:
- Gain practical experience with DOM manipulation.
- Deepen understanding of core JavaScript concepts.
- Work hands-on with real browser interactions.
- Build a strong and diverse portfolio of beginner-friendly projects.
To explore these projects:
- Clone the repository:
git clone [https://github.com/garvit-iitm/javaScript-projects.git](https://github.com/garvit-iitm/javaScript-projects.git)
- Navigate to the project directory:
cd js-mini-projects - Open any project folder: You can use a Live Server extension in your code editor (like VS Code) or simply double-click the
.htmlfile within a project folder to open it directly in your browser.
While this is a personal learning endeavor, I welcome ideas and improvements! Feel free to fork the repository and submit a pull request with your suggestions.
This project is open-source and available under the MIT License.
Garvit Singh Bhatnagar