Funcionalidad de Filtrado
Objetivo
Por último, pero no menos importante, el paso final es agregar funcionalidad para filtrar los artículos por tema, lo cual se implementará usando JavaScript.
Posible Solicitud
¿Puedes implementar la función de filtrar artículos por tema usando botones HTML y JavaScript?
Resultado
archivo index.html
Añadimos un bloque
navalheaderdonde se colocarán nuestros botones de filtrado;Proporcionamos a cada artículo el atributo
data-categoryy el valor correspondiente al tema;Añadimos el enlace al archivo
index.jsantes de la etiqueta de cierrebody.
archivo index.css
Añadimos algunos estilos para que los botones de filtrado se vean bonitos.
archivo index.js
Pegamos el script que implementa la lógica de filtrado.
Todo esto nos lo dijo ChaGPT. Seguimos sus instrucciones.
index.html
index.css
index.js
999
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
<nav>
<button onclick="filterArticles('all')">All</button>
<button onclick="filterArticles('Environment')">Environment</button>
<button onclick="filterArticles('Health')">Health</button>
</nav>
</header>
<main>
<article data-category="Health">
<h2>Unlocking the Power of Daily Habits for Optimal Health</h2>
<p>
Maintaining optimal health is a multifaceted endeavor, often achieved through the
consistent practice of healthy habits. Nutrition plays a pivotal role in our overall
well-being, serving as the foundation for vitality and disease prevention. Embracing a
balanced diet rich in fruits, vegetables, lean proteins, and whole grains fuels our bodies
with essential nutrients while fortifying our immune systems. Moreover, prioritizing
hydration ensures proper bodily functions and supports cognitive performance. By
integrating mindful eating practices and staying hydrated, individuals can enhance their
energy levels, promote weight management, and reduce the risk of chronic conditions such
as heart disease and diabetes.
</p>
<img
src="https://images.unsplash.com/photo-1477332552946-cfb384aeaf1c?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Unlocking the Power of Daily Habits for Optimal Health"
width="360"
/>
<p>
In addition to nutrition, regular physical activity is paramount for maintaining optimal
health. Engaging in moderate exercise for at least 30 minutes most days of the week offers
a myriad of benefits, including improved cardiovascular health, strengthened muscles and
bones, and enhanced mood. Furthermore, consistent exercise helps manage stress levels and
promotes better sleep quality, crucial components of overall well-being. By incorporating
enjoyable physical activities into daily routines, individuals can cultivate sustainable
habits that contribute to a healthier, more fulfilling life. Through the synergy of
nutritious eating and regular exercise, individuals can unlock the power of daily habits
to optimize their health and vitality.
</p>
<p>Category: <strong>Health</strong></p>
</article>
<article data-category="Environment">
<h2>The Crucial Role of Daily Actions in Environmental Preservation</h2>
<p>
Environmental preservation is a collective responsibility that hinges on the daily actions
of individuals. Simple yet impactful habits can significantly contribute to the health of
our planet. One such practice is reducing waste through mindful consumption and recycling.
By choosing reusable products, minimizing single-use plastics, and properly sorting
recyclables, individuals can decrease the amount of waste that ends up in landfills and
oceans. This, in turn, helps protect wildlife and reduces pollution. Moreover, supporting
sustainable products and practices, such as purchasing locally-sourced and eco-friendly
goods, can further diminish our environmental footprint.
</p>
<img
src="https://images.unsplash.com/photo-1535914254981-b5012eebbd15?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="The Crucial Role of Daily Actions in Environmental Preservation"
width="360"
/>
<p>
Another critical aspect of environmental preservation is energy conservation. Small
changes in our daily routines can lead to substantial energy savings. For instance,
turning off lights when not in use, unplugging electronic devices, and utilizing
energy-efficient appliances can significantly reduce household energy consumption.
Additionally, opting for public transportation, carpooling, or using alternative modes of
transport like cycling or walking can decrease greenhouse gas emissions. These practices
not only help mitigate climate change but also promote cleaner air and healthier
communities. By integrating these environmentally conscious habits into our daily lives,
we can collectively make a significant impact on preserving the planet for future
generations.
</p>
<p>Category: <strong>Environment</strong></p>
</article>
<article data-category="Health">
<h2>The Importance of Mental Health in Overall Well-Being</h2>
<p>
Mental health is an integral component of overall well-being, influencing how we think,
feel, and act in our daily lives. It plays a crucial role in determining how we handle
stress, relate to others, and make choices. Promoting mental health starts with
recognizing and addressing the signs of mental health issues, such as prolonged stress,
anxiety, and depression. Regular mental health check-ins, whether through self-reflection
or professional counseling, can help individuals manage their emotions and maintain a
balanced outlook on life. Prioritizing mental health can lead to improved relationships,
productivity, and a better quality of life.
</p>
<img
src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=2202&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="The Importance of Mental Health in Overall Well-Being"
width="360"
/>
<p>
Incorporating mental health practices into daily routines is essential for sustaining
mental well-being. Techniques such as mindfulness, meditation, and regular physical
activity can reduce stress and enhance mood. Mindfulness encourages present-moment
awareness, helping individuals manage overwhelming thoughts and emotions. Similarly,
meditation promotes relaxation and mental clarity, while physical activity releases
endorphins, which are natural mood lifters. Ensuring adequate sleep, maintaining a healthy
diet, and fostering social connections also contribute to mental resilience. By embedding
these practices into daily life, individuals can support their mental health, leading to a
more balanced and fulfilling life.
</p>
<p>Category: <strong>Health</strong></p>
</article>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* Reset default margin and padding */
body,
h1,
h2,
p,
img {
margin: 0;
padding: 0;
}
/* Apply font and background colors */
body {
font-family: Arial, sans-serif;
background-color: #e2dfd0;
color: #32012f;
}
/* Header styling */
header {
background-color: #524c42;
padding: 20px;
text-align: center;
}
/* Navigation styling */
nav {
text-align: center;
margin: 20px 0;
}
nav button {
background-color: #f97300;
border: none;
color: white;
padding: 10px 20px;
margin: 0 10px;
99
1
2
3
4
5
6
7
8
9
10
11
function filterArticles(category) {
const articles = document.querySelectorAll("main article");
articles.forEach(article => {
if (category === "all" || article.getAttribute("data-category") === category) {
article.style.display = "";
} else {
article.style.display = "none";
}
});
}
Estado del Sitio Web
Tutorial en Video
Aquí tienes. Lo lograste. Este es tu sitio web completo y totalmente funcional. ¡Buen trabajo!
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 4. Capítulo 6
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
