https://github.com/ahmed-maher77/serialgen___random-serial-number-generator
A secure serial number generator with clipboard, customization, and accessibility, following OOP principles.
https://github.com/ahmed-maher77/serialgen___random-serial-number-generator
accessibility clipboard-manager frontend-web-development html-css-javascript js-oop modern-ui oop-principles password-generator responsive-design secure-password-generator serial-number-generator web-design web-development
Last synced: 3 months ago
JSON representation
A secure serial number generator with clipboard, customization, and accessibility, following OOP principles.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/serialgen___random-serial-number-generator
- Owner: Ahmed-Maher77
- License: mit
- Created: 2025-08-06T22:34:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-08-06T23:23:59.000Z (3 months ago)
- Last Synced: 2025-08-07T00:23:16.969Z (3 months ago)
- Topics: accessibility, clipboard-manager, frontend-web-development, html-css-javascript, js-oop, modern-ui, oop-principles, password-generator, responsive-design, secure-password-generator, serial-number-generator, web-design, web-development
- Language: CSS
- Homepage: https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/
- Size: 1.04 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SerialGen | Random Serial Number Generator
SerialGen is a modern, user-friendly web application for generating secure 20-character random serial numbers. Built using Object-Oriented Programming (OOP) principles in Vanilla JavaScript, it offers dynamic UI features such as color customization, responsive design, accessibility, and instant copy-to-clipboard functionality.
---
## 🌐 Demo (Live Preview)
**🔗 Live Demo:** [https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/](https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/)
---
## 💻 Used Technologies
- **HTML5** – Semantic, accessible structure
- **CSS3** – Modern styling (Flexbox, Grid, Custom Properties)
- **JavaScript (ES6+)** – Functionality using OOP architecture
- **Font Awesome 6.5.2** – UI icons
- **Navigator Clipboard API** – Modern clipboard access
- **CSS Media Queries** – Responsive design
- **ARIA + WCAG 2.1** – Accessibility support
---
## ✨ Key Features
- 🔢 **Secure Serial Generation**: Random 20-character alphanumeric strings using uppercase, lowercase, numbers, and special characters
- 📋 **Copy to Clipboard**: One-click button with clipboard API and user feedback
- 🎨 **Color Customization**: Real-time background color picker with design consistency
- 🔁 **Regenerate**: Instant refresh with updated button text
- 📱 **Responsive Design**: Mobile-first and adaptive
- ♿ **Accessibility**: Keyboard support, focus indicators, high contrast, reduced motion, ARIA
- 🎯 **Modern UI**: Minimalist, smooth animations, clean layout
---
## 🎥 Watch the Demo on LinkedIn
**📽️ Watch on LinkedIn:** [coming soon]()
---
## 👀 Website Preview
---
## 📥 Installation Instructions (Local Setup)
```bash
# 1. Clone the repository
git clone https://github.com/Ahmed-Maher77/SerialGen___Random-Serial-Number-Generator.git
# 2. Navigate to the project folder
cd SerialGen___Random-Serial-Number-Generator
# 3. Open index.html in your browser
```
---
## 📬 Contact & Contribution
- 🧑💻 **Portfolio:** https://ahmedmaher-portfolio.vercel.app/
- 🔗 **LinkedIn:** https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 **Email:** ahmedmaher.dev1@gmail.com
> Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
---
## ⭐ Support
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!