<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>The most livable country in the world</h1>
<p>Click the filters below to search for country in the world that need find!</p>
</header>
<div id="container">
<h4>Filter by category:</h4>
<!-- List of fiters -->
<ul id="filter-list">
<li data-group="0">All</li>
<li data-group="1">Europe</li>
<li data-group="2">Americas</li>
<li data-group="3">Oceania</li>
</ul>
<!-- Grid that shows all the cards -->
<ul id="card-gallery-wrapper">
<li data-group="1">
<a href="https://www.cahk.org.hk/index.php">
<div class="card">
<img src="https://www.startravel.vn/upload/tintuc/du-lich-the-gioi-tai-sao-thuy-si-la-nuoc-hanh-phuc-nhat-the-gioi-startravel_4_1_2017_10_11_42.jpg" />
<label>Europe</label>
<h3>Switzerland</h3>
</div>
</a>
</li>
<li data-group="2">
<a href="https://impacthk.org/">
<div class="card">
<img src="https://pix10.agoda.net/geo/country/100/3_100_canada_02.jpg?s=1920xg/99.jpg" />
<label>Americas</label>
<h3>Canada</h3>
</div>
</a>
</li>
<li data-group="1">
<a href="https://www.foe.org.hk/Default.aspx">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRh2yAbOPzyPE1ZX5PSNne-UnkspYGiCvnagg&s" />
<label>Europe</label>
<h3>Sweden</h3>
</div>
</a>
</li>
<li data-group="2">
<a href="https://enrichhk.org">
<div class="card">
<img src="https://bridgeblue.com.vn/wp-content/uploads/2019/04/mui-gio-my-viet-nam-2.jpg" />
<label>Americas</label>
<h3>USA</h3>
</div>
</a>
</li>
<li data-group="1">
<a href="https://www.greenhub.hk/eng/index.aspx">
<div class="card">
<img src="https://m.baotuyenquang.com.vn/media/images/2020/02/img_20200208093809.png" />
<label>Europe</label>
<h3>Finland</h3>
</div>
</a>
</li>
<li data-group="3">
<a href="https://www.harmonyhousehk.org/eng">
<div class="card">
<img src="https://cdn.kimkim.com/files/a/images/50f0cfbba3a3e60a60e80fac4df73da3a2ae53dd/original-92774cfc8dd2a3a10af52ef8e67029f2.jpg" />
<label>Oceania</label>
<h3>Australia</h3>
</div>
</a>
</li>
</ul>
</div> <!-- End tag for <div id="gallery-container"> -->
<script src="script.js"></script>
</body>
</html>
@font-face {
font-family: "Nunito";
src: url("/resources/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: "Nunito Bold";
src: url("/resources/fonts/Nunito-Bold.ttf");
}
@font-face {
font-family: "Fjalla One";
src: url("/resources/fonts/FjallaOne-Regular.ttf");
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Nunito", sans-serif;
text-align: center;
background-color: #F5F5F7;
}
header {
width: 100%;
padding: 5% 3% 1%;
color: crimson;
background-color: lightgreen;
background-image: linear-gradient(315deg, thistle 15%, lightgreen 80%);
}
h1 {
padding: 0;
font-size: 70px;
font-family: "Fjalla One", sans-serif;
letter-spacing: 2px;
}
h4 {
font-size: 20px;
margin: 2% 0 4%;
font-family: "Fjalla One", sans-serif;
font-weight: 400;
}
p {
font-size: 20px;
margin: 3% 0;
}
/* <div> that contains the filter and card gallery */
#container {
width: 90%;
padding: 1% 5% 4%;
border-radius: 15px;
margin: 2% auto;
}
/* <ul> element for the list of filter categories */
#filter-list {
list-style-type: none;
padding: 0;
margin-bottom: 4%;
text-align: center;
}
/* list of filter categories */
#filter-list li {
display: inline-block;
margin: 5px;
font-size: 16px;
line-height: 1;
text-transform: uppercase;
color: white;
padding: 10px 30px;
text-align: center;
border-radius: 30px;
cursor: pointer;
transition: 0.2s ease-out;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#filter-list li:hover {
padding: 10px 40px;
}
/* filter for "All" */
#filter-list li:first-child {
background-color: #4275BA;
}
/* filter for first filter category */
#filter-list li:nth-child(2) {
background-color: #00c07f;
}
/* filter for second filter category */
#filter-list li:nth-child(3) {
background-color: #cd5554;
}
/* filter for second filter category */
#filter-list li:nth-child(4) {
background-color: orange;;
}
/* <ul> container for all the cards */
#card-gallery-wrapper {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, auto));
gap: 20px;
}
/* list items to contain each individual card */
#card-gallery-wrapper li {
margin-bottom: 10px;
position: relative;
}
/* class that is added to each card in order to hide them with JS when a filter category is clicked */
.hidden {
display: none;
}
/* filter category listed on the top left of each card */
label {
position: absolute;
top: 10px;
left: 12px;
padding: 6px 8px;
border-radius: 20px;
opacity: 0.97;
font-size: 16px;
color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/* label for the first filter category */
li[data-group="1"] label {
background-color: #00c07f;
}
/* label for the second filter category */
li[data-group="2"] label {
background-color: #be2a2a;
}
li[data-group="3"] label {
background-color: orange;
}
/* card to display each organization */
.card {
margin: 0 auto;
background-color: #ffffff;
border-radius: 7px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
transition: 0.2s ease-out;
}
/* pseudo-class for the hover state of the cards */
.card:hover {
transform: scale(1.02);
cursor: pointer;
}
/* images in each card */
.card img {
width: 100%;
object-fit: cover;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* name of organization on each card */
.card h3 {
text-align: center;
font-size: 14px;
margin: 0;
padding: 5% 4%;
color: #434343;
font-weight: 600;
}
a {
text-decoration: none;
}
/* Media queries for mobile view */
@media (max-width: 768px) {
div.container {
width: 100%;
}
}
@media (max-width: 420px) {
div.container {
width: 100%;
}
h1 {
font-size: 28px;
}
#filter-list li {
font-size: 1.2em;
}
.card h3 {
font-size: 1.5em;
}
}
//store list of categories (the <li> elements)
const categoryList = document.querySelectorAll("#filter-list li");
//store all the gallery cards
const allCards = document.querySelectorAll("#card-gallery-wrapper li");
//function that runs when a filter category is clicked
function onFilterClick(e) {
//get the "data-group" attribute of the clicked card
const categoryNumber = e.target.getAttribute("data-group");
//calls a function once for each card (<li> element) in the allCards array (the card gallery)
allCards.forEach((list) => {
//if the clicked filter has data-group="0", remove ".hidden" class to display all the cards
if (categoryNumber == 0) {
list.classList.remove("hidden");
}
//else statement with nested if and else statements
else {
//if the data-group of the cicked filter does not match the data-group of the cards currently displayed
if (list.getAttribute("data-group") != categoryNumber) {
list.classList.add("hidden");
}
//otherwise display the cards that have a matching data-group
else {
list.classList.remove("hidden");
}
} //closing bracket for outer else statement
}); //closing bracket for the ForEach() function
} //closing bracket for onLastClick() function
//call the onLastClick() function when a filter is clicked
categoryList.forEach((list) => {
list.addEventListener("click", onFilterClick);
});