Merge pull request #346 from teaxyz/jobs-error-handling

Add a 'no jobs available' if no jobs in breezy.
This commit is contained in:
Thomas Smith 2023-05-04 15:38:40 +02:00 committed by GitHub
commit 77fe6b9dca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>