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. ๐