Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
El controlador del evento onchange
Ya sabemos agregar una clase solo a las noticias de una categoría. Para ello, comparamos el atributo data de cada noticia con una cadena que escribimos manualmente. Ahora necesitamos compararlo con la categoría que el usuario elija en el filtro. Así, el filtrado será automático.
El filtro de la página principal es una lista desplegable con las categorías de noticias.
El usuario puede elegir una de las categorías disponibles. El valor seleccionado se guarda en la propiedad value de la lista.
// Buscamos la lista desplegable
let select = document.querySelector('select');
// Mostramos su valor en la consola
console.log(select.value);
Necesitamos obtener el valor del filtro cuando el usuario elija una nueva categoría. Para ello, usaremos el controlador del evento onchange, cuyo nombre significa «al cambiar» en inglés. Este controlador se ejecuta cuando el usuario selecciona un nuevo valor en la lista desplegable.
// Agregamos el controlador del evento
select.onchange = function () {
// Mostramos el nuevo valor en la consola
console.log(select.value);
};En el sitio de noticias, el filtro es el elemento con la clase filter. Lo buscaremos, lo guardaremos en una variable y agregaremos el controlador del evento onchange. Después le indicaremos a JavaScript que muestre el valor del filtro en la consola y elegiremos varias categorías de la lista, una tras otra.
Podemos usar el controlador del evento onchange con distintos elementos. Por ejemplo, se ejecuta cuando el usuario cambia el estado de una casilla de verificación o selecciona un botón de opció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">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="visually-hidden">Portal de noticias FlashNews!</h1>
<div class="news-view">
<button class="row-view view-checked" type="button">Lista</button>
<button class="tile-view" type="button">Cuadrícula</button>
<select class="filter" name="news-filter">
<option value="IT">IT</option>
<option value="cats">Gatos</option>
<option value="games">Juegos</option>
<option value="HR">HR</option>
<option value="all" selected>Todas las noticias</option>
</select>
</div>
<section class="news-list">
<h2 class="visually-hidden">Todas las noticias</h2>
<article class="news-block" data-category="cats">
<img src="img/news-cat.jpg" alt="Ojos de un gato">
<div class="news-block-text">
<h3>¡Un video único!</h3>
<p>¡Mira el mundo a través de los ojos de un gato! Tu vida nunca volverá a ser la misma…</p>
<span class="news-tag">#Gatos</span>
<time datetime="2020-03-24">24 mar 2020</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/walk.jpg" alt="Personas paseando">
<div class="news-block-text">
<h3>Salir a pasear puede ser bueno</h3>
<p>O puede que no, si no eliges bien la compañía…</p>
<span class="news-tag">#HR</span>
<time datetime="2020-03-19">19 mar 2020</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/ar.jpg" alt="Persona con lentes de realidad virtual">
<div class="news-block-text">
<h3>Amplía tu realidad</h3>
<p>El equipo de FlashNews! preparó un regalo para sus suscriptores…</p>
<span class="news-tag">#Juegos</span>
<time datetime="2020-02-18">18 feb 2020</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/drone.jpg" alt="Dron pequeño">
<div class="news-block-text">
<h3>Dronvirus</h3>
<p>El equipo de diseño del laboratorio DogDrones.inc aseguró que sus drones no pueden transmitir virus peligrosos…</p>
<span class="news-tag">#IT</span>
<time datetime="2019-12-22">22 dic 2019</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/new-research.jpg" alt="Persona mirando un tablero con tarjetas">
<div class="news-block-text">
<h3>Del mundo de la psicología</h3>
<p>Los estudios demuestran que, si haces más, puedes hacer más.</p>
<span class="news-tag">#HR</span>
<time datetime="2019-10-12">12 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/new-drone.jpg" alt="Cuadricóptero">
<div class="news-block-text">
<h3>Un cuadricóptero no es un lujo</h3>
<p>Pilotear un cuadricóptero ayuda a desarrollar la destreza, el razonamiento espacial y la habilidad para trepar a los árboles…
</p>
<span class="news-tag">#Juegos</span>
<time datetime="2019-11-21">21 nov 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-loop.jpg" alt="Bucles infinitos">
<div class="news-block-text">
<h3>Bucles infinitos: es hora de parar</h3>
<p>Un grupo de científicos británicos descubrió que el funcionamiento del software depende directamente de si contiene bucles infinitos.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-16">16 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/news-robot2.jpg" alt="Robot de vacaciones">
<div class="news-block-text">
<h3>¡Sorpresa! ¡Escándalo! ¡Sensación!</h3>
<p>¡Resulta que no hace falta ser un gato para empezar a programar en JavaScript!</p>
<span class="news-tag">#Gatos</span>
<time datetime="2019-12-22">22 dic 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-graph.jpg" alt="Computadora portátil con gráficos en la pantalla">
<div class="news-block-text">
<h3>Nueva biblioteca para crear gráficos</h3>
<p>Ahora puedes crear un panel de datos en cuestión de segundos.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-14">14 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/new-cat.jpg" alt="Gato sobre una computadora portátil">
<div class="news-block-text">
<h3>¡SORPRESA! Imágenes secretas de un criadero de gatos</h3>
<p>Nadie se imaginaba que adentro pasara ALGO ASÍ…</p>
<span class="news-tag">#Gatos</span>
<time datetime="2019-10-13">13 oct 2019</time>
</div>
</article>
</section>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<button class="up-button" type="button">
↑
<span class="visually-hidden">Volver arriba</span>
</button>
<script src="script.js"></script>
<script src="themes.js"></script>
<script src="up-button.js"></script>
<script src="filter.js"></script>
</body>
</html>
html {
scroll-behavior: smooth;
}
.hidden {
display: none;
}
.subscription-link {
position: relative;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 26px;
margin: auto 4%;
}
.subscription-link::before {
position: absolute;
content: "";
width: 18px;
height: 12px;
top: 9px;
left: 2px;
}
.subscription-link:hover {
padding-bottom: 4px;
border-bottom: 2px solid;
}
.subscription-link:active {
opacity: 0.6;
}
.light-theme .subscription-link {
color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .subscription-link:hover {
border-color: #6653d9;
}
.light-theme .subscription-link::before {
background-image: url("img/letter-light.svg");
}
.dark-theme .subscription-link {
color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .subscription-link:hover {
border-color: #9484f2;
}
.dark-theme .subscription-link::before {
background-image: url("img/letter-dark.svg");
}
.up-button {
position: fixed;
z-index: 1;
padding: 0;
bottom: 75px;
right: 20px;
width: 64px;
height: 64px;
font-size: 36px;
font-weight: bold;
text-align: center;
vertical-align: middle;
border: 5px solid;
border-radius: 50%;
display: none;
cursor: pointer;
}
.light-theme .up-button {
color: #6653d9;
background-color: rgba(255, 255, 255, 0.8);
border-color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .up-button:hover {
color: #473c8d;
background-color: rgba(255, 255, 255, 0.8);
border-color: #473c8d;
}
.dark-theme .up-button {
color: #9484f2;
background-color: rgba(10, 9, 16, 0.6);
border-color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .up-button:hover {
color: #6653d9;
background-color: rgba(10, 9, 16, 0.6);
border-color: #6653d9;
}
.shown {
display: inline-block;
}
/* Estilos del filtro */
.filter {
display: flex;
padding: 7px 22px 7px 12px;
box-sizing: border-box;
margin: 0 0 0 auto;
font-size: inherit;
border: none;
border-radius: 2px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat, repeat;
background-position: right 8px top 50%;
background-size: 8px auto;
}
.filter::-ms-expand {
display: none;
}
.filter:focus {
outline-offset: 0;
}
.light-theme .filter {
color: #ffffff;
background-color: #6653d9;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
.light-theme .filter:hover {
background-color: #473c8d;
}
.light-theme .filter:focus {
outline-color: #b6aaff;
}
.dark-theme .filter {
color: #17161a;
background-color: #9484f2;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2317161a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
.dark-theme .filter:hover {
background-color: #6653d9;
}
.dark-theme .filter:focus {
outline-color: #6653d9;
}
/* Estilos de las etiquetas de noticias */
.news-tag {
padding: 4px 8px;
margin: 0 auto 0 0;
border-radius: 12px;
}
.list-tiles-view .news-tag {
margin-bottom: 4px;
}
.light-theme .news-tag {
color: #aaaaaa;
background-color: #f2f2f2;
}
.dark-theme .news-tag {
color: #888888;
background-color: #0a0910;
}
/* Resaltar las tarjetas de noticias */
.news-block.highlight {
padding-top: 6px;
padding-right: 6px;
padding-bottom: 10px;
padding-left: 6px;
border: 6px solid;
}
.light-theme .news-block.highlight {
border-color: #ff9900;
}
.dark-theme .news-block.highlight {
border-color: #e58a00;
}
.list-tiles-view .highlight img {
width: calc(100% + 12px);
top: -6px;
left: -6px;
height: 140px;
}
let articles = document.querySelectorAll('.news-block');
// Declara la variable aquí
for (let article of articles) {
if (article.dataset.category === 'cats') {
article.classList.add('highlight');
}
}
// Agrega el controlador del evento aquí
let rowViewButton = document.querySelector('.row-view');
let tileViewButton = document.querySelector('.tile-view');
let newsList = document.querySelector('.news-list');
rowViewButton.onclick = function () {
rowViewButton.classList.add('view-checked');
tileViewButton.classList.remove('view-checked');
newsList.classList.remove('list-tiles-view');
};
tileViewButton.onclick = function () {
rowViewButton.classList.remove('view-checked');
tileViewButton.classList.add('view-checked');
newsList.classList.add('list-tiles-view');
};
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 upButton = document.querySelector('.up-button');
window.onscroll = function () {
if (window.pageYOffset > 200) {
upButton.classList.add('shown');
} else {
upButton.classList.remove('shown');
}
};
upButton.onclick = function () {
window.scrollTo(0, 0);
};
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 la línea 2, declara la variable
filtery guarda en ella el elemento con la clasefilter. - Después del bucle, en la línea 10, agrega un controlador del evento
onchangeal elementofilter. - Dentro del controlador del evento
onchange, muestra en la consola la propiedadvaluedel elementofilter. - En el mininavegador, elige primero «Juegos» y después «Todas las noticias» en la lista desplegable.
- Abre la consola. Observa que aparecieron los valores del filtro correspondientes a las categorías elegidas.