Business Card Generator 💳 This is a practical project for a Business Card Generator. 👋 The application allows a user to input information (company name, phone number, and email) into a form, validates this data, and then generates a digital business card that remains saved in the browser.
✨ Features 🧭 Tabbed Navigation: The site consists of 4 pages: Home, Create Card, Card Created, and About Us.
✍️ Creation Form: A simple form to input the Company Name, Phone, and Email.
✅ Data Validation: JavaScript validates the fields to ensure that:
No field is empty.
The phone field contains only numbers.
The email is in a valid format (e.g., name@site.com).
🖼️ Card Generation: After validation, the card is dynamically generated on the "Card Created" page.
💾 Data Persistence: The created card is saved in the browser's localStorage. This means the card does not disappear if the user reloads the page or navigates to other tabs.
💻 Technologies Used This project demonstrates the fundamentals of web programming using:
🏛️ HTML5: For the semantic structure of all pages.
🎨 CSS3: For complete styling, including the layout of the side navigation bar (sidenav) and the design of the generated card.
🚀 JavaScript (ES6+): For all interactivity, including:
DOM (Document Object Model) manipulation.
Form validation.
Storing and reading data from localStorage.
🚀 How to Run the Project As this is a pure front-end project (HTML, CSS, and JS only), no server or complex installation is required.
Clone or download this repository.
Navigate to the project folder (Business Card Generator/).
Open the index.html file in your preferred browser.
That's it! Browse the site and create your card. 🎉