Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Operador >: detectar si se supera el límite
El contador funciona. ¿Cómo sabemos si el comentario es demasiado largo? El operador > compara dos valores. El resultado es true si el valor de la izquierda es mayor que el de la derecha y false en los demás casos:
console.log(7 > 6); // true
console.log(6 > 6); // false
console.log(5 > 6); // falseNecesitamos saber si la longitud supera 142. Un comentario de exactamente 142 caracteres está permitido. Primero mostremos el resultado de la comparación en la consola, sin cambiar los estilos ni agregar una estructura condicional todavía.
Para que no tengas que escribir un comentario largo, preparamos un texto de 141 caracteres en el campo. El contador inicial también marca 141. Agrega caracteres al final para comprobar el límite con facilidad.
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;
// Muestra aquí el resultado de la comparación.
};
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
- Dentro de
oninput, después de actualizar el contador, muestra en la consola el resultado de la comparacióncommentField.value.length > 142. - Modifica el comentario para que tenga más de
142caracteres. - Abre la consola del mininavegador. Al superar el límite, el resultado de la comparación es
true.