About

Team rosters maintained in spreadsheets or Slack channels decay fast. People leave, roles change, and contact details go stale without anyone noticing. This tool generates a self-contained HTML page from structured employee data - each record validated against format rules for email, unique id, and role-specific fields (officeNumber for managers, GitHub handle for engineers, school for interns). The output file requires zero dependencies: open it in any browser, print it, or host it on an internal server.

The generator enforces data integrity before compilation. An invalid email pattern or a duplicate employee ID triggers rejection at input time, not after you have distributed the page. The generated markup uses inline styles for full portability. Note: GitHub profile URLs are constructed from the username string but not validated against the GitHub API - verify handles independently for accuracy.

Formulas

The generator applies a template compilation pattern. Each employee record E is validated then mapped to an HTML card fragment:

render(E) → template(E.role) ⋅ sanitize(E.fields)

Email validation uses the pattern:

regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

Employee ID uniqueness is enforced by set membership:

id_new ∉ { id₁, id₂, …, id_n }

HTML entity sanitization replaces dangerous characters to prevent XSS in the generated file:

sanitize(s) : & → &, < → <, > → >, " → "

Where E = employee object, role ∈ {Manager, Engineer, Intern}, fields = all string properties of the record.

Reference Data

Role	Required Fields	Special Field	Card Icon	Validation Rule
Manager	Name, ID, Email	Office Number	☕	Office number must be non-empty string
Engineer	Name, ID, Email	GitHub Username	🔧	GitHub username: alphanumeric + hyphens
Intern	Name, ID, Email	School	🎓	School name must be non-empty string
All Roles	Name	-	-	Non-empty, max 50 characters
All Roles	ID	-	-	Positive integer, unique across team
All Roles	Email	-	-	RFC 5322 simplified pattern
Output	Standalone HTML file with inline CSS, no external dependencies
File Size	Approximately 3 - 15 KB depending on team size
Browser Support	Any modern browser (Chrome, Firefox, Safari, Edge)
Print	Generated HTML includes @media print rules for A4 output
Max Team Size	No hard limit; tested up to 100 employees
Data Persistence	Team data saved to localStorage, survives page reload

Frequently Asked Questions

Every time a new employee is added, the entered id is checked against a set of all existing IDs in the current team roster. If id_new ∈ existing set, the input is rejected with a validation error before the record is stored.

Yes. The output is a fully self-contained HTML document with all CSS inlined. It has zero external dependencies - no CDN links, no JavaScript files, no font imports. Upload it to any static hosting service, internal wiki, or open it directly from a file system.

The tool applies a simplified RFC 5322 pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/. This catches the majority of malformed addresses (missing @, spaces, missing domain) but does not validate against DNS MX records. For mission-critical accuracy, verify email deliverability separately.

Yes. Every add, edit, or delete operation triggers an immediate localStorage.setItem call with the serialized team array. Closing the browser and reopening the tool restores the exact state. To start fresh, use the Reset Team button which clears both state and storage.

The generator constructs the URL as https://github.com/ + username without making an API call to verify the account exists. A typo in the username produces a valid-looking link to a 404 page. Verify handles before distribution.

There is no hard cap enforced by the tool. The generated HTML uses a responsive CSS grid that wraps cards naturally. However, localStorage has a typical limit of 5 MB. A team of 100 employees with all fields populated consumes roughly 15 - 25 KB, well within limits.