Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Recorrer una colección de noticias
¡Miau! Los psicólogos recomiendan limitar el consumo de contenido, así que hoy solo voy a leer noticias sobre juegos. El sitio necesita un filtro.
No vamos a discutir con los psicólogos ni con Cupcake: haremos un filtro de noticias. El equipo de maquetación agregó una lista desplegable, también llamada «select», con las categorías de noticias. Cuando el usuario elija una categoría, solo deben quedar visibles las noticias de esa categoría. Si elige «Todas las noticias», deben mostrarse las de todas las categorías.
Para crear el filtro, necesitamos encontrar todas las noticias de la página y comparar la categoría de cada una con el valor seleccionado. Si coinciden, o si se eligió «Todas las noticias», la noticia debe seguir visible. Si la categoría y el valor del filtro no coinciden, hay que ocultarla.
Este método sirve cuando los valores del filtro y los elementos que queremos filtrar están en el propio código HTML. Recuerda que no hay soluciones universales: todo depende de la situación.
¡Manos a la obra!
Todas las noticias de la página principal tienen la clase news-block. Las buscaremos y guardaremos la colección obtenida en una variable. Para comprobar que las encontramos todas, resaltaremos temporalmente cada elemento de la colección y verificaremos que todas las noticias queden resaltadas.
La clase highlight se encarga de resaltarlas. Usaremos un buclefor of para agregarla a cada elemento de la colección. Más adelante, usaremos esta clase para resaltar las noticias de distintas categorías y facilitar la depuración del código.
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 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
- Usa el método
querySelectorAllpara buscar todos los elementos de la página con la clasenews-blocky guarda la colección obtenida en la variablearticles. - En la siguiente línea, crea un bucle
for ofcon la variablearticlepara recorrer todos los elementos de la colección:for (let article of articles) { }. - Usa el bucle y la variable
articlepara agregar la clasehighlighta cada elemento de la colección.
Observa que todas las noticias tienen ahora un contorno de color intenso.