How to put two distinct colors in a chat, the color of the user’s text has to be x and the color of the bot’s text has to be y

Asked

Viewed 100 times

0

In html I have this code:

<!DOCTYPE html>
<link rel="icon" href="favicon.ico">
<meta charset="utf-8">
<link rel="stylesheet" href="chat.css"
<html>
<head>
<title>Assistente Virtual</title>
<h1>Informe sua dúvida que nosso assistente virtual irá te ajudar</h1>
</head>
<body>
<center>
<br><br><br><br><br><br><br><br>




    <textarea style="font-size: 20px;" cols="50" rows="200" id="resposta" >
        Olá me chamo Natália e sou sua assistente virtual, como posso te ajudar? (para os comandos digita /cmd)
    </textarea>


<p id="mudarcor">Para agendamento de dia e hora envie (1)</p>

<p><input type="text" id="pergunta" placeholder="Olá, Como posso te ajudar?" autofocus></p>

<button  id = 'btn' onclick="enviar()">Enviar</button>

<script src='chat.js'></script>

<center>

</body>

</html>

In Javascript this code:

var bot ='Assistente Virtual: ';
var user = 'Usuário: ';
// script para funcionar ao apertar o enter
var input = document.getElementById("pergunta");
input.addEventListener("keyup", function(event) {             //falta add um evento de click ao o usuário clikar em enviar e limpar
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("btn").click();
        erase_sent();

        }
});
//função pra limpar o input ao usuário depois de enviar
function erase_sent()
{
  var limpo = null;
  document.getElementById('pergunta').value = limpo;
}



// Falas para o bot
var resp_padrao = ['Para agendamento de dia e hora envie (1), Se deseja saber qual dia o seu serviço estará pronto envie (2), Se deseja remarcar o dia do seu serviço tecle (3), Se deseja fazer o pagamento e gerar um boleto tecle (4), Se deseja falar com um de nossos atendentes tecle (5)'];
var resp_oi = ['Olá? Como posso te ajudar', 'Sou uma assistente virtual pronta para lhe ajudar'];
var resp_ale = ['humm... não entendi', 'Você pode ser mais específico por favor?', 'Desculpa mas não entendi'];
var resp_formal = ['Por favor, digite uma das opções acima', 'Só consigo te direcionar se vc digitar umas das opções acima', 'Estou me esforçando mas não consigo te entender']

  // temperatura por window prompt
  function temperatura()
    {
      document.getElementById('resposta').value = bot + 'Você quer saber a temperatura de onde ?';
      var winprom = window.prompt (bot + 'Qual cidade deseja a informação de temperatura ?');
      window.open('https://www.google.com/search?q=temperatura+' + winprom );
  }
