This repository contains a technical test for Frontend developers focused on creating a Pinpad component using HTML5, CSS3, and vanilla JavaScript.
The goal of this exercise is to implement a Pinpad that allows users to:
Set an access pin on their first visit. Validate access on subsequent visits by entering the saved pin. Technical Requirements Vanilla JS and CSS: No frameworks are allowed. Sass: Use Sass as the CSS preprocessor. Responsive and Mobile-First Design: The design should adapt to all screen sizes, starting with mobile. Resource Optimization: Minimize the use of graphic assets. Clean and Organized Code: BEM naming convention is recommended for CSS. SEO Best Practices. Design Structure
UI-KIT: Atomic elements for the Pinpad. Desktop: Specifications for larger screens. Mobile: Adjustments for mobile resolutions.
First Visit: The user sets a pin through a modal dialog, entering only numbers. Subsequent Visits: The user must enter the saved pin to gain access. After three failed attempts, the user will be redirected.