Job Board

HTML (index.html)

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;title&gt;Job Board&lt;/title&gt;</head>
<body>
&lt;div class="container"&gt;
    &lt;h1&gt;Job Board&lt;/h1&gt;
    &lt;form id="jobForm"&gt;
        &lt;input type="text" id="jobTitle" placeholder="Job Title" required&gt;
        &lt;input type="text" id="company" placeholder="Company" required&gt;
        &lt;textarea id="description" placeholder="Job Description" required&gt;&lt;/textarea&gt;
        &lt;button type="submit"&gt;Add Job&lt;/button&gt;
    &lt;/form&gt;
    &lt;div id="jobList" class="job-list"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;</body>
</html>

CSS (styles.css)

cssCopy codebody {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;}

.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);}

h1 {
text-align: center;}

form {
display: flex;
flex-direction: column;}

input, textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;}

button {
padding: 10px;
background: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;}

button:hover {
background: #4cae4c;}

.job {
padding: 15px;
border: 1px solid #ddd;
margin-top: 10px;
border-radius: 4px;
background: #fafafa;}

.job h3 {
margin: 0;}

.job p {
margin: 5px 0;}

JavaScript (script.js)

javascriptCopy codedocument.getElementById('jobForm').addEventListener('submit', function(event) {
event.preventDefault();
const jobTitle = document.getElementById('jobTitle').value;
const company = document.getElementById('company').value;
const description = document.getElementById('description').value;
addJob(jobTitle, company, description);
// Clear form fields
this.reset();});

function addJob(title, company, description) {
const jobList = document.getElementById('jobList');
const jobDiv = document.createElement('div');
jobDiv.className = 'job';
jobDiv.innerHTML = `
    &lt;h3&gt;${title}&lt;/h3&gt;
    &lt;p&gt;&lt;strong&gt;Company:&lt;/strong&gt; ${company}&lt;/p&gt;
    &lt;p&gt;${description}&lt;/p&gt;
`;
jobList.appendChild(jobDiv);}

How to Run the Project

Create the Files: Create three files named index.html, styles.css, and script.js in a folder.
Copy the Code: Copy the respective code into each file.
Open in Browser: Open index.html in a web browser to view your job board.

Features You Can Add

Data Persistence: Use local storage or a backend service (like Firebase or a simple Node.js server) to save job postings.
Search Functionality: Implement a search bar to filter job postings.
Categories or Tags: Add the ability to categorize jobs.
Responsive Design: Enhance the CSS for better responsiveness on mobile devices.

Job Board

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

How to Run the Project

Features You Can Add

Leave a Reply Cancel reply