Skip to content

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.

Notifications You must be signed in to change notification settings

GusangTI/Business-Card-Generator

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

No packages published