Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelWoodc authored Jul 19, 2024
0 parents commit 43e797e
Show file tree
Hide file tree
Showing 9 changed files with 12,704 additions and 0 deletions.
99 changes: 99 additions & 0 deletions app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
body {
font-family: 'Arial', sans-serif;
background-color: #111d4a; /* Dark background for the entire page */
color: #f4f4f4; /* Light text color for better readability */
margin: 0;
padding: 0;
}

* {
box-sizing: border-box;
}

h1 {
color: #f4f4f4; /* Light color for the main heading */
margin-bottom: 30px;
font-size: 2.5em;
}

.container {
padding: 40px;
margin: 0 auto;
max-width: 1000px;
text-align: center;
background-color: #1f2a48; /* Slightly lighter background for the container */
border-radius: 8px; /* Rounded corners for the container */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

#jobslist {
padding-inline-start: 0;
list-style-type: none; /* Remove bullets from list items */
}

.job-section {
background-color: #2a3b5a; /* Darker background for each job section */
border-radius: 8px;
padding: 20px;
margin-bottom: 20px; /* Space between job sections */
}

.main-category {
color: #ff9900; /* Bright color for the main category */
font-size: 2em;
margin-bottom: 20px;
}

.job-title {
color: #00aaff; /* Bright blue for job titles */
font-size: 1.5em;
margin-bottom: 10px;
}

.link {
display: flex;
align-items: center;
margin-bottom: 10px; /* Add spacing between items */
background-color: #1e2a45; /* Slightly different background for links */
border-radius: 4px;
padding: 10px;
}

.category {
margin-right: 15px; /* Space between category and URL */
font-weight: bold;
color: #ffcc00; /* Yellow color for the category */
}

.link a {
color: #00aaff; /* Link color */
text-decoration: none; /* Remove underline from links */
}

.link a:hover {
text-decoration: underline; /* Underline on hover for better UX */
}

#searchBar {
width: 100%;
height: 40px; /* Increased height for better usability */
border-radius: 4px;
border: 1px solid #444; /* Darker border for better contrast */
padding: 10px;
font-size: 14px; /* Slightly larger font size */
background-color: #222; /* Darker background for the search bar */
color: #f4f4f4; /* Light text color for input */
}

#searchWrapper {
position: relative;
margin-bottom: 20px;
}

#searchWrapper::after {
content: '🔍';
position: absolute;
top: 10px;
right: 15px;
color: #f4f4f4; /* Light color for the search icon */
}
83 changes: 83 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
const jobslist = document.getElementById('jobslist');
const searchBar = document.getElementById('searchBar');
let jobData = [];

searchBar.addEventListener('keyup', (e) => {
const searchString = e.target.value.toLowerCase();

// Filter jobs based on search string
const filteredJobs = jobData.flatMap(category => {
return Object.entries(category.jobs)
.filter(([jobTitle, job]) => {
// Check if job title matches search string
const jobTitleMatch = jobTitle.toLowerCase().includes(searchString);

// Check if any link's category or URL matches search string
const linksMatch = job.links.some(link =>
link.url.toLowerCase().includes(searchString) ||
link.category.toLowerCase().includes(searchString)
);

return jobTitleMatch || linksMatch;
})
.map(([jobTitle, job]) => ({
main_category: category.main_category,
jobTitle,
job
}));
});

displayJobs(filteredJobs);
});

const loadJobs = async () => {
try {
const res = await fetch('jobs.json'); // Adjust the path if necessary
jobData = await res.json(); // Load all categories and jobs
displayJobs(jobData.flatMap(category => {
return Object.entries(category.jobs).map(([jobTitle, job]) => ({
main_category: category.main_category,
jobTitle,
job
}));
}));
} catch (err) {
console.error(err);
}
};

const displayJobs = (jobs) => {
let lastCategory = '';

const htmlString = jobs
.map(({ main_category, jobTitle, job }) => {
// Check if the main category has changed
const isNewCategory = main_category !== lastCategory;
lastCategory = main_category;

const linksHtml = job.links
.map(link => `
<li class="link">
<span class="category">${link.category}</span>
<a href="${link.url}" target="_blank">${link.url}</a>
</li>
`)
.join('');

return `
${isNewCategory ? `<h2 class="main-category">${main_category}</h2>` : ''}
<div class="job-section">
<h3 class="job-title">${jobTitle}</h3>
<ul class="links-list">
${linksHtml}
</ul>
</div>
`;
})
.join('');

jobslist.innerHTML = htmlString;
};

// Load jobs data when the page is ready
document.addEventListener('DOMContentLoaded', loadJobs);
Binary file added careers.docx
Binary file not shown.
26 changes: 26 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<h1>&#x2728; Job Links &#x2728;</h1>
<div id="searchWrapper">
<input
type="text"
name="searchBar"
id="searchBar"
placeholder="Search for a link"
/>
</div>
<h1 id="mainCategory"></h1> <!-- Added element for the main category -->
<ul id="jobslist"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Loading

0 comments on commit 43e797e

Please sign in to comment.