/*
  // Falas Geradas por um loop
  function fala_sozinho()
  {

    for(i = 0 ; i < 10; i++)
    {
      var falas = resp_ale[Math.floor(Math.random() * resp_ale.length)];          //Math.floor(Math.random(); retorna um número aleatório entre os valores especificados, ex.: Math.floor((Math.random() * 100) + 1);
      document.getElementById('resposta').value += falas;                        //retornará um número aleatório entre 1 e 100, nesse caso se tratando de strings eu fiz com que retornasse a variável resp_ale.length
                                                                                //então dessa forma irá retornar frases aleatórias
    }
  }
  */

  // Gera data e hora atual
  function data_atual()
  {
    var today = new Date();
    var data_final = today.getDate() + '/' + today.getMonth() + '/' + today.getFullYear(); // data
    var hour_final = today.getHours() + ":" + today.getMinutes() ; // hora
    document.getElementById('resposta').value += bot + 'São ' +  hour_final + ' do dia ' + data_final + '' ;
  }


  function mudarCor(){
    //var cor = document.getElementById('pergunta').value;
    //cor = document.getElementById('pergunta').style.color = 'red';
  };

  // func principal
  function enviar()
  {
    var padrao = resp_padrao[Math.floor(Math.random() * resp_padrao.length)]; 
    var formal = resp_formal[Math.floor(Math.random() * resp_formal.length)];
    var input = document.getElementById("pergunta").value;
    var rand = resp_oi[Math.floor(Math.random() * resp_oi.length)];


     /**document.getElementById('resposta').value -> este .value é valor que estou atribuindo ao html para que o usuário 
       * veja, estou pegando a id resposta que é o textarea do html e atribuindo valores para que estes sejam repassados
       * ao usuário.
       */


    if (input.indexOf('oi') != -1 || input.indexOf('olá') != -1 || input.indexOf('preciso de ajuda') != -1 || input.indexOf('ei') != -1 ) // != -> O operador de desigualdade retorna true (verdade) se os operandos não são iguais
      {
        document.getElementById('resposta').value = user + document.getElementById('pergunta').value +'\n' + bot + rand; // O caractere ->   \ n   <-  é usado para encontrar um caractere de nova linha. percebi q ele faz com que apareça as duas linhas ao usuário, a linha de pergunta do user e resposta do bot

      } 

    else if (input.indexOf('/cmd') != -1)
      {
        document.getElementById('resposta').value = 'Comandos :  \n /temp pega uma cidade e mostrar sua temperatura  \n /falas fica falando sozinho por um tempo \n /date mostra a data e a hora atual \n /encomenda redireciona para o meu site de pesquisa de encomenda \n /calc redireciona para a calculadora *Alguns estão em teste e outros ainda estão sendo desenvolvidos*';
      }

    else if (input.indexOf('quero remarcar o dia') != -1 || input.indexOf('quero fazer o pagamento') != -1 || input.indexOf('quero agendar o dia do meu serviço') != -1 || input.indexOf('quero gerar um boleto') != -1 || input.indexOf('quero saber qunado meu serviço vai estar pronto') != -1 || input.indexOf('quero falar com um atendente') != -1)
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + padrao;
      }

    else if (input.indexOf('não quero falar por aqui') != -1 || input.indexOf('quero falar com uma pessoa') != -1|| input.indexOf('to ok') != -1)
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + resp_padrao ;
      }

      else if (input.indexOf('tudo bem') != -1 || input.indexOf('tudo certo') != -1|| input.indexOf('eai') != -1|| input.indexOf('eai') != -1)
        {
          document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + formal;
        }

        else if (input.indexOf('te fez') != -1 || input.indexOf('te criou') != -1|| input.indexOf('te programou') != -1|| input.indexOf('eai') != -1)
          {
            document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Foi o Desenvolvedor Wilhams';
          }

    else if (input.indexOf('qual seu nome?') != -1 || input.indexOf('se chama') != -1 )
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Sou uma assitente virtal e me chamo Natália';
      }

      else if (input.indexOf('1') != -1) 
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Seu serviço foi agendado para o dia 30/05/2022.';
      }

      else if (input.indexOf('2') != -1) 
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Seu serviço estará pronto no dia 30/05/2022.';
      }

      else if (input.indexOf('3') != -1) 
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Seu serviço foi marcado para o dia 30/05/2022.';
      }

      else if (input.indexOf('4') != -1) 
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Seu boleto foi gerado para o dia 30/05/2022.';
      }

      else if (input.indexOf('5') != -1) 
      {
        document.getElementById('resposta').value +='\n'+ user + document.getElementById('pergunta').value +'\n'+ bot + 'Em alguns instantes um de nossos atendentes falará com você';
      }

    else if (input.indexOf('/temp') != -1)
      {
        temperatura();
      }
    else if (input.indexOf('/falas') != -1)
      {
        fala_sozinho();
      }

    else if (input.indexOf('/date') != -1)
      {
        data_atual();
      }

    else if (input.indexOf('/encomenda') != -1) //redireciona
        {
          window.open('https://hix3nn.000webhostapp.com/correios.html')
        }

    else if (input.indexOf('/calc') != -1) //redireciona
          {
            window.open('https://hix3nn.000webhostapp.com/calculadora.html')
          }

    else if (input.indexOf('/clear') !=-1)// apagar
    {
      document.getElementById('resposta').value = null;
    }

    else
      {
        document.getElementById('resposta').value += '\n' + user + document.getElementById('pergunta').value +'\n'+bot+ resp_padrao;
      }

  }

Css code:


body{
 background-color:#596275;
}

h1{
 color: #3dc1d3;
 text-align: center;
 font-family: arial;
 margin-top: 180px;
}

