Cómo crear un cuadro de comentarios simple en una página web usando HTML, CSS y JavaScript
Exploraremos cómo hacer un cuadro de comentarios simple con HTML, CSS y JavaScript en esta publicación.
Html
Abra su editor favorito y escriba o copie el código dado a continuación. Guarde el archivo con la extensión HTML.
En el código HTML anterior, utilizamos el enlace Etiqueta en la etiqueta Head para hacer referencia al archivo CSS que usaremos más tarde. Después de esto, en el cuerpo Etiqueta primero, iniciamos un cuadro de entrada donde un usuario puede escribir su comentario. Luego un botón con el nombre del correo se inicia a quien se hará clic para ingresar un comentario. Después de esto, iniciamos una lista desordenada (UL) y la dejamos en blanco porque agregaremos un elemento LI de JavaScript en esta etiqueta. También puedes ver que usamos el identificación Atributo en el código anterior que se utilizará para hacer referencia a los elementos correspondientes en el código JavaScript. La última etiqueta es la guion Etiqueta donde pasamos la referencia del archivo JavaScript que se adjuntará al archivo HTML actual. El nombre del archivo JavaScript es código.js.
CSS
Crear un archivo con el nombre del estilo.CSS. Cabe señalar que puede nombrar su archivo, cualquier cosa que recuerde hacer referencia a ese nombre en la etiqueta del enlace del archivo HTML. Copie y pegue el siguiente código en su archivo CSS:
cuerpoAntecedentes: DodgerBlue Lineal-Gradient (45deg, Aqua, DodgerBlue, DeEppink) fijado;
#comment-box, #post
borde: ninguno;
Border-Radius: 5px;
#post: hover
Color de fondo: Deeppink;
En el código CSS anterior, primero, hicimos referencia al cuerpo Etiqueta de html y decoró el fondo del cuerpo con diferentes colores. Luego usando el identificación Atributo del cuadro de entrada, desaparecimos el borde del cuadro de entrada y le dimos un radio de 5px. El mismo estilo se aplicó al correo botón. Después de esto, usando el flotar Propiedad Establecemos un color de fondo de la pulverización profunda para el botón de publicación, lo que significa que cada vez que un usuario se cierne sobre el correo botón de su color cambiará a rosa profundo.
Javascript
Crear un archivo JavaScript con js Extensión, por ejemplo, código.js. Cabe señalar que el nombre del archivo debe ser similar al que se hizo referencia en la etiqueta de script del archivo HTML.
En el código.js Archivo, primero, obtenemos el elemento del botón HTML usando getElementById () método y pasar el nombre de la identificación dado al botón en HTML. También puede ver a un oyente de eventos adjunto al correo que es básicamente el elemento de botón. Este oyente de eventos escuchará continuamente y cada vez que un usuario haga clic en el correo botón la función dentro del Oyente de eventos será ejecutado.
var post = documento.getElementById ("post");correo.addEventListener ("hacer clic", function ()
var commentboxValue = documento.GetElementById ("Box de comentarios").valor;
var li = documento.createElement ("li");
VAR Text = documento.CreateTextNode (commentboxValue);
li.appendChild (texto);
documento.getElementById ("desordenado").appendchild (li);
);
En la función del oyente del evento, primero, estamos obteniendo el valor del cuadro de entrada y después de eso, creamos un elemento LI. Para establecer el texto del elemento LI que usamos createTextNode y después de eso usando el añadir Niño Método proporcionamos el texto al elemento LI. Por fin, usando el añadir Niño Método Estamos proporcionando la lista desordenada del elemento LI que acabamos de crear.
Conclusión
HTML, CSS y JavaScript son los componentes básicos para un desarrollador web y se desarrollan muchos sitios web utilizando estas tres tecnologías.
En esta publicación, le proporcionamos el código y la explicación del código sobre cómo crear un cuadro de comentarios usando HTML, CSS y JavaScript. Este proyecto será útil cuando esté haciendo listas de tareas pendientes, comentarios en una página web o formularios de comentarios, así como adjuntar texto a una página en cualquier proyecto web.