Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Condición y advertencia
La comparación indica si se superó el límite. Usemos ese resultado en un if, que ya conoces: cuando la longitud sea mayor que 142, agregaremos la clase warning al formulario.
if (condición) {
// Acción si la condición es verdadera
}El formulario ya está guardado en commentForm. Los estilos de la clase warning están preparados: resaltan el campo, su etiqueta y el contador. Reemplaza el console.log de diagnóstico por una estructura condicional y conserva la actualización del contador.
Esta es una versión intermedia: la advertencia cambia los estilos, pero todavía no deshabilita el botón ni impide publicar un comentario largo. Vamos a comprobarlo para ver qué necesitamos hacer después. El texto preparado vuelve a tener 141 caracteres.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews! — comentarios</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo"><img src="img/main-logo.svg" width="67" height="29" alt="Logotipo de FlashNews!"></span>
</div>
</header>
<main class="inner-news">
<article class="container">
<h1 class="inner-heading">Caminar puede ser bueno para ti</h1>
<div class="news-full">
<img src="img/walk.jpg" alt="Personas caminando">
<p>Un estudio reveló que las relaciones con nuestros seres queridos influyen más en la felicidad que el sueldo o el número de seguidores. Todavía no se sabe cómo influye la cantidad de gatitos.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¡Una buena razón para salir a caminar y comentar las noticias con amigos!</li>
</ol>
<form action="https://codigoheroe.com/echo" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">Tu comentario</label>
<textarea class="comment-field comment-area" rows="4" placeholder="Comentario" required id="comment-textarea">Para entender a Kant, primero hay que entenderse a uno mismo. A veces llevas felicidad a alguien y acabas entregándole un libro de filosofía.</textarea>
</div>
<span class="text-counter">Caracteres usados: <output class="char-counter" for="comment-textarea">141</output>/<span class="char-limit">142</span></span>
<button class="button submit-button" type="submit">Enviar</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo"><img src="img/white-logo.svg" alt="Logotipo de FlashNews!"></span>
</div>
</footer>
<script src="comments.js"></script>
</body>
</html>
/* Estilos preparados para el campo y el contador */
.comment-area {
height: auto;
resize: vertical;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
padding: 7px 0;
margin-right: auto;
}
/* La clase warning resalta un comentario demasiado largo */
.comment-form.warning .comment-label,
.comment-form.warning .comment-area,
.comment-form.warning .char-counter {
color: #c43d13;
}
.comment-form.warning .comment-area {
outline: 2px solid #c43d13;
}
.comment-form.warning .char-counter {
font-weight: bold;
}
/* El botón deshabilitado se ve más tenue */
.submit-button:disabled {
opacity: 0.35;
cursor: default;
}
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
let charCounter = document.querySelector('.char-counter');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
commentField.oninput = function () {
charCounter.textContent = commentField.value.length;
console.log(commentField.value.length > 142);
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- En
oninput, reemplaza la salida de la comparación por unifcon la misma condición. Dentro, agrega la clasewarningal elementocommentForm. - Haz que el comentario tenga más de
142caracteres. El campo y el contador se resaltarán como advertencia. - Haz clic en «Enviar». El comentario largo aparecerá en la lista: la advertencia todavía no deshabilita el botón.