#pergunta{
 background-color:  #303952;
 border-color: #3dc1d3;
 padding-left: 20px;
 padding-right: 10px;
 filter: drop-shadow(10px 10px 10px #303952);
 color:red;
 height:40px;
 width: 476px;
 font-family: arial;
 }


#resposta{
  height: 400px;
  width: 476px;
  background-color:  #303952;
  border-color: #3dc1d3;
  padding-left: 20px;
  padding-right: 10px;
  filter: drop-shadow(10px 10px 10px #303952);
  color: #FFF;
  font-family: arial;
  margin-top: -140px;
}
#mudarcor{
  display: block;
} 
button{
 background-color: #303952;
 color: #3dc1d3;
  border-color: #3dc1d3;
  height: 35px;
  width: 100px;
}

  #pergunta:hover{
 filter: drop-shadow(8px 8px 10px #3dc1d3);
}

button:hover{
 filter: drop-shadow(8px 8px 10px #3dc1d3);
}

I have tried to change the colors by CSS, both in the question id and in the answer id, in the question id only changes the color while the question is in the input after it is sent it adopts the color of the textarea tag, already tried to change by javascript and also only changes the color in the input, after it is sent it adopts the input color, and I tried to change the color of the id reset and it changes all colors of the text within the input leaving both the user text and the bot text in the same color. What would be the logic to do that?

javascript

  • In this case only the CSS solves, just put the texts inside HTML elements with different classes by exeplo: <div class="pergunta">Oi</div><div class="resposta">Olá</div> and in CSS you style as you prefer.

  • How do I do this in the textarea tag? I can’t put different Ivs in the textarea tag

  • I tried several ways but unfortunately unsuccessfully, the way you said it didn’t work or I’m doing wrong, the values sent by the user and the bot response join in the same tag within the JS, even if you change the css when sent the text goes together and with the color of the id that is sent, the id that is sent is the id reply, then you would have to see a way to change the color after sent, some function that does this, I tried to put a function inside that if but did not change the color after sending.. There would have to be some way to change the id question that was sent by the id answered

  • In the textarea it does not even give. The textarea is an element for data entry, not for display. To display use a div for example. And instead of playing the messages in the textarea play in this div.

  • Exactly the textarea receives data, so that using it, a div does not receive data or receives? I tried to enter values in the div the way you said but it doesn’t work, the code is a chat and the values received are sent together to the id of the textarea, automatically all text inside it becomes the color of its id, even if it is changed via css before, after the data is compiled, they acquire the color of the id in question... there would have to be a way to change these values after sending,

  • Edit the question and post the full code, so it’s better to help you.

  • I edited Tiagoa.. D

  • Could you at least give me a light on how to do it? :D

Show 3 more comments

1 answer

0


When you have a textarea, you have a data input element. The textarea acts similar to the input.

To put two different colors in the textarea, you would need to have more than one element inside the textarea which is not possible because its value only accepts plain text, it cannot have other HTML elements inside it.

To do this you must use any other HTML element than input: a div, span, li...

Let’s use the div in your case. Exchange the textarea per div:

<div style="font-size: 20px;" cols="50" rows="200" id="resposta">
Olá me chamo Natália e sou sua assistente virtual, como posso te ajudar? (para os comandos digita /cmd)
</textarea>

On all lines you manipulated the value of the textarea change to innerHTML. I’ll take the first occurrence as an example:

document.getElementById('resposta').innerHTML = user + document.getElementById('pergunta').value + '\n' + bot + rand;

Now in order to be able to switch colors you would have to separate the text blocks into different elements. To this end, it encompasses the value of the question in one element and the answer in another:

document.getElementById('resposta').innerHTML = '<div>' + user + document.getElementById('pergunta').value + '</div><div>' + bot + rand + '</div>';

Assign a class to each and then style in CSS:

document.getElementById('resposta').innerHTML = '<div class="usuario">' + user + document.getElementById('pergunta').value + '</div><div class="bot">' + bot + rand + '</div>';

.bot {
  width: 70%;
  float: right;
  background-color: #3dc1d3;
}
.usuario {
  width: 70%;
  float: left;
  background-color: #596275;
}

  • Thank you very much for your willingness to sit down and review the code and give me an answer. :)

  • No reason, I’m here to help. If my answer has solved your problem, you click next to it to signal that your question has been answered.

  • Yes, you did (Clikei)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.