-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (149 loc) · 4.91 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HEllow world</title>
</head>
<body>
<h1>Hello world!! API for sheets</h1>
<!-- scripts include -->
<script type="text/javascript">
window.onload = function () {
try {
var url =
"/.netlify/functions/fetchSheetsData";
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
if (data.length) {
window.populateJobCards(data);
window.toggleView();
} else {
let errorMessage =
"No Job postings currently, Please check again later.";
toggleError(errorMessage);
}
})
.catch((error) => {
console.error("Error:", error);
let errorMessage =
"Oops!, something went wrong while fetching the jobs.";
toggleError(errorMessage);
});
} catch (e) {
console.error(e);
}
};
function populateJobCards(jobData) {
let getJobCard = (job) => `
<!-- job card start -->
<div class="col-lg-4 col-12 ps-0 d-flex mb-lg-0 mb-4 mt-4">
<div class="jobcard timeline-box shadow">
<li class="d-flex flex-column">
<h3 class="text-white">${job["Job Title"]}</h3>
</li>
<li class="d-flex flex-column">
<a href="${job["Company Website"]}" class="talk-link">
<h5 class="text-white">${job["Company Name"]}</h5>
</a>
</li>
<li class="d-flex flex-column">
<p class="yellow-text">
<span>${job["Job Type"]}</span>
•
<span>${job["Job Location"]}</span>
</p>
</li>
<p class="text-white jobCard__description" style="text-align:left;">
${job["Company Description"]}
</p>
<div class="jobcard__links">
<a
href="${job["Job Application Link"]}"
target="_blank"
class="
yellow-text
white-hovertext
text-decoration-none
fw-bold
"
>Apply <i class="fas fa-arrow-circle-right"></i
></a>
<a
href="mailto: ${job["Email Address"]}"
class="
yellow-text
white-hovertext
text-decoration-none
fw-bold
"
>Email <i class="fas fa-envelope"></i
></a>
</div>
</div>
</div>
<!-- job card ends -->
`;
let htmlString = "";
for (let job of jobData) {
if (job["isApproved"] == "TRUE") {
htmlString += getJobCard(job);
}
}
document.querySelector(
".job-cards-container .job-cards-container-row"
).innerHTML = htmlString;
}
function toggleView() {
document.querySelector(".job-cards-container").removeAttribute("hidden");
document
.querySelector(".job-cards-placeholder")
.setAttribute("hidden", "true");
}
function toggleError(errorMessage) {
document.querySelector(".job-loading-error").innerHTML = errorMessage;
document.querySelector(".job-loading-error").removeAttribute("hidden");
document.querySelector(".job-loading").setAttribute("hidden", true);
}
</script>
<!-- schedule section started -->
<section class="schedule-section pb-5 pb-md-0" id="schedule">
<div class="container">
<div class="row">
<div class="col-md-12 text-center pt-md-5">
<h1
class="schedule-head text-white fw-bold pt-5"
data-aos="fade-left"
data-aos-duration="5000"
>
Jobs
</h1>
<!-- job card placeholder -->
<div
class="content pt-5 job-cards-placeholder"
data-aos="zoom-in"
data-aos-once="false"
>
<h4 class="yellow-text">
<span data-aos="zoom-in" class="job-loading">
Loading jobs...
</span>
<span data-aos="zoom-in" class="job-loading-error" hidden></span>
</h4>
</div>
<!-- job card placeholder ends -->
<!-- job card container starts -->
<div class="content pt-5 job-cards-container" hidden>
<!-- rows will come here -->
<div class="row job-cards-container-row"></div>
</div>
<!-- job card container ends -->
</div>
</div>
</div>
</section>
</body>
</html>