Skip to content

Commit

Permalink
added job posting page
Browse files Browse the repository at this point in the history
  • Loading branch information
Kiran Biradar committed Aug 12, 2024
1 parent c0b9b82 commit 7307624
Show file tree
Hide file tree
Showing 4 changed files with 322 additions and 0 deletions.
142 changes: 142 additions & 0 deletions public/assets/css/job-posting.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.container {
padding: 20px;
}

.full-width {
width: 100%;
}

.upload-section {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}

.upload-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 3px;
}

.main-content {
min-height: 100vh;
}

.job-card {
display: flex;
justify-content: space-between;
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 20px;
}

.job-info h3 {
margin: 0;
font-size: 18px;
}

.job-info p {
margin: 5px 0;
}

.details-button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 3px;
}

.response-count {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
}

/* Popup Styling */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 400px;
max-width: 90%;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}

.popup-content h3 {
margin: 0 0 20px;
}

.popup-content label {
display: block;
margin: 10px 0 5px;
}

.popup-content input,
.popup-content textarea,
.popup-content select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 3px;
}

.submit-button {
padding: 10px 15px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 3px;
width: 100%;
}

.job-actions {
margin-top: 10px;
}

.edit-button, .delete-button {
margin-right: 10px;
color: blue;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
cursor: pointer;
}

.delete-button{
color: red;
}
89 changes: 89 additions & 0 deletions public/assets/js/job-posting.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
function showPopup() {
document.getElementById('upload-popup').style.display = 'flex';
}

function hidePopup() {
document.getElementById('upload-popup').style.display = 'none';
}

function addJobCard(event) {
event.preventDefault();

// Get form values
const jobTitle = document.getElementById('job-title').value;
const companyName = document.getElementById('company-name').value;
const description = document.getElementById('description').value;
const duration = document.getElementById('duration').value;
const location = document.getElementById('location').value;
const workMode = document.getElementById('work-mode').value;

// Create a new job card
const jobCard = document.createElement('div');
jobCard.classList.add('job-card');

jobCard.innerHTML = `
<div class="job-info">
<h3>${jobTitle}</h3>
<p>${companyName}</p>
<p>Location: ${location}</p>
<p>Work Mode: ${workMode}</p>
<button class="details-button">Details</button>
<div class="job-actions">
<span class="edit-button">Edit</span>
<span class="delete-button">Delete</span>
</div>
</div>
<div class="response-count">
Responses: 0
</div>
`;

// Append the new card to the main content section
const mainContent = document.querySelector('.main-content');
mainContent.appendChild(jobCard);

// Attach event listeners for edit and delete buttons
const editButton = jobCard.querySelector('.edit-button');
const deleteButton = jobCard.querySelector('.delete-button');

editButton.addEventListener('click', () => editJobCard(jobCard));
deleteButton.addEventListener('click', () => deleteJobCard(jobCard));

// Clear the form and hide the popup
document.querySelector('form').reset();
hidePopup();
}

function editJobCard(jobCard) {
// Populate the form with the existing job details
const jobTitle = jobCard.querySelector('.job-info h3').textContent;
const companyName = jobCard.querySelector('.job-info p:nth-of-type(1)').textContent;
const location = jobCard.querySelector('.job-info p:nth-of-type(2)').textContent.replace('Location: ', '');
const workMode = jobCard.querySelector('.job-info p:nth-of-type(3)').textContent.replace('Work Mode: ', '');

document.getElementById('job-title').value = jobTitle;
document.getElementById('company-name').value = companyName;
document.getElementById('description').value = description; // Add this line to populate the description field
document.getElementById('duration').value = duration; // Add this line to populate the duration field
document.getElementById('location').value = location;
document.getElementById('work-mode').value = workMode;

// Remove the old job card and show the popup for editing
jobCard.remove();
showPopup();
}

function deleteJobCard(jobCard) {
// Remove the job card from the main content
jobCard.remove();
}

// Attach event listeners to edit and delete buttons
const editButtons = document.querySelectorAll('.edit-button');
const deleteButtons = document.querySelectorAll('.delete-button');

editButtons.forEach(button => button.addEventListener('click', () => editJobCard(button.parentElement.parentElement.parentElement)));
deleteButtons.forEach(button => button.addEventListener('click', () => deleteJobCard(button.parentElement.parentElement.parentElement)));



74 changes: 74 additions & 0 deletions public/job-posting.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<?php include('../src/templates/header.php'); ?>

<head>
<link rel="stylesheet" href="../public/assets/css/job-posting.css">
</head>
<body>
<!-- Main Content -->
<div class="container">
<!-- Upload Button -->
<div class="upload-section">
<button class="upload-button" onclick="showPopup()">Upload Job Posting</button>
</div>

<!-- Job Posting List -->
<main class="main-content full-width">
<h2>Job Postings</h2>

<!-- Job Card 1 -->
<div class="job-card" id="card_1">
<div class="job-info">
<h3>Job Title</h3>
<p>Company Name</p>
<p>Location: City, State</p>
<p>Work Mode: Remote/On-site</p>
<button class="details-button">Details</button>
<div class="job-actions">
<span class="edit-button">Edit</span>
<span class="delete-button">Delete</span>
</div>
</div>
<div class="response-count">
Responses: 24
</div>
</div>
<!-- Add more job cards as needed -->
</main>
</div>

<!-- Job Upload Popup -->
<div id="upload-popup" class="popup">
<div class="popup-content">
<span class="close-button" onclick="hidePopup()">&times;</span>
<h3>Upload Job Details</h3>
<form id="job-upload-form" onsubmit="addJobCard(event)">
<!-- Form fields... -->
<label for="job-title">Job Title:</label>
<input type="text" id="job-title" name="job-title" required>

<label for="company-name">Company Name:</label>
<input type="text" id="company-name" name="company-name" required>

<label for="description">Job Description:</label>
<textarea id="description" name="description" required></textarea>

<label for="duration">Duration:</label>
<input type="text" id="duration" name="duration" required>

<label for="location">Location:</label>
<input type="text" id="location" name="location" required>

<label for="work-mode">Work Mode:</label>
<select id="work-mode" name="work-mode" required>
<option value="remote">Remote</option>
<option value="on-site">On-site</option>
<option value="hybrid">Hybrid</option>
</select>
<button type="submit" class="submit-button">Upload</button>
</form>
</div>
</div>
<?php include('../src/templates/footer.php'); ?>
<script src="../public/assets/js/job-posting.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions src/templates/job-posting-card2.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="job-card">
<div class="job-info">
<h3>${jobTitle}</h3>
<p>${companyName}</p>
<p>Location: ${location}</p>
<p>Work Mode: ${workMode}</p>
<button class="details-button">Details</button>
</div>
<div class="job-actions">
<span class="edit-button">Edit</span>
<span class="delete-button">Delete</span>
</div>
<div class="response-count">
Responses: 0
</div>
</div>

0 comments on commit 7307624

Please sign in to comment.