Welcome to the JavaScript-Project repository! This is an ongoing collection of 100 mini JavaScript projects created to enhance coding skills and demonstrate the wide range of capabilities JavaScript offers. Whether you're a novice or seasoned developer, these projects are designed to inspire and challenge you to improve.
Check out the full repository on GitHub: JavaScript-Project
So far, the following 67 projects have been completed. As I continue building, the remaining projects will be added here to reach the goal of 100 projects. Each project is stored in its own directory for easy access and exploration.
| Project No. | Project Name | Description |
|---|---|---|
| 1 | Simon Game | A classic "Simon Says" memory game where players repeat random sequences of lights and sounds. |
| 2 | Weather App | A sleek weather application that displays real-time weather data fetched via API. |
| 3 | ToDoList | A simple and functional to-do list app for managing daily tasks with add, delete, and edit options. |
| 4 | QR Code Generator | A tool for generating QR codes from user input, allowing easy sharing of text or links. |
| 5 | Generate-password | A tool that generates random and secure passwords based on user-defined criteria. |
| 6 | Daily-Quote | A random quote generator displaying quotes with authors, with an option to share directly on Twitter. |
| 7 | Calculator | A basic calculator that performs arithmetic operations like addition, subtraction, multiplication, and division. |
| 8 | Stopwatch | A functional stopwatch with start, stop, and reset features, allowing users to track time accurately. |
| 9 | Toast Notification | A customizable toast notification system that displays temporary alerts or messages on the screen. |
| 10 | Password Toggle | A simple feature that allows users to toggle password visibility in input fields for ease of use. |
| 11 | Password-Strength | A dynamic indicator that visually displays the strength of a password based on user input criteria. |
| 12 | DigitalWatch | A real-time digital watch displaying the current time (hours, minutes, and seconds) along with the current date. |
| 13 | Portfolio | A personal portfolio website showcasing projects, skills, and contact information in a clean and responsive layout. |
| 14 | Age Calculator | A tool that calculates age based on the user's input of birth date, showing years, months, and days. |
| 15 | Horizontal Scroll Image Gallery | An interactive image gallery with horizontal scrolling, allowing users to navigate through images seamlessly. |
| 16 | Coming Soon Page | A responsive "Coming Soon" landing page with a countdown timer and form for updates. |
| 17 | Cryptocurrency Website | An initial cryptocurrency website built using HTML, CSS, and JavaScript, featuring basic information and interactive elements. |
| 18 | Pop-Up | A customizable pop-up modal that displays messages or alerts with options for user interaction. |
| 19 | Custom Side Menu Design | A sleek and responsive custom side menu with smooth transitions and interactive navigation links. |
| 20 | Drag and Drop | An interactive feature that allows users to drag and drop elements within a web page. |
| 21 | Progress Bar | A dynamic progress bar that visually represents the completion status of a task or process. |
| 22 | Mini Calendar | A compact and interactive calendar that displays the current month, highlights the current date, and allows navigation between months. |
| 23 | Step Progress Bar | A multi-step progress bar that visually tracks the completion of sequential steps in a process. |
| 24 | Clock | A real-time analog wall clock with hour, minute, and second hands, built using JavaScript and CSS animations. |
| 25 | Jokes Generator | A fun app that generates random dad jokes using an API, with an option to copy or share them. |
| 26 | FAQ | An interactive FAQ section with expandable and collapsible answers for better user experience. |
| 27 | Photo Gallery | A responsive photo gallery with image fetching functionality, allowing users to browse images smoothly. |
| 28 | Feedback UI | A user-friendly feedback system with a rating feature and a thank-you message upon submission. |
| 29 | GitHub Profiles | A web app that allows users to search for GitHub profiles and displays user details dynamically. |
| 30 | Heart-trail-animation | A beautiful animation that creates a trail of hearts following the mouse movement in real-time. |
| 31 | Hidden Search | An interactive search bar with a toggle feature that expands and collapses smoothly on click. |
| 32 | Image Slider | A smooth image slider with navigation buttons and automatic transition effects for seamless browsing. |
| 33 | Weight Converter | A tool to convert weight between different units such as kilograms, pounds, and ounces. |
| 34 | Tip Calculator | A simple calculator to calculate the tip based on bill amount, tip percentage. |
| 35 | Temperature-Converter | A tool to convert temperature between Celsius, Fahrenheit, and Kelvin. |
| 36 | Rock Paper Scissors Game | A fun and interactive game where users can play Rock, Paper, Scissors against the computer. |
| 37 | Random Emoji | A fun tool that displays random emojis along with their names every time a button is clicked. |
| 38 | Note App | A simple note-taking application with features to create, update, and delete notes. |
| 39 | Random Image Generator | A tool that fetches and displays random images from Unsplash with each button click. |
| 40 | Pokédex | A web app that fetches and displays Pokémon data using the PokeAPI, including stats and images. |
| 41 | Mouse Event | A project that tracks and displays real-time mouse coordinates on the screen. |
| 42 | Loan Calculator | A tool to calculate loan repayments based on principal, interest rate, and loan duration. |
| 43 | BMI Calculator | A simple tool to calculate Body Mass Index (BMI) based on weight and height inputs. |
| 44 | Counter | A simple counter application with increment, decrement, and reset functionality. |
| 45 | Emoji Rating | A fun rating system using emojis to visually represent user feedback or satisfaction levels. |
| 46 | Dice Roll Simulator | A simple dice rolling simulator that generates a random number between 1 and 6 on each roll. |
| 47 | Double Landing Page | A creative split-screen landing page with interactive hover effects for a unique user experience. |
| 48 | Dark Mode Toggle | A simple toggle switch to enable and disable dark mode for better user experience. |
| 49 | Form Input Wave | A stylish form input effect where labels animate with a wave effect when typing. |
| 50 | Animated Navigation | A smooth and interactive navigation bar with animated transitions for an enhanced user experience. |
| 51 | Animated Countdown | A visually engaging countdown timer with smooth animations for better user interaction. |
| 52 | Drink Water | A hydration tracker that helps users monitor their daily water intake with interactive visuals. |
| 53 | Hoverboard | A fun interactive hover effect on elements that moves as you hover over them, creating a 2D feel. |
| 54 | Expanding Cards | A visually appealing effect where cards expand on hover to reveal more content. |
| 55 | Theme Clock | A dynamic clock with light and dark mode themes that update based on user preference. |
| 56 | Split Landing Page | A modern landing page with a split-screen design that highlights two different sections interactively. |
| 57 | Animated Search Bar | A stylish search bar with smooth animations that expands and contracts on click. |
| 58 | Auto Text Effect | A dynamic text animation that types and deletes words automatically in a loop. |
| 59 | Auto Text Effect Animation | A smooth typing and deleting text animation that creates an engaging auto-text effect. |
| 60 | Background Slider | A slideshow effect that changes the background image dynamically with smooth transitions. |
| 61 | Event Keycodes | A project that displays keycodes when a user presses a key on the keyboard. |
| 62 | Rotating Image Gallery | An interactive gallery where images rotate in a carousel with smooth transitions. |
| 63 | Button Ripple Effect | A button click effect that creates a ripple animation for a modern and interactive feel. |
| 64 | Double Click Heart | A like animation effect where a heart appears when double-clicking an image. |
| 65 | Content Placeholder | A skeleton loading effect that displays placeholders before actual content loads. |
| 66 | Scroll Animation | Elements animate into view as the user scrolls down the page for an engaging UX. |
| 67 | Drawing App | A simple canvas-based drawing application with color and brush size controls. |
-
Clone the repository:
git clone https://github.com/faij1207/JavaScript-Project.git
-
Navigate to any project directory:
cd JavaScript-Project/{project-name} -
Run the project: Open the
index.htmlfile in your web browser to view and interact with the project.
This repository is a continuous effort, with new projects being added frequently. Once new projects are completed, they will be added to their own directory within the repository.
Here's a hint for where future projects will be posted:
Each new project will be stored in a new directory following the same naming convention. For example, Calculator will go in Calculator/, and future projects will continue in this format. The README will also be updated with descriptions and instructions for each new project as they are added.
Stay tuned for more updates!
We welcome improvements, bug fixes, and new mini JavaScript projects! 🚀
Before contributing, please read our CONTRIBUTING.md file for detailed guidelines on how to fork, clone, make changes, and submit pull requests.
Let's build amazing projects together! 💡
This project is licensed under the MIT License.see the LICENSE file for details.
For questions, suggestions, or collaboration, feel free to reach out:
- GitHub: faij1207
- No specific upcoming projects are listed, but there's a clear indication of where future projects will be placed.
- Added a hint for the structure of future projects.
- This gives room for expansion while maintaining a neat and clean format for current and future viewers.