Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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.

Topics

Resources

Stars

Watchers

Forks

Packages

Contributors

Languages