From bc596fd7cba7321402abc21fd7d95d3e9f551383 Mon Sep 17 00:00:00 2001
From: "testbot-codemonk[bot]"
 <161732285+testbot-codemonk[bot]@users.noreply.github.com>
Date: Fri, 10 May 2024 04:31:14 +0000
Subject: [PATCH] Update files in Styling-jobListing-25

---
 public/js/interactivity.js | 20 ++++++++++++++--
 styles/main.css            | 49 +++++++++++++++++++++++++++++---------
 views/jobListing.ejs       | 48 +++++++++++++++++++++++++++----------
 3 files changed, 91 insertions(+), 26 deletions(-)

diff --git a/public/js/interactivity.js b/public/js/interactivity.js
index 2dff633..b734fa5 100644
--- a/public/js/interactivity.js
+++ b/public/js/interactivity.js
@@ -17,7 +17,7 @@ document.addEventListener('DOMContentLoaded', function() {
     updateProfile({ name, email, bio, jobsAppliedFor });
   });
 
-  document.getElementById('applyJobForm').addEventListener('submit', function(e) {
+  document.getElementById('newApplyJobForm').addEventListener('submit', function(e) {
     e.preventDefault();
     const formData = new FormData(this);
     const skillsRequired = formData
@@ -39,8 +39,24 @@ document.addEventListener('DOMContentLoaded', function() {
     e.preventDefault();
     window.location.href = '/jobpost';
   });
+
+  document.querySelector('.jobFilterDropdown').addEventListener('change', function(e) {
+    const filterValue = e.target.value;
+    filterJobs(filterValue);
+  });
 });
 
+function filterJobs(filterValue) {
+  const allJobs = document.querySelectorAll('.jobListing');
+  allJobs.forEach(job => {
+    if (job.dataset.jobDomain === filterValue || filterValue === 'all') {
+      job.style.display = '';
+    } else {
+      job.style.display = 'none';
+    }
+  });
+}
+
 const express = require('express');
 const router = express.Router();
 const Job = require('../models/Job');
@@ -137,4 +153,4 @@ function submitJobPosting(jobData) {
 function validateEmail(email) {
   const re = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(email);
-}
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 1048525..b6fd08c 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,3 +1,16 @@
+:root {
+    --primary-color: #007fff;
+    --primary-color-hover: #0056b9;
+    --background-color: #f0f2f5;
+    --text-color: #333;
+    --button-background-color: #007fff;
+    --button-background-color-hover: #0056b9;
+    --button-text-color: #ffffff;
+    --font-family: 'Arial', sans-serif;
+    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    --box-shadow-strong: 0 0 12px rgba(0, 0, 0, 0.1);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -5,9 +18,9 @@
 }
 
 body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f0f2f5;
-    color: #333;
+    font-family: var(--font-family);
+    background-color: var(--background-color);
+    color: var(--text-color);
     line-height: 1.6;
     position: relative;
 }
@@ -33,7 +46,7 @@ form {
     background: #ffffff;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--box-shadow);
     margin-top: 20px;
 }
 
@@ -56,8 +69,8 @@ textarea {
 
 button {
     display: inline-block;
-    background: #007fff;
-    color: #ffffff;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
     border: none;
     padding: 12px 24px;
     margin-top: 12px;
@@ -67,7 +80,7 @@ button {
 }
 
 button:hover {
-    background: #0056b9;
+    background: var(--button-background-color-hover);
 }
 
 .job-card {
@@ -75,7 +88,7 @@ button:hover {
     padding: 24px;
     margin-bottom: 24px;
     border-radius: 10px;
-    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--box-shadow-strong);
 }
 
 .job-card h2 {
@@ -102,19 +115,33 @@ button:focus {
     outline: 3px solid #007bff;
 }
 
-
 @media (max-width: 768px) {
     .container {
         width: 95%;
     }
+
+    .job-card {
+        padding: 12px;
+        margin-bottom: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .job-card h2 {
+        font-size: 18px;
+    }
+
+    .job-card p {
+        font-size: 14px;
+    }
 }
 
 footer {
     background-color: #000;
-    color: #000; /* Corrected color to white for visibility */
+    color: #fff; /* Assuming this was intended to be corrected for visibility */
     padding: 20px;
     text-align: center;
     text-shadow: none;
     z-index: 1000;
     position: relative;
-}
+}
\ No newline at end of file
diff --git a/views/jobListing.ejs b/views/jobListing.ejs
index 1114a3b..377b97e 100644
--- a/views/jobListing.ejs
+++ b/views/jobListing.ejs
@@ -5,23 +5,45 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Job Listings</title>
     <link rel="stylesheet" href="/css/styles.css">
+    <style>
+        @media (max-width: 600px) {
+            .job-listings-container {
+                flex-direction: column;
+            }
+        }
+        @media (min-width: 601px) {
+            .job-listings-container {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-around;
+            }
+            .job-listing {
+                width: 45%;
+            }
+        }
+    </style>
 </head>
 <body>
     <div class="container">
         <% if(jobs && jobs.length > 0) { %>
-            <% jobs.forEach(function(job) { %>
-                <div class="job-listing">
-                    <h2><%= job.companyName %></h2>
-                    <p>Role: <%= job.role %></p>
-                    <p>Domain: <%= job.domain %></p>
-                    <p>Location: <%= job.location %></p>
-                    <p>Skills Required: <%= job.skillsRequired.join(', ') %></p>
-                    <p>Nature of Work: <%= job.natureOfWork %></p>
-                    <a href="<%= job.jobPostingLink %>" class="apply-button">Apply</a>
-                </div>
-            <% }); %>
+            <div class="job-listings-container">
+                <% jobs.forEach(function(job) { %>
+                    <div class="job-listing" style="margin: 20px; padding: 10px; background-color: var(--light-background); border: 1px solid var(--border-color); box-shadow: 0px 4px 6px rgba(0,0,0,0.1);">
+                        <h2><%= job.companyName %></h2>
+                        <p>Role: <%= job.role %></p>
+                        <p>Domain: <%= job.domain %></p>
+                        <p>Location: <%= job.location %></p>
+                        <p>Skills Required: <%= job.skillsRequired.join(', ') %></p>
+                        <p>Nature of Work: <%= job.natureOfWork %></p>
+                        <a href="<%= job.jobPostingLink %>" class="apply-button" style="font-size: 14px; padding: 10px 15px; background-color: var(--primary-color); color: var(--text-on-primary); text-decoration: none;">Apply</a>
+                    </div>
+                <% }); %>
+            </div>
         <% } else { %>
-            <p>No job listings available at the moment.</p>
+            <div class="empty-state" style="text-align: center; padding: 20px; margin-top: 20px; background-color: var(--light-background); color: var(--text-color);">
+                <p>No job listings available at the moment.</p>
+            </div>
         <% } %>
     </div>
-</body>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file