-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
594 lines (526 loc) · 32.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Global Visa Sponsored Jobs + Relocation Assistance</title>
<meta name="title" content="Global Visa Sponsored Jobs + Relocation Assistance">
<meta name="description"
content="Find international tech jobs with visa sponsorship and relocation assistance. 800+ jobs across 50+ countries. Your global career starts here.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://visajobs.xyz/">
<meta property="og:title" content="Global Visa Sponsored Jobs + Relocation Assistance">
<meta property="og:description"
content="Find international tech jobs with visa sponsorship and relocation assistance. 800+ jobs across 50+ countries. Your global career starts here.">
<meta property="og:image" content="https://visajobs.xyz/static/images/og.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://visajobs.xyz/">
<meta property="twitter:title" content="Global Visa Sponsored Jobs + Relocation Assistance">
<meta property="twitter:description"
content="Find international tech jobs with visa sponsorship and relocation assistance. 800+ jobs across 50+ countries. Your global career starts here.">
<meta property="twitter:image" content="https://visajobs.xyz/static/images/og.png">
<!-- Canonical Link -->
<link rel="canonical" href="https://visajobs.xyz">
<!-- Favicon -->
<!-- Favicon for Browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" href="favicon.ico">
<!-- Favicon for Android -->
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
<!-- Web Manifest -->
<link rel="manifest" href="favicon/site.webmanifest">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "VisaJobs.xyz",
"url": "https://visajobs.xyz",
"description": "Global platform for tech professionals seeking international jobs with visa sponsorship",
"potentialAction": {
"@type": "SearchAction",
"target": "https://visajobs.xyz/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- Performance and Accessibility Optimizations -->
<link rel="preconnect" href="https://cdn.tailwindcss.com">
<link rel="preconnect" href="https://unpkg.com">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E6NMFQFHMZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-E6NMFQFHMZ');
</script>
<script async src="https://tag.clearbitscripts.com/v1/pk_0fab42ef1c1d7893747b55f94d761545/tags.js"
referrerpolicy="strict-origin-when-cross-origin"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7578309605540082"
crossorigin="anonymous"></script>
<!-- Additional SEO Meta Tags -->
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="keywords"
content="visa jobs, tech jobs, international careers, job sponsorship, relocation jobs, global tech employment">
<style>
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
</style>
</head>
<body>
<div class="w-full min-h-screen">
<!-- Header -->
<header class="flex items-center justify-between p-4 border-b">
<a href="/" class="flex items-center gap-2">
<i data-lucide="rocket" class="w-6 h-6 text-blue-500"></i>
<span class="text-xl font-semibold">visajobs.xyz</span>
</a>
<div class="flex items-center gap-4">
<a href="visa-sponsored-jobs/"
class="relative text-blue-500 after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-blue-500 after:transition-all after:duration-300 hover:after:w-full">
Browse Jobs
</a>
<a href="https://airtable.com/shrnUCBHSQR6rsTzT"
class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600">
Post a job
</a>
</div>
</header>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 py-12">
<!-- Hero Section -->
<div class="text-center mb-16">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-snug">
Jobs with
<span class="bg-yellow-200 px-2 inline-block">Visa Sponsorship</span> &
<span class="bg-yellow-200 px-2 inline-block">Relocation Assistance</span>
</h1>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-8">
<div class="flex items-center gap-2">
<i data-lucide="globe" class="w-5 h-5"></i>
<span>50+ Countries</span>
</div>
<div class="flex items-center gap-2">
<i data-lucide="briefcase" class="w-5 h-5"></i>
<span>800+ Jobs</span>
</div>
<div class="flex items-center gap-2">
<i data-lucide="map-pin" class="w-5 h-5"></i>
<span>Visa Sponsorship + Relocation Assistance</span>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border mb-8 max-w-lg mx-auto">
<h1 class="text-2xl font-bold mb-4 text-center">Find Your Dream Job Abroad</h1>
<p class="text-gray-600 text-center mb-6">
Unlock global opportunities with visa sponsorship. Your career journey starts here! 🌍
</p>
<div id="mc_embed_signup">
<form
action="https://aucegypt.us12.list-manage.com/subscribe/post?u=5f1327076a747496c7ce750c7&id=2c4880337f&f_id=005bbde0f0"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
class="subscriber-form validate" target="_blank" novalidate>
<div class="flex flex-col gap-4 items-center">
<input type="email" name="EMAIL" class="required email w-full p-2 border rounded-lg"
id="mce-EMAIL" placeholder="Enter your email..." required aria-required="true">
<button type="submit" id="mc-embedded-subscribe"
class="w-full px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
Sign up for FREE...
</button>
</div>
<div id="mce-responses" class="mt-4 text-center">
<p id="mce-error-response" class="text-red-500" style="display:none"></p>
<p id="mce-success-response" class="text-green-500" style="display:none"></p>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_5f1327076a747496c7ce750c7_2c4880337f" tabindex="-1" value="">
</div>
</form>
</div>
<div class="mt-4 text-center flex gap-2">
<div class="subscriber-social-proof flex ">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block size-10 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
<img class="inline-block size-10 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
<img class="inline-block size-10 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt="">
<img class="inline-block size-10 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
<a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
href="#">+99</a>
</div>
<p class="subscriber-social-proof-text text-gray-600 mx-4 mt-4">Join 30k job seekers...</p>
</div>
<img src="data:image/png;base64,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"
class="subscriber-social-proof-arrow w-12 mx-2 -mt-4" alt="Arrow">
</div>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<script>
(function ($) {
window.fnames = [];
window.ftypes = [];
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
})(jQuery);
var $mcj = jQuery.noConflict(true);
</script>
<!-- Search Filters -->
<div class="bg-white p-6 rounded-lg shadow-sm border mb-8 px-4 max-w-3xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="relative">
<i data-lucide="search"
class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input id="searchInput" type="text" placeholder="Search jobs..."
class="w-full pl-10 pr-4 py-2 border rounded-lg">
</div>
<select id="locationFilter" class="w-full p-2 border rounded-lg">
<option value="">Select Country</option>
<option value="germany">Germany</option>
<option value="france">France</option>
<option value="netherlands">Netherlands</option>
</select>
</div>
</div>
<!-- Job Listings -->
<div id="jobContainer" class="space-y-4 px-4 max-w-3xl mx-auto">
</div>
</main>
<!-- Footer remains the same as in the original document -->
<footer class="bg-gray-50 border-t mt-16 py-12">
<div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="font-semibold mb-4">About Us</h4>
<p class="text-gray-600 text-sm">
We help tech professionals find jobs with visa sponsorship and
relocation support worldwide.
</p>
</div>
<div>
<h4 class="font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2 text-sm">
<li><a href="visa-sponsored-jobs/" class="text-gray-600 hover:text-blue-500">Browse Jobs</a>
</li>
<!-- <li><a href="#" class="text-gray-600 hover:text-blue-500">Companies</a></li> -->
<!-- <li><a href="#" class="text-gray-600 hover:text-blue-500">Visa Guide</a></li> -->
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Follow Us</h4>
<div class="flex gap-4">
<a href="https://www.linkedin.com/company/visasponsoredjobs/?" target="_blank"
class="w-5 h-5 text-gray-600 hover:text-blue-500 cursor-pointer" aria-label="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://t.me/visa_sponsored_jobs" target="_blank"
class="w-5 h-5 text-gray-600 hover:text-blue-500 cursor-pointer" aria-label="Telegram">
<i data-lucide="send"></i>
</a>
</div>
</div>
<div>
<h4 class="font-semibold mb-4">Newsletter</h4>
<div id="mc_embed_signup">
<form
action="https://aucegypt.us12.list-manage.com/subscribe/post?u=5f1327076a747496c7ce750c7&id=2c4880337f&f_id=005bbde0f0"
method="post" id="mc-embedded-subscribe-form-footer"
name="mc-embedded-subscribe-form-footer" class="validate" target="_blank" novalidate>
<div class="relative">
<input type="email" name="EMAIL" id="mce-EMAIL-footer" placeholder="Your email"
class="required email w-full pl-4 pr-32 py-2 border rounded-lg" required>
<button type="submit" id="mc-embedded-subscribe-footer"
class="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
Subscribe
</button>
</div>
<div id="mce-responses-footer" class="mt-2 text-center">
<p id="mce-error-response-footer" class="text-red-500 hidden"></p>
<p id="mce-success-response-footer" class="text-green-500 hidden"></p>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_5f1327076a747496c7ce750c7_2c4880337f" tabindex="-1"
value="">
</div>
</form>
</div>
</div>
<script>
(function ($) {
window.fnames = [];
window.ftypes = [];
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
})(jQuery);
var $mcj = jQuery.noConflict(true);
</script>
</div>
<div class="border-t mt-8 pt-8 text-center text-sm text-gray-600">
© 2024 visajobs™. All rights reserved.
</div>
</div>
</footer>
</div>
<script>
const dataSource = 'db.json'; // Path to your jobs data
let allJobs = []; // Stores all jobs from the data source
let filteredJobs = []; // Stores filtered jobs based on search and filters
// DOM Elements
const jobContainer = document.getElementById('jobContainer');
const searchInput = document.getElementById('searchInput');
const locationFilter = document.getElementById('locationFilter');
// Display a loading spinner for job listings
function showLoadingEffect() {
jobContainer.innerHTML = `
<div class="rounded-lg border border-gray-200 bg-white p-4 sm:p-6 shadow-sm animate-pulse">
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
<div class="h-12 w-12 rounded-lg bg-gray-200"></div>
<div class="flex-1 space-y-3">
<div class="h-5 bg-gray-200 rounded w-3/5"></div>
<div class="flex flex-wrap gap-3">
<div class="h-4 bg-gray-200 rounded w-32"></div>
<div class="h-4 bg-gray-200 rounded w-24"></div>
<div class="h-4 bg-gray-200 rounded w-20"></div>
</div>
<div class="flex flex-wrap gap-2">
<div class="h-5 bg-gray-200 rounded-full w-16"></div>
<div class="h-5 bg-gray-200 rounded-full w-24"></div>
<div class="h-5 bg-gray-200 rounded-full w-20"></div>
</div>
</div>
<div class="flex flex-col items-end gap-2">
<div class="h-4 bg-gray-200 rounded w-24"></div>
<div class="h-4 bg-gray-200 rounded w-20"></div>
</div>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-4 sm:p-6 shadow-sm animate-pulse">
<div class="flex flex-col sm:flex-row sm:items-start gap-4">
<div class="h-12 w-12 rounded-lg bg-gray-200"></div>
<div class="flex-1 space-y-3">
<div class="h-5 bg-gray-200 rounded w-2/3"></div>
<div class="flex flex-wrap gap-3">
<div class="h-4 bg-gray-200 rounded w-28"></div>
<div class="h-4 bg-gray-200 rounded w-32"></div>
<div class="h-4 bg-gray-200 rounded w-24"></div>
</div>
<div class="flex flex-wrap gap-2">
<div class="h-5 bg-gray-200 rounded-full w-20"></div>
<div class="h-5 bg-gray-200 rounded-full w-28"></div>
</div>
</div>
<div class="flex flex-col items-end gap-2">
<div class="h-4 bg-gray-200 rounded w-24"></div>
<div class="h-4 bg-gray-200 rounded w-20"></div>
</div>
</div>
</div>
`;
}
// Populate location dropdown with unique countries
function populateLocationDropdown(jobs) {
const countrySet = new Set();
jobs.forEach(job => {
// Extract country name from location
const country = job.location.split(',').pop().trim();
countrySet.add(country);
});
// Clear existing options and add new ones
locationFilter.innerHTML = '<option value="">Select Country</option>';
countrySet.forEach(country => {
const option = document.createElement('option');
option.value = country.toLowerCase();
option.textContent = country;
locationFilter.appendChild(option);
});
}
// Function to calculate relative time
function timeAgo(dateString) {
const date = new Date(dateString);
const now = new Date();
const seconds = Math.floor((now - date) / 1000);
const intervals = [
{ label: 'year', seconds: 31536000 },
{ label: 'month', seconds: 2592000 },
{ label: 'day', seconds: 86400 },
{ label: 'hour', seconds: 3600 },
{ label: 'minute', seconds: 60 },
];
for (const interval of intervals) {
const count = Math.floor(seconds / interval.seconds);
if (count >= 1) {
return `${count} ${interval.label}${count > 1 ? 's' : ''} ago`;
}
}
return 'Just now';
}
// Function to render jobs
function renderJobs(jobs) {
if (jobs.length === 0) {
jobContainer.innerHTML = '<p class="text-center text-gray-500">No jobs found matching your criteria.</p>';
return;
}
const firstTenJobs = jobs.slice(0, 4);
jobContainer.innerHTML = firstTenJobs.map(job => {
const visaBadge = job.visa ? `<span class="badge bg-green-200 text-green-800 mr-2">${job.visa}</span>` : '';
const relocBadge = job.reloc ? `<span class="badge bg-yellow-200 text-yellow-800">${job.reloc}</span>` : '';
const relativePostDate = timeAgo(job.post_date);
return `
<div class="p-6 border rounded-lg hover:shadow-lg transition-shadow relative group">
<div class="flex items-start gap-4">
<img src="${job.logo}" alt="${job.company}" class="w-12 h-12 rounded-lg" loading="lazy">
<div class="flex-1">
<h3 class="text-lg font-semibold mb-1">${job.position}</h3>
<p class="text-gray-600 mb-2">${job.company}</p>
<div class="flex items-center gap-4 text-sm text-gray-500">
<span class="flex items-center gap-1">
<i data-lucide="map-pin" class="w-4 h-4"></i>
${job.location}
</span>
<span class="flex items-center gap-1">
<i data-lucide="calendar" class="w-4 h-4"></i>
${relativePostDate}
</span>
</div>
<div class="mt-2">
${relocBadge} ${visaBadge} <span class="badge bg-gray-200 text-gray-800">${job.contract}</span>
</div>
</div>
<a href="${job.description}" target="_blank" class="px-4 py-2 bg-blue-500 text-white rounded-lg absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity">
Apply
</a>
</div>
</div>
`;
}).join('');
// Add Telegram link section
const telegramLinkSection = `
<div class="p-6 border rounded-lg text-center bg-blue-50 hover:bg-blue-100 transition-colors">
<h2 class="text-xl font-semibold mb-4">Join Our Telegram Channel</h2>
<p class="text-gray-600 mb-4">Get the latest visa-sponsored jobs delivered directly to your device.</p>
<a href="https://t.me/your_telegram_channel" target="_blank" class="inline-flex items-center px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
<span class="[&>svg]:h-5 [&>svg]:w-5 mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 496 512">
<path
d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z" />
</svg>
</span>
Join Now
</a>
</div>
`;
jobContainer.insertAdjacentHTML('beforeend', telegramLinkSection);
if (jobs.length > 10) {
const browseAllButton = document.createElement('button');
browseAllButton.textContent = 'Browse All Jobs';
browseAllButton.className = 'px-4 py-2 bg-blue-500 text-white rounded-lg mt-4 block mx-auto hover:bg-blue-600';
browseAllButton.addEventListener('click', () => {
// Redirect to jobs/index.html
window.location.href = 'visa-sponsored-jobs/';
});
jobContainer.appendChild(browseAllButton);
}
lucide.createIcons(); // Reinitialize icons after rendering
}
// Function to filter jobs based on search and location
function filterJobs() {
const searchText = searchInput.value.toLowerCase();
const selectedCountry = locationFilter.value;
filteredJobs = allJobs.filter(job => {
const country = job.location.split(',').pop().trim().toLowerCase();
return (
(searchText === '' || job.position.toLowerCase().includes(searchText)) &&
(selectedCountry === '' || country.includes(selectedCountry))
);
});
renderJobs(filteredJobs);
}
// Fetch and load jobs
async function loadJobs() {
try {
showLoadingEffect(); // Show loading spinner
const response = await fetch(dataSource);
if (!response.ok) throw new Error('Failed to fetch jobs');
const jobs = await response.json();
console.log("Fetched jobs:", jobs); // Debug log
allJobs = jobs; // Store all jobs for filtering
filteredJobs = [...jobs]; // Initialize filtered jobs
populateLocationDropdown(jobs); // Populate location dropdown with countries
renderJobs(filteredJobs); // Render jobs
} catch (error) {
console.error('Error loading jobs:', error);
jobContainer.innerHTML = '<p class="text-center text-red-500">Failed to load jobs. Please try again later.</p>';
}
}
// Function to add debounce to other function
function debounce (callback, wait) {
let timeout = null;
return (...args) => {
window.clearTimeout(timeout);
timeout = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
// Wrap filter job function with debouncing
const debouncedFilterJobs = debounce(filterJobs, 500); // wait for 500ms until there's no change, then filter the jobs
// Event listeners for search and filters
searchInput.addEventListener('input', () => {
showLoadingEffect();
debouncedFilterJobs();
});
locationFilter.addEventListener('change', () => {
showLoadingEffect();
debouncedFilterJobs();
});
// Initialize loading spinner CSS
const style = document.createElement('style');
style.innerHTML = `
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
document.head.appendChild(style);
// Load jobs on page load
document.addEventListener('DOMContentLoaded', loadJobs);
// Initialize Lucide icons
lucide.createIcons();
</script>
<!-- 100% privacy-first analytics -->
<script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
</body>
</html>