Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
El bucle for of
Conectamos el script a otra noticia y allí ya había cuatro botones. Pero solo funcionaron los dos primeros, porque solo a ellos les añadimos manejadores. Para no copiar el mismo código una y otra vez, vamos a usar un bucle.
Un bucle permite ejecutar el mismo código varias veces. Para nuestra tarea sirve el bucle for of:
for (variable of colección) {
// Código que hay que ejecutar varias veces
}El bucle for of ejecutará el código entre llaves tantas veces como elementos haya en la colección. Cada repetición se llama iteración.
Dentro de los paréntesis indicamos la variable del bucle. En cada iteración, JavaScript le asigna por sí solo el siguiente elemento de la colección.
Veamos un ejemplo:
let elements = document.querySelectorAll('p'); // Encontramos todos los párrafos
for (let element of elements) { // Creamos el bucle y su variable
console.log(element); // Mostramos los elementos en la consola
}Si en la colección elements hay dos elementos, el bucle funcionará así:
// Primera iteración:
// En la variable se guarda automáticamente el primer elemento de la colección
element = elements[0];
// Se ejecuta el código del bucle
console.log(element);
// Segunda iteración:
// En la variable se guarda automáticamente el segundo elemento de la colección
element = elements[1];
// El código del bucle se ejecuta otra vez
console.log(element);Cuando se terminen los elementos de la colección, el bucle acabará. Gracias a eso, no necesitamos saber de antemano cuántos botones hay ni copiar los manejadores a mano.
Veamos cómo funciona: vamos a crear un bucle y a pedirle a JavaScript que muestre en la consola todos los elementos de la colección tooltipButtons.
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!</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 del portal FlashNews!">
</span>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Cerrar</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Amplia tu realidad</h1>
<div class="news-full">
<img src="img/ar.jpg" alt="Persona con gafas de realidad virtual">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">230</span></button>
<time datetime="2020-02-18">18 de febrero de 2020</time>
</div>
<p>La redacción de FlashNews! preparó un regalo para sus suscriptores: la aplicación de <button class="tooltip-button" type="button" data-tooltip-text="es como tener a Pokémon en la sala de tu casa">realidad aumentada</button>, con la que podrán acariciar a <button class="tooltip-button" type="button" data-tooltip-text="algo a medio camino entre un cerdo y un jerbo">un cerdo hormiguero</button>, cultivar <button class="tooltip-button" type="button" data-tooltip-text="ni yo lo sé; pregúntale a Google">una pitahaya</button> o hablar con <button class="tooltip-button" type="button" data-tooltip-text="disponible solo para quienes tienen una suscripción anual">Cupcake</button>.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¡Lo quiero!</li>
<li class="user-comment">Lo probé: ¡está increíble!</li>
</ol>
<form action="https://codigoheroe.com/courses" 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="3" placeholder="Comentario" required id="comment-textarea"></textarea>
</div>
<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 del portal FlashNews!">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Estilos del texto del botón */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Estilos del tooltip */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Estilos del bloque de entrada de comentarios */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Temas de color */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
let tooltipText = document.querySelector('.tooltip-text');
tooltipButtons[0].onclick = function () {
tooltipText.textContent = tooltipButtons[0].dataset.tooltipText;
tooltip.classList.add('opened');
};
tooltipButtons[1].onclick = function () {
tooltipText.textContent = tooltipButtons[1].dataset.tooltipText;
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
// Agrega aquí el bucle
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
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);
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
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