Badge Generator
A school exercise from ETIC Algarve — a simple badge generator that creates printable ID cards with contact information, powered by MockAPI.
Tech Stack
Overview
Badge Generator is a practical school assignment developed during my studies at ETIC Algarve. The goal was to build a simple tool that generates ID-style badges displaying a person's contact information.
The project connects to MockAPI to fetch and store user data, then renders each entry as a styled badge — simulating the kind of cards you might hand out at an event or display in a team directory.
The entire project was built using only vanilla HTML, CSS, and JavaScript — no frameworks, no libraries — making it a pure exercise in DOM manipulation, API consumption, and front-end fundamentals.
Key Responsibilities
- Built the full project using only vanilla HTML, CSS, and JavaScript
- Integrated MockAPI to fetch and display user contact data
- Designed a badge layout to present contact information clearly
- Handled dynamic rendering of badge cards from API responses
- Completed as a graded school exercise at ETIC Algarve
Key Features
- Badge generation from API data
- Contact information display: name, email, phone, and more
- Dynamic card rendering with vanilla JavaScript
- MockAPI integration for data persistence
- Built with zero dependencies — pure HTML, CSS, and JS
