Html e JS

01/05/2019

0

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 = '';
}
Leid

Leid

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar