It’s Not Impossible
Find work that matters to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtered Employer Listings</title>
<style>
body { font-family: Arial, sans-serif; background-color: #ffffff; color: #333; }
#filter-container { text-align: center; margin-bottom: 20px; }
.filters {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.filter-group {
display: flex;
flex-direction: column;
align-items: center;
}
.button-group {
display: flex;
justify-content: center;
margin-top: 10px;
}
select, input {
width: 200px;
padding: 8px;
font-size: 14px;
}
.company-card {
background-color: #FFF3F0;
border: 1px solid #FF6145;
padding: 15px;
margin: 10px auto;
width: 90%;
max-width: 600px;
text-align: center;
border-radius: 10px;
cursor: pointer;
word-wrap: break-word;
white-space: normal;
overflow-wrap: break-word;
}
.company-card.selected {
background-color: #FF6145;
color: white;
}
.section-title { text-align: center; font-size: 1.8rem; font-weight: bold; margin: 20px 0; color: #000; }
</style>
</head>
<body>
<!-- Filter Section -->
<div id="filter-container">
<div class="filters">
<div class="filter-group">
<h4>Select Your Interests:</h4>
<select id="interestDropdown" multiple></select>
</div>
<div class="filter-group">
<h4>Select Company Size:</h4>
<select id="sizeDropdown"></select>
</div>
<div class="filter-group">
<h4>Search Employers:</h4>
<input type="text" id="chatbotInput" placeholder="e.g., Engineering, Design, Nature" onkeyup="filterAndRecommend()">
</div>
</div>
<div class="button-group">
<button id="showEmployers" onclick="filterAndRecommend()">Show Employers</button>
<button id="clearFilters" onclick="clearFilters()">Clear Filters</button>
</div>
</div>
<!-- Recommended Companies Section -->
<div id="recommendations"></div>
<div class="bottom-buttons">
<button id="similarExperienceBtn" onclick="getSimilarExperience()">Get me work experience at similar organisations</button>
<button id="jobAlertsBtn" onclick="subscribeJobAlerts()">Send me job alerts</button>
<div class="email-subscribe">
<label for="emailInput">📩 Enter your email for updates (Press Enter to submit):</label>
<input type="email" id="emailInput" placeholder="your@email.com">
<p id="emailMessage" class="email-message"></p>
</div>
</div>
<script>
let employerData = [];
let allSystems = [];
let selectedCompanies = new Set();
async function fetchEmployers() {
try {
let url = "https://sweet-wood-3cee.luke-3f7.workers.dev/";
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log("Fetched Data:", data);
employerData = data.records.map(record => ({
name: record.fields["CompanyName"] || "N/A",
description: record.fields["Description"] || "No description available",
systems: record.fields["Systems Names"]
? (Array.isArray(record.fields["Systems Names"])
? record.fields["Systems Names"].map(s => s.toLowerCase().trim())
: [record.fields["Systems Names"].toLowerCase().trim()])
: [],
size: record.fields["Size"]
? (typeof record.fields["Size"] === "object"
? (record.fields["Size"].value ? record.fields["Size"].value.trim().toLowerCase() : "unknown")
: record.fields["Size"].trim().toLowerCase())
: "unknown"
}));
extractSystems();
} catch (error) {
console.error("Error fetching employers:", error);
}
}
(async () => {
await fetchEmployers();
})();
function extractSystems() {
let systemsSet = new Set();
let sizeSet = new Set();
employerData.forEach(emp => {
if (Array.isArray(emp.systems)) {
emp.systems.forEach(system => systemsSet.add(system));
} else if (emp.systems) {
systemsSet.add(emp.systems);
}
sizeSet.add(emp.size);
});
allSystems = Array.from(systemsSet);
populateDropdown();
populateSizeDropdown(sizeSet);
}
function populateDropdown() {
let dropdown = document.getElementById("interestDropdown");
dropdown.innerHTML = "";
allSystems.forEach(system => {
let option = document.createElement("option");
option.value = system;
option.textContent = system;
dropdown.appendChild(option);
});
}
function populateSizeDropdown(sizeSet) {
let sizeDropdown = document.getElementById("sizeDropdown");
sizeDropdown.innerHTML = "<option value=''>All Sizes</option>";
Array.from(sizeSet).forEach(size => {
let option = document.createElement("option");
option.value = size;
option.textContent = size;
sizeDropdown.appendChild(option);
});
}
function filterAndRecommend() {
console.log("🔍 Filtering...");
let selectedOptions = Array.from(document.getElementById("interestDropdown").selectedOptions).map(option => option.value.toLowerCase());
let selectedSize = document.getElementById("sizeDropdown").value.trim().toLowerCase();
let userInput = document.getElementById("chatbotInput").value.toLowerCase();
let recommendations = document.getElementById("recommendations");
recommendations.innerHTML = "<h3 class='section-title'>Select Favourite Employers</h3>";
if (selectedOptions.length === 0) {
selectedOptions = allSystems;
}
let filteredMatches = employerData.filter(emp => {
let empSystems = Array.isArray(emp.systems) ? emp.systems : [emp.systems];
let matchesSystem = selectedOptions.some(selectedSystem => empSystems.includes(selectedSystem));
let matchesSize = (selectedSize === "" || emp.size === selectedSize);
let matchesSearch = emp.name.toLowerCase().includes(userInput) || emp.description.toLowerCase().includes(userInput);
return matchesSystem && matchesSize && matchesSearch;
});
if (filteredMatches.length === 0) {
recommendations.innerHTML += "<p>No matches found. Try another filter!</p>";
} else {
filteredMatches.forEach(emp => {
let card = document.createElement("div");
card.classList.add("company-card");
card.innerHTML = `<strong>${emp.name}</strong><br>${emp.description}<br><em>Systems: ${emp.systems.join(", ")}</em><br><em>Size: ${emp.size}</em>`;
card.onclick = () => toggleCompanySelection(card, emp.name);
recommendations.appendChild(card);
});
}
}
function clearFilters() {
document.getElementById("interestDropdown").selectedIndex = -1;
document.getElementById("sizeDropdown").value = "";
document.getElementById("chatbotInput").value = "";
filterAndRecommend();
}
function toggleCompanySelection(card, companyName) {
card.classList.toggle("selected");
selectedCompanies.has(companyName) ? selectedCompanies.delete(companyName) : selectedCompanies.add(companyName);
}
document.addEventListener("DOMContentLoaded", applyFiltersFromURL);
function toggleButtonSelection(buttonId) {
let button = document.getElementById(buttonId);
button.classList.toggle("selected");
}
// ✅ Update existing functions to use toggle selection
function getSimilarExperience() {
toggleButtonSelection("similarExperienceBtn");
}
function subscribeJobAlerts() {
toggleButtonSelection("jobAlertsBtn");
}
async function applyFiltersFromURL() {
const urlParams = new URLSearchParams(window.location.search);
// Wait for dropdowns to be populated
await new Promise(resolve => setTimeout(resolve, 1000));
const interestParams = urlParams.get("interests"); // Example: "engineering,design"
const sizeParam = urlParams.get("size"); // Example: "medium"
const searchParam = urlParams.get("search"); // Example: "tech"
console.log("Applying URL Filters:", { interestParams, sizeParam, searchParam });
// 🔴 INSERT THIS: Check if dropdown has options before selecting
console.log("Dropdown Options Before Applying Filters:",
Array.from(document.getElementById("interestDropdown").options).map(o => o.value));
// ✅ Select Interests (Systems) Based on URL Params
if (interestParams) {
const interestsArray = interestParams.split(",").map(i => i.toLowerCase().trim());
const dropdown = document.getElementById("interestDropdown");
Array.from(dropdown.options).forEach(option => {
if (interestsArray.includes(option.value.toLowerCase().trim())) {
option.selected = true;
console.log("✅ Selected Interest:", option.value); // Debugging log
}
});
}
// ✅ Select Company Size Based on URL Params
if (sizeParam) {
document.getElementById("sizeDropdown").value = sizeParam.toLowerCase();
}
// ✅ Set Search Input Based on URL Params
if (searchParam) {
document.getElementById("chatbotInput").value = searchParam;
}
// ✅ Apply filters after setting values
filterAndRecommend();
}
window.onload = function () {
applyFiltersFromURL();
};
async function sendSelectedCompaniesToAirtable() {
if (selectedCompanies.size === 0) {
alert("Please select at least one company.");
return;
}
let email = document.getElementById("emailInput").value.trim();
if (!email) {
alert("⚠ Please enter your email before submitting.");
return;
}
let url = "https://sweet-wood-3cee.luke-3f7.workers.dev/"; // Cloudflare Worker URL
const requestBody = {
email: email,
selectedCompanies: Array.from(selectedCompanies),
selectedButtons: Array.from(document.querySelectorAll(".bottom-buttons button.selected"))
.map(button => button.textContent.trim())
};
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const responseData = await response.json();
console.log("✅ Successfully sent to Airtable:", responseData);
alert("✅ Your selected companies have been sent!");
} catch (error) {
console.error("❌ Error sending data:", error);
alert("❌ Failed to send data. Please try again.");
}
}
document.getElementById("emailInput").addEventListener("keypress", async function(event) {
if (event.key === "Enter") {
event.preventDefault(); // Prevent form submission (if inside a form)
let email = this.value.trim();
if (!email) {
document.getElementById("emailMessage").textContent = "⚠ Please enter a valid email.";
return;
}
document.getElementById("emailMessage").textContent = `✅ Thanks! We'll share next steps to your email (${email}).`;
// Call the function to send selected companies to Airtable
await sendSelectedCompaniesToAirtable();
this.value = ""; // Clear input after submission
}
});
</script>
</body>
</html>
<style>
body { font-family: Arial, sans-serif; background-color: #ffffff; color: #333; }
#filter-container { text-align: center; margin-bottom: 20px; }
select, input, button { width: 100%; max-width: 400px; padding: 10px; font-size: 16px; margin: 5px auto; }
.company-card { background-color: #FFF3F0; border: 1px solid #FF6145; padding: 15px; margin: 10px auto; width: 90%; max-width: 600px; text-align: center; border-radius: 10px; cursor: pointer; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; }
.company-card.selected { background-color: #FF6145; color: white; }
.section-title { text-align: center; font-size: 1.8rem; font-weight: bold; margin: 20px 0; color: #000; }
.bottom-buttons {
display: flex;
flex-wrap: wrap; /* ✅ Allows buttons to wrap to the next line */
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.bottom-buttons {
display: flex;
flex-wrap: wrap; /* ✅ Allows buttons to wrap to the next line */
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.bottom-buttons {
display: flex;
flex-wrap: wrap; /* Allows buttons to wrap */
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.bottom-buttons button {
padding: 12px 18px;
font-size: 16px;
border: 2px solid #FF6145; /* ✅ Matches company cards */
background-color: #FFF3F0; /* ✅ Matches company cards */
color: black;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
white-space: normal;
word-wrap: break-word;
width: 100%;
max-width: 300px;
text-align: center;
}
/* ✅ Selected button style (Matches company cards) */
.bottom-buttons button.selected {
background-color: #FF6145 !important;
color: white !important;
}
}
.email-subscribe {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding: 15px;
border: 2px solid #FF6145;
border-radius: 8px;
background-color: #FFF3F0;
width: 90%;
max-width: 400px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.email-subscribe label {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
}
.email-subscribe input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #FF6145;
border-radius: 5px;
text-align: center;
}
.email-message {
font-size: 14px;
color: green;
margin-top: 8px;
}
</style>