0

Projetinho Auto Writer para quem está começando

Leonardo Demetrio
Leonardo Demetrio

Oi Pessoal, tudo bem ?


Hoje Vim compartilhar com vocês um pequeno projetinho. Se trata de um Auto Writer, para quem não sabe, é uma forma do cursor ir consumindo um texto já pré estabelecido para aparecer na tela.


Esse projeto é simples, e bom para quem está no inicio!


Para fazer ele, vamos precisar de três arquivos


  • Index.html
  • style.css
  • script.js


Vamos começar pelo HTML


Criamos um HTML simples e iremos lincar nele os arquivos Style.css e o Script.js, não se esqueça de utilizar o "defer" na tag script ou adicione o JavaScript no final do código.


Agora vamos para o CSS


A primeira linha em Importa url é a importação da letra Poppins do google fonts. Você pode acessa-lo por aqui : GOOGLE FONTES CLIQUE AQUI


em *, estamos dizendo para todos os elementos assumirem um tamanho de caixa do tipo border-box.


Em Body, estamos criando um gradiente no background e deixando nosso texto no meio da tela através das configurações de display e alinhamento de itens.


Agora vamos para o JavaScript.



Vamos criar duas variáveis, uma chamada indexText e outra de indexArray, ambas recebendo 0.


Vamos criar também um Array de palavras que queremos que apareça no nosso projeto.


Vamos também criar uma função, nesse caso eu chamei uma arrow function, mas você pode usar function se não estiver acostumado.


Essa função irá escrever no body cada letra do texto dentro do array.


Basicamente, essa função pega o primeiro valor do array que no nosso caso é "Programar", faz um slice de 0 (indiceText) até o tamanho total da palavra, ou seja, se a palavra tem 8 letras, ele vai pegar letra por letra até a 8º letra e somar +1 ao indiceText.

Depois ele adiciona +1 ao índice do array (indiceArray), mudando de palavra e zera o indice do texto. Dessa forma temos um ciclo que fica se repetindo.


indexArray = indexArray >= array.length? 0 : indexArray;


Para quem não entendeu o código acima , isso é um if ternário. Ele permite eu escrever estruturas encadeadas em uma única linha.

A linha acima está dizendo que a variável indexArray vai receber o valor 0, caso ela seja maior que o meu array. Se não, ela recebe ela mesma.


Podemos reescrever dessa maneira

if ( indexArray >= array.length)
{
	indexArray = 0;
} 
//Se não, nada acontece.


setInterval(função,tempo)


O SetInterval, é uma função que recebe dois parâmetros, o primeiro é a chamada de uma função ou callback, o segundo é o tempo em milissegundos que a função vai esperar, ou seja, toda vez que o tempo acabar o setInterval chama a função que está dentro dele para ser executada.


O Resultado é esse :


Bom gente, espero que tenham gostado e até a próxima!

0
0

Comentários (6)

1

Q susto achei que tbm tava fazendo #AI_com Bots, muito top #Leonardo!

1
Cássio Patrizzi

Cássio Patrizzi

17/04/2021 21:52

Ou abro em outra guia (botão direito, nova guia, favoritos), criei uma pasta da DIO, salvo o link e renomeio. Tb dá certo



1
A

Aline Souza

17/04/2021 21:30

Adorei,bem didático.

1
Cássio Patrizzi

Cássio Patrizzi

17/04/2021 21:29

Tenho salvado criando coleções.

2
William Junior

William Junior

17/04/2021 21:01

Bem massinha mano! Boa. Agora uma funcionalidade bacana que a plataforma poderia implementar é 'salvar' ou 'favoritar' artigos publicados, pois muitos são interessantes, mas se perdem no meio do scroll infinito.

1
Rodrigo Fiães

Rodrigo Fiães

17/04/2021 20:31

Bem Legal!!!!

Sou apaixonado por tecnologia, marketing e games.

Brasil