Desenvolvedor Web Blog

Criar CAPTCHA numérico simples com JavaScript Muitos formulários não possuem algum tipo de validação para minimizar os ataques de robôs , que podem mandar spam se for um formulário de contado ou tentativa de login se for um formulário de login. Vou mostrar como criar um CAPTCHA numérico básico que funciona no lado do cliente, que consiste em desbloquear o botão enviar se o valor escrito pelo usuário for a soma dos números exibidos. O que é um CAPTCHA? É um tipo de desafio que pode ser numérico, palavras ou imagens com a intenção de provar que você é uma pessoa real, o objetivo é limitar o acesso e tráfego criado por bots e outros tipos de robôs que vasculham a Internet todos os dias gerando tráfego artificial , disparando spams e produzindo ataques.   Criando o HTML do desafio do CAPTCHA Para esse desafio será gerado aleatoriamente dois números e o objetivo se escrever no campo input a soma desses números. Copie o HTML abaixo. <div class="math">    ...

Adicionar Tag HTML com JavaScript  Em alguns momentos se torna necessário adicionar uma tag html dentro de outra e dependendo de com for você pode não ter acesso total ao código. Um exemplo pode ser um plugin de WordPress, onde você não pode editar o HTML mas necessita inserir algo ali mesmo que seja estático. Vou mostrar de uma forma muito simples como usar o JS para criar essa tag HTML. Adicionando o HTML com JavaScript Parar criar essa função que adiciona a Tag HTML é necessário abrir o inspecionar do navegador e localizar a DIV ou até mesmo a Tag que vai guardar a Tag que deseja adicionar. Procure por ID ou Class que seja especifico do local para servi como rota e assim o JavaScript vai conseguir achar o local e adicionar.   Criando o JavaScript para adicionar a Tag HTML No exemplo abaixo vou mostrar como adicionar a tag IMG dentro de um botão baseado na class do botão. Primeiro vamos buscar o local e guardar em uma variável. var local = document.query...

 Em algum momento você já ser deparou com a necessidade de remover um atributo ou adicionar para realizar uma função especifica usando o JavaScript. Vou mostrar de forma simples e rápida como realizar essa atividade usando removeAttribute e setAttribute.   Usando removeAttribute e setAttribute O que é um atributo no HTML? Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação). Removendo um atributo da Tag HTML Para demover um atributo deve usar um comando JavaScript chamado removeAttribute que remove um atributo de um elemento específico. Veja o exemplo de Tag HTML onde será removido o atributo href e class. <a id="botao" href="www.google.com.br" class="bt">Visitar google</a>   Para remover usando o JS é necessário localizar o ID da Tag para aplicar o  removeAttr...

  A formatação do campo telefone é muito importante para quem salva o valor recebido no banco de dados ou até mesmo por uma questão visual. Um campo input tipo tel sem formatação como por exemplo em um formulário pode ficar estranho visualmente e atrapalhar a empresa na organização por chegar bagunçado ou com falta do número de DDD. Vou mostrar como criar um campo input que consegue receber o numero de telefone fixo e telefone celular formatando com DDD e caráter especial para separação. Formatando o campo input para telefone fixo e telefone celular Para criar essa formatação vamos utilizar o “.replace” junto com a “expressão regular”, para receber o valor substituindo e organizando baseado a expressão. Preparando o HTML com parâmetro JS Coloque o seguinte código abaixo em seu html <input type="tel" maxlength="14 required="" data-js="phone">   Observe que é um campo tipo TEL que recebe um limite de 14 caracteres com preenchime...

Ganhe mais Leads com esse botão Você já deve ter visto em vários sites na lateral de baixo um botão do WHATSAPP para mandar uma mensagem. Já imaginou um tipo de chat que manda mensagem para o WHATSAPP e também é um tipo de pop up ? Nesse tutorial vou disponibilizar o código para criar um botão WHATSAPP que tem um chat de mentira onde o visitante pode escrever uma pergunta. Criando o botão WHATSAPP no site. Com esse botão o teu site se tornará mais interativo e interessante para o visitante podendo tornar ele um possível LEAD com a função de pop up que vai mostrar na tela o chat aberto e com uma frase para chamar a atenção. No link abaixo tem um site que está utilizando desse botão confira. https://agencianovaacao.com.br/ Se gostou continue lendo! O código é dividido em três partes sendo elas HTML, CSS e JS. No HTML você vai escreve 3 frases simples para chamar a atenção, OBS coloque a rota das imagens de acordo com o teu site. No CSS são...

Modal Vamos criar uma modal que pode conter propaganda sendo texto ou imagem variando de acordo com sua necessidade. Para isso será construída uma estrutura simples em HTML , com um pouco de CSS para criar o estilo da modal assim como a animação para mostrar e guardar e por fim um pequeno Javascript para executar a animação. Primeira parte No HTML vamos usa uma DIV principal que vai conter a modal, essa DIV principal será alinhado no centro e no top da pagina sendo fixo na tela. Na segunda DIV será a propaganda, dentro dela vai conter um paragrafo que  será onde você vai colocar sua propaganda e vai conter um botão para desativar.   <div class="propaganda-alinhar-1">                        <div class="propaganda-1 In-top">         <p>aqui fica propaganda</p>  ...

Anime um texto usando efeito de maquina de escreve ou alguém digitante, onde cada letra é carregada uma de cada vez. Primeiro crie uma Tag HTML , com uma Class e um pequeno texto. <h2 class="escrever">Estou escrevendo uma frase.</h2> Agora vamos criar o código em Javascript . Primeiro, pegue a frase usando o "querySelector", colocando dentro de uma constante. const texto = document.querySelector(".escrever"); Segundo, vamos criar um objeto construtor, com a função "animar" que recebe um parâmetro "frase". function animar(frase) { } OBS o parâmetro "frase" recebe o valor da constante. Terceiro, será criado outra constante, transformando o texto em um Array usando split , e logo depois transformando o valor em uma string vazia, dessa forma permite que cada letra seja carregada. function animar(frase) {       const textoArray = frase.innerHTML.split('');     ...

Criar uma calculadora simples. Vamos desenvolver um calculadora simples usando os operadores básicos, contendo 3 campo input 1 campo select e um paragrafo para o resultado. Primeiro criar o HTML . <form> <input type="number" name="" id="numero1"> <select id="operacao">   <option value="+"> + </option>   <option value="-"> - </option>   <option value="*"> * </option>   <option value="/"> / </option> </select> <input type="number" name="" id="numero2"> <input type="button"  value="calcular" id="calcular"> <br> <p>Resultado: <span id="resultado">.</span></p> </form> Criando o objeto construtor com JavaScript. Vamos chamar de  calculadora e dentro serão criadas variáveis para ...

Mudando o estilo com JavaScript. Hoje vamos mudar o estilo de um titulo, apertando botões, e esses botões vão passar o nome de uma variável que estará guardando o estilo. Primeiro construir o HTML basico, contendo <H1> e <button>. <button id="estilo1">Estilo 1</button> <button id="estilo2">Estilo 2</button> <br> <h1 id="resultado"> Titulo </h1> Vamos para o nosso JS. Segunda parte colocar o ID em variáveis. let estilo1 = document.getElementById('estilo1'); let estilo2 = document.getElementById('estilo2'); let  resultado  = document.getElementById(' resultado '); Terceira parte criar a variáveis em forma de ARRAY para guardar os valores. var bt1 = { color: 'red', fontSize: '1rem',} var bt2 = { color: 'blue', fontSize: '3rem',} Quarta parte, vamos usar o ID do botão e colocar um evento de Clic...