https://github.com/leo-henrique/cartao-interativo

Criação de um cartão digital com validações rigorosas utilizando RegEx.
https://github.com/leo-henrique/cartao-interativo

character-class flags javascript lookahead lookbehind quantifiers regex regex-match regex-replace scss vanilla-javascript

Last synced: 4 days ago
JSON representation

Criação de um cartão digital com validações rigorosas utilizando RegEx.

• Host: GitHub
• URL: https://github.com/leo-henrique/cartao-interativo
• Owner: Leo-Henrique
• Created: 2022-11-15T13:45:01.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-20T14:06:58.000Z (about 2 years ago)
• Last Synced: 2024-11-09T03:42:41.783Z (about 2 months ago)
• Topics: character-class, flags, javascript, lookahead, lookbehind, quantifiers, regex, regex-match, regex-replace, scss, vanilla-javascript
• Language: SCSS
• Homepage: https://leo-henrique.github.io/cartao-interativo/
• Size: 274 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Cartão interativo com validação em RegExp | Desafio do Frontend Mentor

Apesar de ser um desafio simples – em que as informações passadas em um formulário apenas é exibida na tela –, aproveitei que os campos consistia em simular a entrada de dados de um cartão comum para impor condições e validações mais amplas no formulário.

Todas as validações que realizei foram baseadas ou criadas com *expressões regulares*. Minha ideia era facilitar e economizar o máximo possível de tempo do usuário, impedindo que caracteres inválidos sejam digitados e formatando cada campo conforme o usuário digita, por exemplo. 

Os principais termos de **RegExp (expressões regulares)** que utilizei foram:

* Classes de caracteres

* Flags

* Quantificadores

* Grupos de captura e substituições

* Lookaround com lookbehind e lookahead

![Captura de tela do projeto](https://user-images.githubusercontent.com/72027449/205304175-4f512b1e-39b6-49cc-9770-c7bfb0fcef3e.png)

## 📋 Índice

* [Visão geral](#-visão-geral)

    * [Status](#-status)

    * [O desafio](#-o-desafio)

    * [Links](#-acesse-o-projeto)

* [Desenvolvimento](#%EF%B8%8F-desenvolvimento)

    * [Tecnologias utilizadas](#-tecnologias-utilizadas)

    * [Aperfeiçoamentos](#-aperfeiçoamentos)

        * [Lógica](#lógica)

        * [Renderização](#renderização)

        * [Formato e substituições](#formato-e-substituições)

## 🔎 Visão geral

### ✅ Status

Finalizado.

### 🏁 O desafio

Para a resolução deste desafio, os usuários devem ser capazes de:

* Visualizar exatamente o layout proposto de acordo com o tamanho da janela de exibição (responsividade)

* Visualizar os estados – pairar, clicar ou selecionar – nos elementos interativos para uma usabilidade adequada

* Preencher o formulário e ver a atualização dos dados do cartão em tempo real

* Receber mensagens de erro quando o formulário for enviado se:

   * Algum campo de entrada estiver vazio

   * Algum campo de entrada estiver no formato errado

### 🔗 Acesse o projeto

* [Link do projeto](https://leo-henrique.github.io/cartao-interativo/)

* [Desafio no Frontend mentor](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw)

## ⚙️ Desenvolvimento

### 💻 Tecnologias utilizadas

* HTML

* CSS / SASS

* Vanilla JavaScript

### 💡 Aperfeiçoamentos

A proposta do desafio em relação a validação era realizar a mesma quando o usuário clicasse no botão que submetia o formulário.

Como meu principal objetivo com este projeto era usar expressões regulares, decidi então deixar o formulário com a validação mais rigorosa possível, ao mesmo tempo que esta validação não complicasse a cabeça do usuário.

#### Lógica

Havia um padrão de informações para cada dado ou campo, como cada um deles possuir um valor padrão, ter uma regex para rejeição, outra para formatação e entre outras informações. Dessa forma, criei um objeto representando cada campo do formulário:

```js

cardholder: {

    empty: "Leonardo Henrique",

    reject: /[^a-zÀ-öù-Ź\s]/gi,

    format: {

        character: " ",

        reject: /(?