ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 07:45:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a 'no jobs available' if not jobs in breezy.

Browse source
This commit is contained in:
Thomas Smith 2023-05-04 14:44:34 +02:00
parent 353ac32766
commit 722cf08c35
1 changed files with 73 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/layouts/page/careers.html
View file

@ -27,74 +27,84 @@
</div> </div>
</section> </section>
<script> <script>
// Fetch data from API // Fetch data from API
fetch("https://tea.breezy.hr/json?verbose=true") fetch("https://tea.breezy.hr/json?verbose=true")
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
// Loop through data and create card for each item // Check if data is empty
data.forEach(item => { if (data.length === 0) {
// Create card element // Display message when no jobs are available
const card = document.createElement("div"); const container = document.getElementById("card-container");
card.classList.add("card", "mb-4"); const noJobsMessage = document.createElement("div");
noJobsMessage.classList.add("alert", "alert-info");
noJobsMessage.textContent = "No jobs available right now";
container.appendChild(noJobsMessage);
} else {
// Loop through data and create card for each item
data.forEach(item => {
// Create card element
const card = document.createElement("div");
card.classList.add("card", "mb-4");
// Create card body element // Create card body element
const cardBody = document.createElement("div"); const cardBody = document.createElement("div");
cardBody.classList.add("card-body", "p-4"); cardBody.classList.add("card-body", "p-4");
// Add name to card body as a link to the URL // Add name to card body as a link to the URL
const title = document.createElement("a"); const title = document.createElement("a");
title.classList.add("card-title", "display-6", "teal"); title.classList.add("card-title", "display-6", "teal");
title.href = item.url; title.href = item.url;
title.textContent = item.name; title.textContent = item.name;
cardBody.appendChild(title); cardBody.appendChild(title);
// Add description to card body // Add description to card body
const description = document.createElement("div"); const description = document.createElement("div");
description.classList.add("card-text","mt-3","mb-5"); description.classList.add("card-text","mt-3","mb-5");
description.innerHTML = item.description.slice(0, 700); description.innerHTML = item.description.slice(0, 700);
cardBody.appendChild(description); cardBody.appendChild(description);
// Add show more link to card body // Add show more link to card body
const showMoreLink = document.createElement("a"); const showMoreLink = document.createElement("a");
showMoreLink.classList.add("me-3", "teal"); showMoreLink.classList.add("me-3", "teal");
showMoreLink.href = "#"; showMoreLink.href = "#";
showMoreLink.textContent = "Show more"; showMoreLink.textContent = "Show more";
showMoreLink.addEventListener("click", event => { showMoreLink.addEventListener("click", event => {
event.preventDefault(); event.preventDefault();
if (description.innerHTML === item.description) { if (description.innerHTML === item.description) {
description.innerHTML = item.description.slice(0, 700); description.innerHTML = item.description.slice(0, 700);
showMoreLink.textContent = "Show more"; showMoreLink.textContent = "Show more";
} else { } else {
description.innerHTML = item.description; description.innerHTML = item.description;
showMoreLink.textContent = "Show less"; showMoreLink.textContent = "Show less";
} }
});
cardBody.appendChild(showMoreLink);
// Add url link to card body
const urlLink = document.createElement("a");
urlLink.classList.add("teal");
urlLink.href = item.url;
urlLink.textContent = "View on BreezyHR";
cardBody.appendChild(urlLink);
// Add card body to card
card.appendChild(cardBody);
// Add card to container
const container = document.getElementById("card-container");
const row = document.createElement("div");
row.classList.add("row");
const col = document.createElement("div");
col.classList.add("col");
col.appendChild(card);
row.appendChild(col);
container.appendChild(row);
}); });
}) cardBody.appendChild(showMoreLink);
.catch(error => console.log(error));
</script> // Add url link to card body
const urlLink = document.createElement("a");
urlLink.classList.add("teal");
urlLink.href = item.url;
urlLink.textContent = "View on BreezyHR";
cardBody.appendChild(urlLink);
// Add card body to card
card.appendChild(cardBody);
// Add card to container
const container = document.getElementById("card-container");
const row = document.createElement("div");
row.classList.add("row");
const col = document.createElement("div");
col.classList.add("col");
col.appendChild(card);
row.appendChild(col);
container.appendChild(row);
});
}
})
.catch(error => console.log(error));
</script>
<style> <style>