mirror of
https://github.com/ivabus/www
synced 2024-11-22 13:05:06 +03:00
Merge pull request #346 from teaxyz/jobs-error-handling
Add a 'no jobs available' if no jobs in breezy.
This commit is contained in:
commit
77fe6b9dca
1 changed files with 80 additions and 61 deletions
|
@ -27,75 +27,94 @@
|
||||||
</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");
|
||||||
|
|
||||||
// Create card body element
|
// Insert the custom message
|
||||||
const cardBody = document.createElement("div");
|
noJobsMessage.innerHTML = `
|
||||||
cardBody.classList.add("card-body", "p-4");
|
<div class="p-5" style="border:1px solid #949494; border-radius:5px;">
|
||||||
|
<h2 class="text-center" style="text-transform:none;font-size:28px;line-height:32px;">No open positions, but stay connected!</h2>
|
||||||
|
<p class="text-center mb-4">We encourage you to become a part of our vibrant community on Discord as we're keen to hire from within. Join our Discord server to engage with like-minded people, stay updated about future opportunities, and become a part of our growing group of OSS enthusiasts.</p>
|
||||||
|
<a href="https://discord.gg/tea-906608167901876256">
|
||||||
|
<button class="hbtn hb-fill-right gui-dl-click" style="width:200px;height:40px;display:block;margin-left:auto;margin-right:auto;">Join Discord</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
// Add name to card body as a link to the URL
|
container.appendChild(noJobsMessage);
|
||||||
const title = document.createElement("a");
|
} else {
|
||||||
title.classList.add("card-title", "display-6", "teal");
|
// Loop through data and create card for each item
|
||||||
title.href = item.url;
|
data.forEach(item => {
|
||||||
title.textContent = item.name;
|
// Create card element
|
||||||
cardBody.appendChild(title);
|
const card = document.createElement("div");
|
||||||
|
card.classList.add("card", "mb-4");
|
||||||
|
|
||||||
// Add description to card body
|
// Create card body element
|
||||||
const description = document.createElement("div");
|
const cardBody = document.createElement("div");
|
||||||
description.classList.add("card-text","mt-3","mb-5");
|
cardBody.classList.add("card-body", "p-4");
|
||||||
description.innerHTML = item.description.slice(0, 700);
|
|
||||||
cardBody.appendChild(description);
|
|
||||||
|
|
||||||
// Add show more link to card body
|
// Add name to card body as a link to the URL
|
||||||
const showMoreLink = document.createElement("a");
|
const title = document.createElement("a");
|
||||||
showMoreLink.classList.add("me-3", "teal");
|
title.classList.add("card-title", "display-6", "teal");
|
||||||
showMoreLink.href = "#";
|
title.href = item.url;
|
||||||
showMoreLink.textContent = "Show more";
|
title.textContent = item.name;
|
||||||
showMoreLink.addEventListener("click", event => {
|
cardBody.appendChild(title);
|
||||||
event.preventDefault();
|
|
||||||
if (description.innerHTML === item.description) {
|
|
||||||
description.innerHTML = item.description.slice(0, 700);
|
|
||||||
showMoreLink.textContent = "Show more";
|
|
||||||
} else {
|
|
||||||
description.innerHTML = item.description;
|
|
||||||
showMoreLink.textContent = "Show less";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
cardBody.appendChild(showMoreLink);
|
|
||||||
|
|
||||||
// Add url link to card body
|
// Add description to card body
|
||||||
const urlLink = document.createElement("a");
|
const description = document.createElement("div");
|
||||||
urlLink.classList.add("teal");
|
description.classList.add("card-text","mt-3","mb-5");
|
||||||
urlLink.href = item.url;
|
description.innerHTML = item.description.slice(0, 700);
|
||||||
urlLink.textContent = "View on BreezyHR";
|
cardBody.appendChild(description);
|
||||||
cardBody.appendChild(urlLink);
|
|
||||||
|
|
||||||
// Add card body to card
|
// Add show more link to card body
|
||||||
card.appendChild(cardBody);
|
const showMoreLink = document.createElement("a");
|
||||||
|
showMoreLink.classList.add("me-3", "teal");
|
||||||
// Add card to container
|
showMoreLink.href = "#";
|
||||||
const container = document.getElementById("card-container");
|
showMoreLink.textContent = "Show more";
|
||||||
const row = document.createElement("div");
|
showMoreLink.addEventListener("click", event => {
|
||||||
row.classList.add("row");
|
event.preventDefault();
|
||||||
const col = document.createElement("div");
|
if (description.innerHTML === item.description) {
|
||||||
col.classList.add("col");
|
description.innerHTML = item.description.slice(0, 700);
|
||||||
col.appendChild(card);
|
showMoreLink.textContent = "Show more";
|
||||||
row.appendChild(col);
|
} else {
|
||||||
container.appendChild(row);
|
description.innerHTML = item.description;
|
||||||
|
showMoreLink.textContent = "Show less";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
})
|
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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue