<!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">Salí a caminar, vi a mis amigos y lo entendí: las buenas noticias empiezan con las cosas sencillas.</textarea>
</div>
<span class="text-counter">Caracteres usados: <output class="char-counter" for="comment-textarea">99</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');
let submitButton = document.querySelector('.submit-button');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
charCounter.textContent = 0;
commentList.append(newComment);
};
commentField.oninput = function () {
charCounter.textContent = commentField.value.length;
if (commentField.value.length > 142) {
commentForm.classList.add('warning');
submitButton.disabled = true;
} else {
commentForm.classList.remove('warning');
submitButton.disabled = false;
}
};