Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
El operador de igualdad estricta
Encontramos todas las noticias de la página y las resaltamos para facilitar la depuración del código y configurar el filtro. Filtraremos las noticias por categoría. La categoría de cada noticia se indica en su atributo data:
<article class="news-block" data-category="games">
…
</article>El atributo data-category tiene cuatro valores posibles: 'games', 'IT', 'HR' y 'cats'. El filtro tiene esos mismos valores. Cuando el usuario elige una categoría, debemos comparar el valor del atributo de la noticia con el valor seleccionado en el filtro.
Ya sabemos comparar dos números para averiguar cuál es mayor. ¿Y cómo sabemos si dos valores son iguales? Usaremos el operador de igualdad estricta, que se escribe con tres signos de igual:
'a' === 'a'; // Resultado: true
'a' === 'b'; // Resultado: falseEl operador de igualdad estricta compara dos valores sin convertirlos a otro tipo y devuelve true si son iguales, o false si son distintos. Por ejemplo, 5 === '5' devuelve false: uno es un número y el otro, una cadena. Los valores sobre los que actúa un operador se llaman operandos.
Usaremos este operador para crear el filtro del sitio de noticias. Agregaremos una estructura condicional dentro del bucle y compararemos el atributo data-category de cada noticia con uno de los valores posibles del filtro. Así, solo quedarán resaltadas las noticias de una categoría.
JavaScript también tiene un operador de igualdad no estricta: ==. Puedes repasar cómo funciona en la parte sobre comparaciones.
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="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/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/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="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-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');
for (let article of articles) {
// Agrega la estructura condicional aquí
article.classList.add('highlight');
}
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
- Dentro del bucle, en la línea 4, agrega una estructura condicional. Usa como condición
article.dataset.category === 'IT'. - Mueve la instrucción
article.classList.add('highlight');al interior de la estructura condicional.
Observa que solo siguen resaltadas las noticias de la categoría IT. - En la línea 4, reemplaza
'IT'por'cats'.
Observa que ahora se resaltan las noticias de la categoría «Gatos».