Html e JS

01/05/2019

13

Tenho um chat em html com js e preciso que mude a cor do nome da pessoa;
No meu body tenho um INPUT para a pessoa digitar o seu nome, TEXTAREA para a mensagem e um BUTTON para adicionar a mensagem;

Ex:
1º Preciso atribuir uma cor para Leid.
2º Nenhum outro usuário pode utilizar a mesma cor
3º Toda vez que a Leid inserir uma nova mensagem ela deve estar na cor que foi atribuída a ela.
4º O mesmo deve ser feito para todos.

Leid diz: Oi
Pedro diz: Oie, tudo bom?
Leid diz: Tudo bem e com vc?
Pedro diz: Estou bem
Maria diz: Oiiee

CÓDIGO:


document.addEventListener('DOMContentLoaded', function(){
var conversa = [];

document.getElementById('btAdicionar').addEventListener('click', function(){
adicionarConversa(conversa);
montarChat(conversa);
});
})

function adicionarConversa(conversa){ //Usado para montar a conversa. Ex: Leid diz: Oi

var nome = document.getElementById('nome').value;
var mensagem = document.getElementById('mensagem').value;
conversa.push(nome + ' diz: ' + mensagem); //Push: Adiciona no array
}

function montarChat(conversa){ //Usado para montar o Chat
var html = '';

for(var i = 0; i < conversa.length; i++){
html += "<p>" + conversa[i] + '</p>'; //Tag p: Usado para pular um parágrafo
}

document.getElementById('chat').innerHTML = html;
document.getElementById('nome'). value = '';
document.getElementById('mensagem'). value = '';
}
Responder

Posts

03/05/2019

Jonatan Lima

Tenho um chat em html com js e preciso que mude a cor do nome da pessoa;
No meu body tenho um INPUT para a pessoa digitar o seu nome, TEXTAREA para a mensagem e um BUTTON para adicionar a mensagem;

Ex:
1º Preciso atribuir uma cor para Leid.
2º Nenhum outro usuário pode utilizar a mesma cor
3º Toda vez que a Leid inserir uma nova mensagem ela deve estar na cor que foi atribuída a ela.
4º O mesmo deve ser feito para todos.

Leid diz: Oi
Pedro diz: Oie, tudo bom?
Leid diz: Tudo bem e com vc?
Pedro diz: Estou bem
Maria diz: Oiiee

CÓDIGO:


document.addEventListener('DOMContentLoaded', function(){
var conversa = [];

document.getElementById('btAdicionar').addEventListener('click', function(){
adicionarConversa(conversa);
montarChat(conversa);
});
})

function adicionarConversa(conversa){ //Usado para montar a conversa. Ex: Leid diz: Oi

var nome = document.getElementById('nome').value;
var mensagem = document.getElementById('mensagem').value;
conversa.push(nome + ' diz: ' + mensagem); //Push: Adiciona no array
}

function montarChat(conversa){ //Usado para montar o Chat
var html = '';

for(var i = 0; i < conversa.length; i++){
html += "<p>" + conversa[i] + '</p>'; //Tag p: Usado para pular um parágrafo
}

document.getElementById('chat').innerHTML = html;
document.getElementById('nome'). value = '';
document.getElementById('mensagem'). value = '';
}


Bom dia, pode mandar o html para podemos avaliar melhor?
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira