-
Notifications
You must be signed in to change notification settings - Fork 6
/
jobCards.js
117 lines (108 loc) · 3.24 KB
/
jobCards.js
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
document.addEventListener("DOMContentLoaded", () => {
const jobContainer = document.querySelector(".swiper-wrapper");
const searchInput = document.querySelector(".search-input");
let jobsData = [];
fetch("./data.json")
.then((response) => response.json())
.then((data) => {
jobsData = data;
renderJobs(data);
})
.catch((error) => {
console.error("Error loading JSON data:", error);
});
searchInput.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
const filteredJobs = jobsData.filter((job) =>
job.title.toLowerCase().includes(searchTerm)
);
renderJobs(filteredJobs);
});
function renderJobs(data) {
jobContainer.innerHTML = "";
if (data.length === 0) {
const noResultElement = document.createElement("div");
noResultElement.classList.add(
"how-contribute__job",
"swiper-slide",
"no-result"
);
noResultElement.innerHTML = `
<div class="no-result__text">
<h3>Hopa! Se pare că jobul tău perfect este bine ascuns. Mai încearcă!</h3>
</div>
`;
jobContainer.appendChild(noResultElement);
} else {
data.forEach((job) => {
const jobElement = document.createElement("div");
jobElement.classList.add("how-contribute__job", "swiper-slide");
jobElement.innerHTML = `
<img src="${job.image}" alt="${job.title} Logo" />
<div class="how-contribute__job__text">
<h3>${job.title}</h3>
<a href="details.html?id=${job.id}" class="detail-btn" data-id="${job.id}">Detalii</a>
</div>
`;
jobContainer.appendChild(jobElement);
});
}
initializeSwiper();
}
const swiperConfig = {
default: { slidesPerView: 4, spaceBetween: 20 },
laptop: {
slidesPerView: 3,
spaceBetween: 20,
mediaQuery: deviceSizes.laptop,
},
smallLaptop: {
slidesPerView: 3,
spaceBetween: 20,
mediaQuery: deviceSizes.smallLaptop,
},
tablet: {
slidesPerView: 2,
spaceBetween: 10,
mediaQuery: deviceSizes.tablet,
},
phone: {
slidesPerView: 1,
spaceBetween: 10,
mediaQuery: deviceSizes.phone,
},
};
function getSwiperConfig() {
for (let key in swiperConfig) {
if (
swiperConfig[key].mediaQuery &&
window.matchMedia(swiperConfig[key].mediaQuery).matches
) {
return swiperConfig[key];
}
}
return swiperConfig.default;
}
function initializeSwiper() {
if (swiper) {
swiper.destroy(true, true);
}
const config = getSwiperConfig();
swiper = new Swiper(".how-contribute__jobs", {
slidesPerView: config.slidesPerView,
spaceBetween: config.spaceBetween,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
}
// Reinitialize swiper on window resize
window.addEventListener("resize", initializeSwiper);
// Call the handler to set the initial state
initializeSwiper();
});