`
// Event listener to open popup
jobElement.addEventListener('click', () => {
openPopup(job);
});
return jobElement;
}
function openPopup(job) {
let requirementHTML = typeof job['requirement'] === "string"
? job['requirement'].replace(/\n/g, " ")
: "";
let jd_html = typeof job['jd'] === "string"
? job['jd'].replace(/\n/g, " ")
: "";
// Initialize an empty array for skills
let skillsArray = [];
// Check if the job.skills property exists and is a non-empty string
if (job.skills && job.skills.trim() !== "") {
// Split the string by commas, trim whitespace, and filter out any empty strings
skillsArray = job.skills.split(",")
.map(skill => skill.trim())
.filter(skill => skill.length > 0);
}
// Create the HTML string where each skill is wrapped in a span with a dynamic class
let skill_html = "";
if (skillsArray.length > 0) {
// Map each skill to the desired HTML span and join them into one string
skill_html = skillsArray.map(skill => `${skill}`).join(" ");
} else {
// Handle case of no skills – could be empty or provide a default message if desired
skill_html = "";
}
document.body.style.overflow = 'hidden'
// BEFORE
// overlay.style = 'position: fixed; overflow : auto; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;';
// AFTER
const OFFSET = '12dvh'; // adjust to taste (e.g. '80px', '10vh', etc.)
overlay.style.cssText = `
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
display: grid; /* grid makes it easy to place content */
place-items: start center; /* horizontally center, top-align */
padding: ${OFFSET} 16px 24px; /* <-- the top gap lives here */
overflow: auto; /* page scrolls under the overlay if needed */
`;
// Create popup container
// popup.style = 'background-color: #fff; padding: 20px; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;';
popup.style.width = '100%'
popup.innerHTML = `
`
handleNextButtonClick()
})
// Function to handle the next button click
function handleNextButtonClick() {
currentPage++;
loadJobs(currentPage);
}
// Function to handle the previous button click
function handlePrevButtonClick() {
if (currentPage > 1) {
currentPage--;
loadJobs(currentPage);
}
}
function loadJobs(currentPage) {
jobListCont.innerHTML = `