diff --git a/assets/js/main.js b/assets/js/main.js index 90df002..bd4a636 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -53,4 +53,76 @@ document.addEventListener('DOMContentLoaded', function () { } }); } + + // 3. Toggle for the new job search form + const toggleBtn = document.getElementById('toggle-search-form'); + const searchForm = document.getElementById('job-search-form'); + + if (toggleBtn && searchForm) { + toggleBtn.addEventListener('click', function() { + if (searchForm.style.display === 'none') { + searchForm.style.display = 'block'; + } else { + searchForm.style.display = 'none'; + } + }); + } + + // 4. Handle search form submission + const searchFormElement = document.getElementById('job-search-form'); + if (searchFormElement) { + searchFormElement.addEventListener('submit', function(event) { + event.preventDefault(); + + const titleQuery = this.querySelector('input[placeholder="Job title"]').value.toLowerCase().trim(); + const locationQuery = this.querySelector('input[placeholder="Location"]').value.toLowerCase().trim(); + const typeQuery = this.querySelector('select').value; + + const allJobCards = document.querySelectorAll('.job-card'); + const noResults = document.getElementById('no-results'); + let matches = 0; + + allJobCards.forEach(function(card) { + const title = card.querySelector('h5').textContent.toLowerCase(); + const location = card.querySelector('p').textContent.toLowerCase(); + const type = card.querySelector('.badge').textContent; + + const titleMatch = title.includes(titleQuery); + const locationMatch = location.includes(locationQuery); + const typeMatch = (typeQuery === 'All') || (typeQuery.toLowerCase() === type.toLowerCase()); + + if (titleMatch && locationMatch && typeMatch) { + card.parentElement.style.display = ''; + matches++; + } else { + card.parentElement.style.display = 'none'; + } + }); + + if (matches === 0) { + noResults.style.display = 'block'; + } else { + noResults.style.display = 'none'; + } + }); + } + + // 5. Handle search reset + const resetBtn = document.getElementById('reset-search'); + if (resetBtn) { + resetBtn.addEventListener('click', function() { + const searchFormElement = document.getElementById('job-search-form'); + searchFormElement.querySelector('input[placeholder="Job title"]').value = ''; + searchFormElement.querySelector('input[placeholder="Location"]').value = ''; + searchFormElement.querySelector('select').selectedIndex = 0; + + const allJobCards = document.querySelectorAll('.job-card'); + allJobCards.forEach(function(card) { + card.parentElement.style.display = ''; + }); + + const noResults = document.getElementById('no-results'); + noResults.style.display = 'none'; + }); + } }); diff --git a/careers.php b/careers.php index 62cf9fb..a9584ac 100644 --- a/careers.php +++ b/careers.php @@ -9,21 +9,21 @@ header("Expires: 0"); $jobs = [ [ 'id' => 1, - 'title' => 'Senior Frontend Developer – Space Data Platform', + 'title' => 'Senior Frontend Developer – Space Data Platform Engineering', 'department' => 'Engineering', 'location' => 'Remote', 'type' => 'Full-time' ], [ 'id' => 2, - 'title' => 'Product Manager – Orbital Systems & Services', + 'title' => 'Product Manager – Orbital Systems & Services Product', 'department' => 'Product', 'location' => 'New York, NY', 'type' => 'Full-time' ], [ 'id' => 3, - 'title' => 'UI/UX Designer – Mission-Control Interfaces', + 'title' => 'UI/UX Designer – Mission-Control Interfaces Design', 'department' => 'Design', 'location' => 'Remote', 'type' => 'Contract' @@ -35,7 +35,7 @@ $jobs = [ - Careers - HR Platform + Careers - CosmicHire @@ -49,7 +49,7 @@ $jobs = [