🚀 30 Mini JavaScript Projects

Welcome to the 30 Mini JavaScript Projects repository! This collection showcases 30 small yet powerful JavaScript projects that enhance interactivity and creativity. Each project is designed to be beginner-friendly while demonstrating core JavaScript concepts.

Live demo: https://ajaypeter582.github.io/Mini-Javascript-Projects/

🎯 Features

• Modern UI: Dark theme, smooth hover effects, and responsive design.
• Live Demos: View and interact with each project in real-time.
• Syntax Highlighting: Uses Prism.js for clean code readability.
• Copy Code Button: Easily copy source code to your clipboard.
• GitHub Pages Hosting: Hosted directly on GitHub for quick access.

🛠️ Tech Stack

• Frontend: HTML, CSS, JavaScript
• Libraries: Prism.js (Syntax Highlighting)
• Hosting: GitHub Pages

📂 Project Structure

MINI JAVASCRIPT PROJECTS/
│── docs/
│   │── Images/
│   │   ├── codeView.html
│   │   ├── codeView.js
│   │   ├── index.html
│   │   ├── index.js
│   │   ├── projects.js
│   │   ├── readme.md
│   │   ├── style.css
│── Projects/
│   │── Project-1-heart-animation/
│   │── Project-2-auto-text/
│   │── Project-3-mini-calendar/
│   │── Project-4-button-ripple/
│   │── Project-5-random-image/
│   │── Project-6-dark-mode/
│   │── Project-7-Testimonial-slider/
│   │── Project-8-Real-time-character-counter/
│   │── Project-9-digital-clock/
│   │── Project-10-double-landing-page/
│   │── Project-11-random-color-generator/
│   │── Project-12-Rotating-Image-Gallery/
│   │── Project-13-animated-search-bar/
│   │── Project-14-loan-calculator/
│   │── Project-15-new-year-countdown/
│   │── Project-16-pomodoro-timer/
│   │── Project-17-age-calculator/
│   │── Project-18-project-statistics/
│   │── Project-19-video-trailer-popup/
│   │── Project-20-drum-kits/
│   │── Project-21-clock/
│   │── Project-22-temperature-converter/
│   │── Project-23-BMI-calculator/
│   │── Project-24-sticky-navbar/
│   │── Project-25-random-emoji/
│   │── Project-26-tip-calculator/
│   │── Project-27-loading-bar/
│   │── Project-28-background-image-scroll-effect/
│   │── Project-29-mouse-event/
│   │── Project-30-dice-roll-simulator/

Each project folder contains:

• index.html – Project's main HTML file
• index.js – JavaScript logic
• style.css – Styling file
• output.png – output image used for card thumbmail

📌 Projects List

Each project name below links to its respective folder in the GitHub repository.

#	Project Name	Description	Link
1	Heart Animation	A beautiful heart trail animation when we mouse moves	View Project
2	Auto Text	Displays text letter by letter like a typing effect.	View Project
3	Mini Calendar	A simple and attractive mini calendar widget.	View Project
4	Button Ripple	Creates a ripple effect when a button is hovered.	View Project
5	Random Image	Displays a random image from a set of images.	View Project
6	Dark Mode	a button Toggles dark mode for better user experience.	View Project
7	Testimonial Slider	A slider displaying user testimonials dynamically.	View Project
8	Real-time Character Counter	Counts and displays characters in real time as you type.	View Project
9	Digital Clock	A real-time digital clock displaying hours, minutes, and seconds.	View Project
10	Double Landing Page	A creative landing page split into two different sections.	View Project
11	Random Color Generator	Generates and displays random colors with hex codes.	View Project

📜 How to Use

Clone this repository:

git clone https://github.com/AjayPeter582/Mini-Javascript-Projects.git

Open docs folder and click index.html in your browser.

Click on a project to view its code, live-demo and source code.

📌 Contribution

Feel free to:

• Improve UI/UX
• Add more JavaScript projects
• Fix any bugs or enhance features

Fork the repo, create a branch, and submit a pull request! 🚀

📞 Contact

For questions or suggestions, reach out via:

• GitHub: @AjayPeter582
• Email: ajaypeter2005@gmail.com

💡 Happy Coding! 🚀