Skip to content

Latest commit

 

History

History
102 lines (74 loc) · 2.72 KB

README.md

File metadata and controls

102 lines (74 loc) · 2.72 KB

Guitar Capture Page

  • O projeto foi desenvolvido com Html, Css e JavaScript.

Índice

Visao Geral

A ideia

A ideia foi fazer uma página de captura de uma Newsletter.

Screenshot

Links

Como rodar o projeto

  • Acesse o site e preencha o formulário: Site

Meu processo

Construido com

  • Marcação HTML5 semântica
  • Propriedades personalizadas de CSS
  • Flexbox
  • Primeiro fluxo de trabalho para desktop
  • JavaScript
  • Validação de inputs com Regex

O que eu aprendi

Aprendi a validar com expressões regulares, implementei usabilidade e deixei a página mais acessível ao usuário.

<div class="subscribe-newsletter">
    <div class="container">
        <form id="form">
            <button class="newsletter-close" id="close" aria-label="Fechar">x</button>

            <img class="guitar-blue"
            src="./src/images/guitar-blue.jpg"
            alt="Guitarra azul em cima de caixa amplificadora."
            title="Guitarra azul em cima de caixa
            amplificadora.">

            <h2 class="title">
                A Newsletter que te dá dicas gratuitas sobre
                guitarra e violão!
            </h2>
            
            <fieldset id="enter-data">
                <input type="text" id="username" placeholder="Nome:">
                <label class="message" for="username"></label>
                <input type="email" id="email" placeholder="E-mail:">
                <label class="message" for="email"></label>

                <button class="tips btn">Receber dicas agora!</button>

                <label class="spam">Também odiamos spam!</label>
            </fieldset>

            <div class="message-success">Obrigado!!! Inscrição realizada com sucesso! =)</div>
        </form>
    </div>
</div>
const validateEmail = inputEmail => {
    const emailRegex = /^(?=.*[\@])[a-zA-Z0-9\@]{10,256}$/;
    const emailIsValid = emailRegex.test(inputEmail.value);
    
    if (!emailIsValid) {
        errorFeedback(inputEmail);
    } else {
        successFeedback(inputEmail);
    }
};

Autor