Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Mostrar las noticias de la categoría elegida
Logramos ocultar las noticias cuya categoría no coincide con el valor del filtro. Pero hay un problema: si cambiamos el filtro varias veces, desaparecen todas las noticias. ¿Por qué sucede?
Le indicamos a JavaScript cuándo agregar la clase hidden, pero no cuándo quitarla. Cuando cambia el valor del filtro, unas noticias deben ocultarse y otras deben volver a mostrarse. Por ahora, solo las estamos ocultando.
Haremos que vuelvan a aparecer las noticias cuya categoría coincida con el nuevo valor del filtro. Agregaremos la rama else a la estructura condicional: si la condición es falsa, es decir, si la categoría de la noticia es igual al valor del filtro, quitaremos la clase hidden. Después cambiaremos el filtro varias veces para comprobar que el problema se resolvió.
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');
let filter = document.querySelector('.filter');
filter.onchange = function () {
for (let article of articles) {
if (article.dataset.category !== filter.value) {
article.classList.add('hidden');
} // Agrega else 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 8, agrega la rama alternativa
elsey, dentro de ella, quita la clasehiddendel elementoarticle. - En el mininavegador, cambia el filtro primero a «Gatos» y después a «Juegos».
Observa que se muestran las noticias de la categoría elegida. - Cambia el filtro a «Todas las noticias».
Observa que todas las noticias desaparecieron de la página.