Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Añadimos un manejador al primer botón
Ya aprendimos a acceder a los elementos de una colección por índice. Ahora usemos eso para que el manejador de clic funcione con el primer botón de la colección tooltipButtons.
El pasante que trabajó en las ayudas antes que nosotros encontró el primer botón y le añadió el manejador solo a él:
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};Ahora solo tenemos que cambiar ese manejador y asignárselo al primer botón de la colección:
tooltipButtons[0].onclick = function () {
tooltip.classList.add('opened');
};Después de eso, la variable independiente tooltipButton ya no hace falta. Vamos a eliminarla y a comprobar que el popup se abre al hacer clic en el primer botón.
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">Dronovirus</h1>
<div class="news-full">
<img src="img/drone.jpg" alt="Dron pequeño">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">44</span></button>
<time datetime="2019-12-22">22 de diciembre de 2019</time>
</div>
<p>Los diseñadores del laboratorio <button class="tooltip-button" type="button" data-tooltip-text="un laboratorio bastante mediocre">DogDrones.inc</button> aseguraron que sus drones no pueden transmitir virus peligrosos porque no están programados para eso. <button class="tooltip-button" type="button" data-tooltip-text="aunque eso no está del todo claro; nota del abogado">Tal vez</button>, la verdadera razón es que los drones del laboratorio no pueden transportar absolutamente nada.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¿Y qué opinan de los drones de Keksoflot? No es publicidad.</li>
<li class="user-comment">Yo mismo soy un dron, créanme, no todo es tan simple.</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 tooltipButton = document.querySelector('.tooltip-button');
let closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
console.log(tooltipButtons[0]);
console.log(tooltipButtons[1]);
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
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