Número de caracteres

Número de caracteres

12

Número de caracteres

12

.parametro-senha-botoes{ display: flex; justify-content: center; }.parametro-senha__botao{ background-color: var(--fundo-texto); color: var(--branco); } .parametro-senha__botao{ background-color: var(--fundo-texto); color: var(--branco); border: 2px solid var(--borda); } .parametro-senha__botao{ background-color: var(--fundo-texto); color: var(--branco); border: 2px solid var(--borda); padding: 24px; font-size: 24px; } .parametro-senha__texto{ padding: 24px; } .parametro-senha__texto{ padding: 24px; border-top: 2px solid var(--borda); border-bottom: 2px solid var(--borda); margin: 0; } .parametro-senha__texto{ padding: 24px; border-top: 2px solid var(--borda); border-bottom: 2px solid var(--borda); margin: 0; font-size: 24px; } .parametro-senha__botao{ background-color: var(--fundo-texto); color: var(--branco); border: 2px solid var(--borda); padding: 24px; font-size: 24px; cursor: pointer; }

Características da senha

Características da senha

Características da senha

Características da senha

Número de caracteres

Características da senha

Características da senha

Características da senha

label{ font-size: 20px; }

Características da senha

.checkbox{ width: 20px; height: 20px; } .checkbox{ width: 20px; height: 20px; cursor: pointer; }

Força da senha

Força da senha

Fraca

Média

Forte

.barra{ background-color: var(--fundo-senha); height: 30px; width: 100%; } .forca{ height: 30px; position: relative; bottom: 30px; } .fraca{ width: 25%; background-color: #E71B32; } .parametro-senha-textos{ display: flex; justify-content: space-between; } .media{ background-color: #FAF408; width: 50%; } .forte{ background-color: #00FF85; width: 100%; }
const numeroSenha = document.querySelector('.parametro-senha__texto'); let tamanhoSenha = 12; let tamanhoSenha = 12; const botoes = document.querySelectorAll('.parametro-senha__botao'); const numeroSenha = document.querySelector('.parametro-senha__texto'); let tamanhoSenha = 12; numeroSenha.textContent = tamanhoSenha; const botoes = document.querySelectorAll('.parametro-senha__botao'); console.log(botoes) botoes[0].onclick = diminuiTamanho; function diminuiTamanho(){ tamanhoSenha = tamanhoSenha-1; } function diminuiTamanho(){ tamanhoSenha = tamanhoSenha-1; numeroSenha.textContent = tamanhoSenha; } botoes[0].onclick = diminuiTamanho; botoes[1].onclick = aumentaTamanho; function aumentaTamanho(){ tamanhoSenha = tamanhoSenha+1; }function aumentaTamanho(){ tamanhoSenha = tamanhoSenha+1; numeroSenha.textContent = tamanhoSenha; } function diminuiTamanho(){ if (tamanhoSenha > 1){ tamanhoSenha = tamanhoSenha-1; } numeroSenha.textContent = tamanhoSenha; }function aumentaTamanho(){ if (tamanhoSenha < 20){ tamanhoSenha = tamanhoSenha+1; } numeroSenha.textContent = tamanhoSenha; }function diminuiTamanho(){ if (tamanhoSenha > 1){ // tamanhoSenha = tamanhoSenha-1; tamanhoSenha--; } numeroSenha.textContent = tamanhoSenha; }