Skip to content

Commit 3aac166

Browse files
simpaticohrsimpaticohr
authored
Refactor job data structure and rendering logic
1 parent 2bc06bb commit 3aac166

1 file changed

Lines changed: 52 additions & 169 deletions

File tree

‎job/job.html‎

Lines changed: 52 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,55 @@
11

2-
<!doctype html>
3-
<html lang="en">
4-
<head>
5-
<meta charset="utf-8">
6-
<title>Job Details – Simpatico HR Consultancy</title>
7-
<meta name="viewport" content="width=device-width,initial-scale=1">
8-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
9-
<style>
10-
*{box-sizing:border-box;margin:0;padding:0}
11-
body{font-family:'Poppins',sans-serif;background:#f8fafc;color:#0b1220;line-height:1.5}
12-
.wrap{max-width:900px;margin:40px auto;padding:16px}
13-
a{color:#0063b2;text-decoration:none}
14-
header{margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
15-
.card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(15,23,42,0.06)}
16-
.tag-row{margin:10px 0;display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
17-
.tag{padding:4px 8px;border-radius:999px;background:#e5f2ff;color:#0369a1}
18-
.muted{color:#6b7280}
19-
.btn{display:inline-block;margin-top:16px;padding:10px 14px;border-radius:10px;background:#ffcc00;color:#111;font-weight:600}
20-
.btn-outline{display:inline-block;margin-top:16px;margin-left:8px;padding:9px 13px;border-radius:10px;border:1px solid #d1d5db;font-weight:500}
21-
</style>
22-
</head>
23-
<body>
24-
<div class="wrap">
25-
<header>
26-
<div>
27-
<a href="index.html">&larr; Back to Jobs</a>
28-
<h1 style="margin-top:8px;font-size:22px">Job details</h1>
29-
</div>
30-
<div class="muted" style="font-size:13px">Simpatico HR Consultancy</div>
31-
</header>
32-
33-
<div id="jobCard" class="card">
34-
<!-- filled by JS -->
35-
</div>
36-
</div>
37-
382
<script>
39-
// same jobsData IDs as on index.html
40-
const jobsData = [
41-
{
42-
id: 1,
43-
title: 'Backend Developer',
44-
company: 'NovaTech',
45-
location: 'Kochi',
46-
type: 'Full-time',
47-
exp: '2-5 yrs',
48-
salary: '₹8L – ₹14L / year',
49-
desc: 'Work on scalable APIs and microservices in a cloud-native environment.',
50-
responsibilities: [
51-
'Design and develop RESTful APIs',
52-
'Work with relational and NoSQL databases',
53-
'Collaborate with frontend and product teams',
54-
'Write unit/integration tests'
55-
],
56-
requirements: [
57-
'2+ years of backend development experience',
58-
'Experience with Node.js / Java / .NET (any one)',
59-
'Good understanding of SQL and Git',
60-
'Strong problem-solving skills'
61-
]
62-
},
63-
{
64-
id: 2,
65-
title: 'Frontend Engineer',
66-
company: 'Finlytics',
67-
location: 'Bengaluru',
68-
type: 'Full-time',
69-
exp: '1-4 yrs',
70-
salary: '₹6L – ₹12L / year',
71-
desc: 'Develop modern dashboards and web apps using React.',
72-
responsibilities: [
73-
'Implement responsive UI components',
74-
'Work closely with designers and backend team',
75-
'Optimize performance and accessibility',
76-
'Write clean, maintainable code'
77-
],
78-
requirements: [
79-
'1+ year with React or similar framework',
80-
'Good grasp of HTML, CSS, JavaScript',
81-
'Experience with REST APIs',
82-
'Attention to detail in UI/UX'
83-
]
84-
},
85-
{
86-
id: 3,
87-
title: 'Data Analyst',
88-
company: 'MarketIQ',
89-
location: 'Remote',
90-
type: 'Contract',
91-
exp: '2+ yrs',
92-
salary: '₹30K – ₹80K / month (contract)',
93-
desc: 'Analyse business data and build dashboards for stakeholders.',
94-
responsibilities: [
95-
'Build and maintain dashboards',
96-
'Work with SQL and spreadsheets',
97-
'Create ad-hoc reports',
98-
'Communicate insights to business teams'
99-
],
100-
requirements: [
101-
'2+ years of data analysis experience',
102-
'Strong SQL and Excel / Google Sheets',
103-
'Experience with any BI tool (Power BI, Tableau, etc.)',
104-
'Good communication skills'
105-
]
106-
},
107-
{
108-
id: 4,
109-
title: 'HR Operations Intern',
110-
company: 'Simpatico HR Consultancy',
111-
location: 'Perinthalmanna',
112-
type: 'Internship',
113-
exp: '0-1 yrs',
114-
salary: 'Stipend',
115-
desc: 'Support daily HR and recruitment activities at Simpatico.',
116-
responsibilities: [
117-
'Assist in sourcing and screening resumes',
118-
'Coordinate interviews with candidates',
119-
'Maintain candidate database / tracker',
120-
'Support onboarding and documentation'
121-
],
122-
requirements: [
123-
'Graduate / final year student',
124-
'Interest in HR / recruitment',
125-
'Good communication and MS Office skills',
126-
'Ability to multi-task and learn quickly'
127-
]
128-
}
129-
];
130-
131-
// read ?id= from URL
132-
const params = new URLSearchParams(window.location.search);
133-
const idParam = params.get('id');
134-
const jobId = idParam ? parseInt(idParam, 10) : null;
135-
const job = jobsData.find(j => j.id === jobId) || jobsData[0];
136-
137-
const card = document.getElementById('jobCard');
138-
139-
const respList = job.responsibilities.map(li => `<li>${li}</li>`).join('');
140-
const reqList = job.requirements.map(li => `<li>${li}</li>`).join('');
141-
142-
card.innerHTML = `
143-
<h2 style="margin-bottom:4px">${job.title}</h2>
144-
<div class="muted" style="margin-bottom:10px">
145-
${job.company} • ${job.location} • ${job.exp} • ${job.type}
146-
</div>
147-
<div class="tag-row">
148-
<span class="tag">${job.location}</span>
149-
<span class="tag">${job.type}</span>
150-
<span class="tag">${job.exp}</span>
151-
<span class="tag">${job.salary}</span>
152-
</div>
153-
<p class="muted" style="margin-top:10px">${job.desc}</p>
154-
155-
<h3 style="margin-top:18px;font-size:16px">Responsibilities</h3>
156-
<ul class="muted" style="margin-left:18px;margin-top:6px">${respList}</ul>
157-
158-
<h3 style="margin-top:18px;font-size:16px">Requirements</h3>
159-
<ul class="muted" style="margin-left:18px;margin-top:6px">${reqList}</ul>
160-
161-
<a class="btn" href="mailto:simpaticohrconsultancy@gmail.com?subject=Application%20for%20${encodeURIComponent(job.title)}">
162-
Apply via Email
163-
</a>
164-
<a class="btn-outline" href="https://wa.me/919544842260?text=I%20want%20to%20apply%20for%20${encodeURIComponent(job.title)}" target="_blank">
165-
Apply via WhatsApp
166-
</a>
167-
`;
3+
const jobsData = [
4+
{id:1,title:'Backend Developer',company:'NovaTech',location:'Kochi',type:'Full-time',exp:'2-5 yrs',desc:'Scalable APIs.'},
5+
{id:2,title:'Frontend Engineer',company:'Finlytics',location:'Bengaluru',type:'Full-time',exp:'1-4 yrs',desc:'React + TypeScript.'},
6+
{id:3,title:'Data Analyst',company:'MarketIQ',location:'Remote',type:'Contract',exp:'2+ yrs',desc:'SQL, Python.'},
7+
{id:4,title:'HR Intern',company:'Simpatico HR',location:'Perinthalmanna',type:'Internship',exp:'0-1 yrs',desc:'HR operations.'}
8+
];
9+
10+
function escapeHtml(s){
11+
return String(s).replace(/[&<>"']/g, m =>
12+
({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])
13+
);
14+
}
15+
16+
function renderJobs(){
17+
const list = document.getElementById('jobsList');
18+
if(!list) return;
19+
list.innerHTML = '';
20+
21+
jobsData.forEach(job=>{
22+
const div = document.createElement('div');
23+
div.className = 'job';
24+
25+
div.innerHTML = `
26+
<h4>${escapeHtml(job.title)}</h4>
27+
<div class="small-muted">
28+
${escapeHtml(job.company)} • ${escapeHtml(job.location)} •
29+
${escapeHtml(job.exp)} • ${escapeHtml(job.type)}
30+
</div>
31+
<p>${escapeHtml(job.desc)}</p>
32+
33+
<div style="margin-top:8px;display:flex;gap:8px">
34+
<!-- ✅ THIS IS THE FIX -->
35+
<a href="job/job.html?id=${job.id}" class="btn">
36+
View Job
37+
</a>
38+
39+
<button class="btn"
40+
style="background:transparent;border:1px solid #eef2f7;color:#072433"
41+
onclick="saveJob(${job.id})">
42+
Save
43+
</button>
44+
</div>
45+
`;
46+
list.appendChild(div);
47+
});
48+
}
49+
50+
function saveJob(id){
51+
alert('Job saved (demo)');
52+
}
53+
54+
document.addEventListener('DOMContentLoaded', renderJobs);
16855
</script>
169-
</body>
170-
</html>
171-
172-

0 commit comments

Comments
 (0)