Cómo crear una caja de comentarios simple en una página web usando HTML, CSS y JavaScript

Comentarios, opiniones, preguntas y respuestas son una parte integral de cualquier sitio web interactivo. En este tutorial, aprenderás cómo crear una caja de comentarios simple en una página web utilizando HTML, CSS y JavaScript. Con este proyecto, los visitantes podrán agregar comentarios y ver los comentarios de otros usuarios. Este tutorial es adecuado para principiantes que tienen un conocimiento básico de HTML, CSS y JavaScript.

Requisitos previos

Antes de comenzar, asegúrate de tener un editor de texto en tu computadora y de tener conocimientos básicos de HTML, CSS y JavaScript. También necesitarás un navegador web para ver y ejecutar la página web.

Crea la estructura básica de la página web

Para comenzar a crear la caja de comentarios, primero debemos crear la estructura básica de la página web. Utilizaremos HTML para esto. Copia y pega el siguiente código en tu editor de texto y guárdalo con el nombre "index.html":









Este código crea la estructura básica de una página web, que incluye una sección de encabezado, una sección principal (que es donde añadiremos la caja de comentarios) y una sección de pie de página. También incluye un vínculo a nuestro archivo CSS y a nuestro archivo de JavaScript.

Crea la caja de comentarios en HTML

Ahora que tenemos la estructura básica de nuestra página web, crearemos la caja de comentarios utilizando HTML. Añade el siguiente código debajo de la etiqueta

Comentarios:

:

Este código crea una sección con un formulario que permite a los usuarios agregar comentarios. El formulario incluye campos para el nombre del usuario y el comentario del usuario, y un botón para enviar el comentario. También hay una sección debajo del formulario que muestra todos los comentarios que han sido agregados.

Agrega estilo con CSS

Ahora que hemos creado la caja de comentarios en HTML, utilizaremos CSS para darle estilo. Añade el siguiente código en un archivo "style.css":


#comment-box {
background-color: #eee;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
}
form label, form input, form textarea {
display: block;
margin-bottom: 10px;
}
form input, form textarea {
padding: 5px;
border: none;
border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
form button {
background-color: #428bca;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
form button:hover {
background-color: #3071a9;
}
#comment-list li {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
#comment-list h3 {
margin-top: 0;
}


Este código da estilo a nuestra caja de comentarios. Agrega un fondo gris claro, un borde redondeado, un pequeño espacio en la parte superior y un espacio entre los elementos del formulario. Da estilo al botón y agrega una línea que separa los comentarios. También elimina el margen superior del elemento

.

Agrega interacción con JavaScript

Por último, añadiremos interacción a nuestra caja de comentarios utilizando JavaScript. Añade el siguiente código en un archivo "script.js":


var commentForm = document.querySelector("#comment-box form");
var nameInput = document.querySelector("#comment-box input[name='name']");
var commentInput = document.querySelector("#comment-box textarea");
var commentList = document.querySelector("#comment-list ul");

commentForm.addEventListener("submit", function(e) {
e.preventDefault();
if (nameInput.value !== "" && commentInput.value !== "") {
var newComment = document.createElement("li");
var commentTitle = document.createElement("h3");
var commentText = document.createElement("p");
commentTitle.innerText = nameInput.value;
commentText.innerText = commentInput.value;
newComment.appendChild(commentTitle);
newComment.appendChild(commentText);
commentList.appendChild(newComment);
nameInput.value = "";
commentInput.value = "";
}
});


Este código agrega interacción a nuestro formulario de comentarios. Cuando el usuario presiona el botón "Enviar comentario", JavaScript crea un nuevo elemento de lista