Skip to content

Instantly share code, notes, and snippets.

@talilotarlison

talilotarlison/index.html

Created September 20, 2022 20:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save talilotarlison/f72096ea0c9f43d3d57f4dbbe0cec7f0 to your computer and use it in GitHub Desktop.
Save talilotarlison/f72096ea0c9f43d3d57f4dbbe0cec7f0 to your computer and use it in GitHub Desktop.
Download ZIP
Tela de Cadastro
Raw
index.html
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class='container'>
<div class='card'>
<h1> Cadastrar </h1>
<div id='msgError'></div>
<div id='msgSuccess'></div>
<div class="label-float">
<input type="text" id="nome" placeholder=" " required>
<label id="labelNome" for="nome">Nome</label>
</div>
<div class="label-float">
<input type="text" id="usuario" placeholder=" " required>
<label id="labelUsuario" for="usuario">Usuário</label>
</div>
<div class="label-float">
<input type="password" id="senha" placeholder=" " required>
<label id="labelSenha" for="senha">Senha</label>
<i id="verSenha" class="fa fa-eye" aria-hidden="true"></i>
</div>
<div class="label-float">
<input type="password" id="confirmSenha" placeholder=" " required>
<label id="labelConfirmSenha" for="confirmSenha">Confirmar Senha</label>
<i id="verConfirmSenha" class="fa fa-eye" aria-hidden="true"></i>
</div>
<div class='justify-center'>
<button onclick='cadastrar()'>Cadastrar</button>
</div>
</div>
</div>
</body>
Raw
script.js
let btn = document.querySelector('#verSenha')
let btnConfirm = document.querySelector('#verConfirmSenha')
let nome = document.querySelector('#nome')
let labelNome = document.querySelector('#labelNome')
let validNome = false
let usuario = document.querySelector('#usuario')
let labelUsuario = document.querySelector('#labelUsuario')
let validUsuario = false
let senha = document.querySelector('#senha')
let labelSenha = document.querySelector('#labelSenha')
let validSenha = false
let confirmSenha = document.querySelector('#confirmSenha')
let labelConfirmSenha = document.querySelector('#labelConfirmSenha')
let validConfirmSenha = false
let msgError = document.querySelector('#msgError')
let msgSuccess = document.querySelector('#msgSuccess')
nome.addEventListener('keyup', () => {
if(nome.value.length <= 2){
labelNome.setAttribute('style', 'color: red')
labelNome.innerHTML = 'Nome *Insira no minimo 3 caracteres'
nome.setAttribute('style', 'border-color: red')
validNome = false
} else {
labelNome.setAttribute('style', 'color: green')
labelNome.innerHTML = 'Nome'
nome.setAttribute('style', 'border-color: green')
validNome = true
}
})
usuario.addEventListener('keyup', () => {
if(usuario.value.length <= 4){
labelUsuario.setAttribute('style', 'color: red')
labelUsuario.innerHTML = 'Usuário *Insira no minimo 5 caracteres'
usuario.setAttribute('style', 'border-color: red')
validUsuario = false
} else {
labelUsuario.setAttribute('style', 'color: green')
labelUsuario.innerHTML = 'Usuário'
usuario.setAttribute('style', 'border-color: green')
validUsuario = true
}
})
senha.addEventListener('keyup', () => {
if(senha.value.length <= 5){
labelSenha.setAttribute('style', 'color: red')
labelSenha.innerHTML = 'Senha *Insira no minimo 6 caracteres'
senha.setAttribute('style', 'border-color: red')
validSenha = false
} else {
labelSenha.setAttribute('style', 'color: green')
labelSenha.innerHTML = 'Senha'
senha.setAttribute('style', 'border-color: green')
validSenha = true
}
})
confirmSenha.addEventListener('keyup', () => {
if(senha.value != confirmSenha.value){
labelConfirmSenha.setAttribute('style', 'color: red')
labelConfirmSenha.innerHTML = 'Confirmar Senha *As senhas não conferem'
confirmSenha.setAttribute('style', 'border-color: red')
validConfirmSenha = false
} else {
labelConfirmSenha.setAttribute('style', 'color: green')
labelConfirmSenha.innerHTML = 'Confirmar Senha'
confirmSenha.setAttribute('style', 'border-color: green')
validConfirmSenha = true
}
})
function cadastrar(){
if(validNome && validUsuario && validSenha && validConfirmSenha){
let listaUser = JSON.parse(localStorage.getItem('listaUser') || '[]')
listaUser.push(
{
nomeCad: nome.value,
userCad: usuario.value,
senhaCad: senha.value
}
)
localStorage.setItem('listaUser', JSON.stringify(listaUser))
msgSuccess.setAttribute('style', 'display: block')
msgSuccess.innerHTML = '<strong>Cadastrando usuário...</strong>'
msgError.setAttribute('style', 'display: none')
msgError.innerHTML = ''
setTimeout(()=>{
window.location.href = 'https://cdpn.io/thicode/debug/ZELzYxV/dXAqBaRyvwJk'
}, 3000)
} else {
msgError.setAttribute('style', 'display: block')
msgError.innerHTML = '<strong>Preencha todos os campos corretamente antes de cadastrar</strong>'
msgSuccess.innerHTML = ''
msgSuccess.setAttribute('style', 'display: none')
}
}
btn.addEventListener('click', ()=>{
let inputSenha = document.querySelector('#senha')
if(inputSenha.getAttribute('type') == 'password'){
inputSenha.setAttribute('type', 'text')
} else {
inputSenha.setAttribute('type', 'password')
}
})
btnConfirm.addEventListener('click', ()=>{
let inputConfirmSenha = document.querySelector('#confirmSenha')
if(inputConfirmSenha.getAttribute('type') == 'password'){
inputConfirmSenha.setAttribute('type', 'text')
} else {
inputConfirmSenha.setAttribute('type', 'password')
}
})
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url(https://i.imgur.com/XbRg9D7.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed
}
.container {
display: flex;
justify-content: center;
width: 100%;
margin-top: 100px;
}
.card {
background-color: #ffffff80;
padding: 30px;
border-radius: 4%;
box-shadow: 3px 3px 1px 0px #00000060;
width: 400px;
}
h1{
text-align: center;
margin-bottom: 20px;
color: #0d009c
}
.label-float input{
width: 100%;
padding: 5px 5px;
display: inline-block;
border: 0;
border-bottom: 2px solid #0d009c;
background-color: transparent;
outline: none;
min-width: 180px;
font-size: 16px;
transition: all .3s ease-out;
border-radius: 0;
}
.label-float{
position: relative;
padding-top: 13px;
margin-top: 5%;
margin-bottom: 5%;
}
.label-float input:focus{
border-bottom: 2px solid #4038a0;
}
.label-float label{
color: #0d009c;
pointer-event: none;
position: absolute;
top: 0;
left: 0;
margin-top: 13px;
transition: all .3s ease-out;
}
.label-float input:focus + label,
.label-float input:valid + label{
font-size: 13px;
margin-top: 0;
color: #4038a0
}
button{
background-color: transparent;
border-color: #0d009c;
color: #0d009c;
padding: 7px;
font-weight: bold;
font-size: 12pt;
margin-top: 20px;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: all .4s ease-out;
}
button:hover{
background-color: #0d009c;
color: #fff;
}
.justify-center{
display: flex;
justify-content: center;
}
.fa-eye{
position: absolute;
top: 15px;
right: 10px;
cursor: pointer;
color: #0d009c;
}
#msgError{
text-align: center;
color: #ff0000;
background-color: #ffbbbb;
padding: 10px;
border-radius: 4px;
display: none;
}
#msgSuccess{
text-align: center;
color: #00bb00;
background-color: #bbffbe;
padding: 10px;
border-radius: 4px;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment