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.
🔗 Live Demo: https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/
- 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
- 🔢 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 on LinkedIn: coming soon
# 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- 🧑💻 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.
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!