iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Hoje eu vou desafiar vocês a criarem um app super legal chamado Auto Text Effect. O objetivo desse desafio é exibir uma frase na tela e controlar a velocidade de exibição da frase através de um campo de input. Vocês vão precisar utilizar CSS, JS e HTML para criar esse efeito.

Mas antes, vamos falar um pouco sobre a importância de aplicar efeitos em elementos HTML em desenvolvimento web. Esses efeitos ajudam a melhorar a experiência do usuário, tornando o site mais atraente e interativo. Eles também podem ajudar a destacar informações importantes e tornar a navegação mais fácil.

Agora, vamos às dicas para vocês criarem o Auto Text Effect. Vocês vão precisar utilizar o método setInterval do JavaScript para controlar a velocidade da exibição da frase. Para aplicar o efeito de texto digitando na tela, vocês vão pode ser feito utilizando o comando .innerHTML do JavaScript para ir adicionando as letras da frase na tela de forma gradual.

Para deixar o site mais bonito, vocês podem utilizar CSS para aplicar estilos no texto, como fonte, cor, tamanho e alinhamento. E para tornar o site mais interativo, vocês podem adicionar um botão de pause para permitir que o usuário interrompa a exibição da frase a qualquer momento.

Lembrem-se, crianças inocentes, não utilizem soluções prontas e tentem criar o código do zero. Isso vai ajudar vocês a entenderem melhor como as coisas funcionam e aprimorarem suas habilidades de programação. Boa sorte!

Exemplo

https://user-images.githubusercontent.com/30157522/224495055-38fc29aa-02a8-44a4-badf-65c4287fa50e.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>

    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>

    <script src="script.js"></script>
  </body>
</html>

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_home_202112130027@ifto local_%C3%81rea%20de%20Trabalho_Movie%20App_index html

HTML

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Auto Text Effect</title>
</head>

<body>
  <p id="auto-text"></p>
  <label for="speed-control">Velocidade: </label>
  <input type="range" min="1" max="10" value="1" id="speed-control">
  <script src="script.js"></script>
</body>

</html>

CSS

body{
    font-family: Arial, Helvetica, sans-serif;
}

#auto-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: #333;
    border-right: 2px solid #333;
    white-space: nowrap;
    overflow: hidden;
}

label {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}

JS

var autoText = document.getElementById('auto-text');
var text = 'Digite o seu texto aqui!';
var speed = 1; // velocidade em milissegundos
var speedControl = document.getElementById('speed-control');
var intervalId = null;

function typeWriter(text, i, interval) {
  if (i < text.length) {
    autoText.innerHTML += text.charAt(i);
    i++;
    interval = 1000 / speed; // calcular o intervalo com base na velocidade atual
    intervalId = setTimeout(function() { typeWriter(text, i, interval); }, interval);
  }
}

function startTypeWriter() {
  autoText.innerHTML = '';
  clearInterval(intervalId);
  typeWriter(text, 0, null);
}

speedControl.addEventListener('input', function() {
  speed = this.value;
  startTypeWriter();
});

startTypeWriter();