Como criar uma caixa de comentários simples em uma página da web usando HTML, CSS e JavaScript

Para obter feedback ou qualquer mensagem de um visitante do site, você precisa de uma caixa de comentários em sua página da web. Uma caixa de comentários pode ser criada usando qualquer tecnologia da Web, seja simples HTML, CSS ou até JavaScript. As três ferramentas HTML, CSS e JavaScript são suficientes para criar sites totalmente funcionais.

Vamos explorar como fazer uma caixa de comentários simples com HTML, CSS e JavaScript neste post.

Html

Abra seu editor favorito e digite ou copie o código abaixo do ritmo abaixo. Salve o arquivo com extensão HTML.

Publicar

No código HTML acima, usamos o link tag na etiqueta da cabeça para referenciar o arquivo CSS que usaremos mais adiante. Depois disso, no corpo Tag primeiro, iniciamos uma caixa de entrada onde um usuário pode digitar seu comentário. Então um botão com o nome do publicar é iniciado que será clicado para inserir um comentário. Depois disso, iniciamos uma lista não ordenada (UL) e a deixamos em branco porque adicionaremos um elemento LI do JavaScript nesta tag. Você também pode ver que usamos o eu ia atributo no código acima que será usado para referenciar os elementos correspondentes no código JavaScript. A última tag é a roteiro Tag onde passamos a referência do arquivo JavaScript, que será anexado ao arquivo HTML atual. O nome do arquivo JavaScript é código.JS.

CSS

Crie um arquivo com o nome de estilo.CSS. Deve -se notar que você pode nomear seu arquivo qualquer coisa, mas lembre -se de fazer referência a esse nome na tag de link do arquivo html. Copie e cole o código abaixo no seu arquivo CSS:

corpo
Antecedentes: gradiente linear DodgerBlue (45deg, Aqua, DodgerBlue, Deeppink);

#Comment-Box, #Post
fronteira: nenhuma;
Radio de fronteira: 5px;

#Post: Hover
Background-Color: Deeppink;

No código CSS acima, primeiro, referenciamos o corpo tag de html e decorou o fundo do corpo com cores diferentes. Em seguida, usando o eu ia atributo da caixa de entrada, desaparecemos a borda da caixa de entrada e demos um raio de 5px. O mesmo estilo foi aplicado ao publicar botão. Depois disso, usando o flutuar Propriedade, definimos uma cor de fundo de rosa profunda para o botão de postagem, o que significa que sempre que um usuário pairá sobre o publicar botão, sua cor mudará para rosa profundo.

JavaScript

Crie um arquivo JavaScript com JS extensão, por exemplo código.JS. Deve -se notar que o nome do arquivo deve ser semelhante ao que foi referenciado na etiqueta do script do arquivo html.

No código.JS Arquivo, primeiro, obtemos o elemento de botão HTML usando getElementById () método e passe o nome do ID dado ao botão em HTML. Você também pode ver um ouvinte de evento anexado ao publicar que é basicamente o elemento do botão. Este ouvinte de evento ouvirá continuamente e sempre que um usuário clicar no publicar botão a função dentro do Ouvinte de eventos será executado.

var post = documento.getElementById ("post");
publicar.addEventListener ("clique", function ()
var CommentBoxValue = documento.getElementById ("Comment-box").valor;
var li = documento.createElement ("li");
Var Text = Documento.CreateTextNode (CommentBoxValue);
li.appendChild (texto);
documento.getElementById ("não ordenado").ApndendChild (LI);
);

Caso função do ouvinte, primeiro, estamos obtendo o valor da caixa de entrada e depois disso, criamos um elemento LI. Para definir o texto do elemento Li que usamos CreateTextNode e depois disso usando o AppendChild Método, fornecemos o texto ao elemento LI. Finalmente, usando o AppendChild Método, estamos fornecendo a lista não ordenada do elemento LI que acabamos de criar.

Conclusão

HTML, CSS e JavaScript são os blocos de construção para um desenvolvedor da web e muitos sites são desenvolvidos usando essas três tecnologias.

Nesta postagem, fornecemos o código e a explicação do código sobre como criar uma caixa de comentários usando HTML, CSS e JavaScript. Este projeto será útil quando você estiver fazendo listas de tarefas, comentários em uma página da web ou formulários de feedback, além de anexar o texto a uma página em qualquer projeto da web.