https://github.com/chbappy-cse/javascript-dom-mini-projects
A collection of JavaScript DOM mini-projects to enhance JavaScript skills and explore DOM manipulation. Includes projects like a Todo List, Quiz App, Weather App, Calculator, QR Code Generator, Music Player, and more. Perfect for beginners and those looking to practice frontend development.
https://github.com/chbappy-cse/javascript-dom-mini-projects
api dom-manipulation frontend html-css-javascript learning mini-project practice-project project web-development
Last synced: 5 months ago
JSON representation
A collection of JavaScript DOM mini-projects to enhance JavaScript skills and explore DOM manipulation. Includes projects like a Todo List, Quiz App, Weather App, Calculator, QR Code Generator, Music Player, and more. Perfect for beginners and those looking to practice frontend development.
- Host: GitHub
- URL: https://github.com/chbappy-cse/javascript-dom-mini-projects
- Owner: chbappy-cse
- Created: 2025-03-26T14:57:33.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-27T16:08:15.000Z (about 1 year ago)
- Last Synced: 2025-06-18T05:41:17.267Z (about 1 year ago)
- Topics: api, dom-manipulation, frontend, html-css-javascript, learning, mini-project, practice-project, project, web-development
- Language: HTML
- Homepage: https://chbappy-cse.github.io/JavaScript-DOM-mini-projects/
- Size: 17 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript DOM Mini Projects
This repository contains a collection of JavaScript DOM-based mini-projects to help improve JavaScript skills and learn more about the Document Object Model (DOM).
## Projects List
### 1. Social Media Website (Like Facebook)
A basic social media interface with post creation, likes, and comments using JavaScript and DOM manipulation.
### 2. JavaScript Weather App
Fetches real-time weather data using an API and displays temperature, humidity, and conditions.
### 3. Todo List
A dynamic to-do list application that allows adding, editing, and deleting tasks with local storage support.
### 4. Quiz App
A multiple-choice quiz application with score tracking and question randomization.
### 5. Random Password Generator
Generates a secure random password based on user-selected criteria (length, symbols, numbers, uppercase, lowercase).
### 6. Password Hide and Show
A simple toggle functionality to show or hide the password input field in forms.
### 7. Notes App
A simple note-taking app where users can add, edit, and delete notes with local storage functionality.
### 8. Age Calculator
Calculates age based on the user's date of birth input and displays it dynamically.
### 9. JavaScript Calculator App
A basic calculator with arithmetic operations using JavaScript.
### 10. Quote Generator App
Fetches and displays random motivational or inspirational quotes dynamically.
### 11. QR Code Generator
Generates a QR code based on user input text or URL using a QR code API.
### 12. Notification Toast
Displays custom toast notifications for user alerts with auto-dismiss functionality.
### 13. Music Player
A simple music player with play, pause, next, previous, and volume controls.
### 14. Stopwatch
A functional stopwatch with start, stop, and reset buttons.
### 15. Popup
A modal popup that displays content when triggered and can be closed by clicking outside or on the close button.
### 16. Form Validation
Validates user inputs in a form (e.g., email format, password strength, required fields) using JavaScript.
### 17. Horizontal Scrolling Slide Gallery
A smooth horizontal scrolling gallery that users can navigate using buttons or drag interactions.
### 18. Email Subscription
A simple email subscription form where users can enter their email to subscribe to a newsletter, with validation and local storage.
### More Coming Soon...
Stay tuned for more exciting JavaScript projects!
## Installation & Usage
1. Clone the repository:
```sh
git clone https://github.com/chbappy-cse/JavaScript-DOM-mini-projects.git
```
2. Open the project folder in your code editor.
3. Open any project `.html` file in a browser to see it in action.
## Technologies Used
- HTML
- CSS
- JavaScript (DOM Manipulation)
- APIs (for Weather App, QR Code Generator, and Quote Generator)
## Contributions
Feel free to contribute by adding new features, fixing bugs, or optimizing the existing code.
## License
This project is licensed under the MIT License.