Scribd
Upload
4 views10 pages

FSWD - 6

Uploaded by

mirudhuvarshini534
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views10 pages

FSWD - 6

Uploaded by

mirudhuvarshini534
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Ex.No.

6 Develop a leave management system for an organization


where users can apply different types of leaves such as casual
DATE: leave and medical leave. They also can view the available
number of days.

AIM:

To develop a leave management system for an organization where users can apply different
types of leaves such as casual leave and medical leave. They also can view the available no of days.

ALGORITHM:

Step 1: Identify essential sections.

Step 2: Choose a Technology Stack Select a web development framework and languages.

Step 3: Create Project Structure Establish directories for HTML, CSS, JavaScript files, and assets.

Step 4: Code HTML Structure Develop HTML templates for each webpage (index, about, resume,
projects, contact).

Step 5: Implement CSS Styling Style HTML elements using CSS for a visually appealing design.

Step 6: Add JavaScript Functionality Integrate JavaScript for interactive features and dynamic
content loading.

Step 7: Test and Debug Conduct thorough testing on different browsers and devices.

PROGRAM:

HTML - 1: (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Login</title>
<style>
</style>
</head>
<body>
<div class="login-container">
<h1>Employee Login</h1>
<form id="loginForm">
<input type="text" id="employeeID" placeholder="Employee ID" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<div id="errorMessage" class="error"></div>
</div>
<script>
</script>
</body>
</html>

CSS - 1:

body {
font-family: 'Times New Roman', Times, serif, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}

.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
color: #333;
}

input, button {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}

button {
background-color: #4CAF50;
color: white;
border: none;
}

.error {
color: #d9534f;
font-weight: bold;
margin-top: 10px;
}

JAVASCRIPT - 1:

const loginForm = document.getElementById("loginForm");


const errorMessage = document.getElementById("errorMessage");

// Dummy credentials for simplicity


const employeeCredentials = {
id: "employee123",
password: "password123",
};

loginForm.addEventListener("submit", function(e) {
e.preventDefault();

const employeeID = document.getElementById("employeeID").value;


const password = document.getElementById("password").value;

if (employeeID === employeeCredentials.id && password === employeeCredentials.password) {


// Redirect to Leave Management System if login is successful
window.location.href = "leave_management.html";
} else {
errorMessage.textContent = "Invalid Employee ID or Password!";
}
});

HTML – 2: (leave_management.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<title>Leave Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
</style>
<body>
<div class="container">
<h1>Leave Management System</h1>
<br>
<!-- Leave Balance Section -->
<div class="leave-balance">
<h2>Leave Balance</h2>
<p>Casual Leave: <span id="casual-leave-balance">10</span> days</p>
<p>Medical Leave: <span id="medical-leave-balance">15</span> days</p>
</div>

<!-- Apply for Leave Section -->


<div class="apply-leave">
<h2>Apply for Leave</h2>
<form id="leaveForm">
<label for="leaveType">Select Leave Type:</label>
<select id="leaveType">
<option value="casual">Casual Leave</option>
<option value="medical">Medical Leave</option>
</select>

<label for="leaveDays">Number of Days:</label>


<input type="number" id="leaveDays" min="1" required>

<button type="submit">Apply</button>
</form>
</div>
<!-- Leave Status Section -->
<div id="statusMessage" class="status"></div>
</div>
<script>
</script>
</body>
</html>

CSS – 2:

body {
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}

.container {
background-color: white;
padding: 402px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

h1, h2 {
color: #333;
}

form {
margin-top: 15px;
}

label {
display: block;
margin: 10px 0 5px;
}
input, select, button {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}

button {
background-color: #4CAF50;
color: white;
border: none;
}

.status {
margin-top: 15px;
color: #d9534f;
font-weight: bold;
}

JAVASCRIPT – 2:

// Initial leave balances


let casualLeaveBalance = 10;
let medicalLeaveBalance = 15;

// References to HTML elements


const casualLeaveDisplay = document.getElementById("casual-leave-balance");
const medicalLeaveDisplay = document.getElementById("medical-leave-balance");
const leaveForm = document.getElementById("leaveForm");
const statusMessage = document.getElementById("statusMessage");

// Update leave balances on load


casualLeaveDisplay.textContent = casualLeaveBalance;
medicalLeaveDisplay.textContent = medicalLeaveBalance;

// Form submit event


leaveForm.addEventListener("submit", function (e) {
e.preventDefault();

const leaveType = document.getElementById("leaveType").value;


const leaveDays = parseInt(document.getElementById("leaveDays").value, 10);
if (leaveType === "casual" && leaveDays <= casualLeaveBalance) {
casualLeaveBalance -= leaveDays;
casualLeaveDisplay.textContent = casualLeaveBalance;
statusMessage.textContent = ${leaveDays} Casual Leave(s) Approved!;
statusMessage.style.color = "#5cb85c";
} else if (leaveType === "medical" && leaveDays <= medicalLeaveBalance) {
medicalLeaveBalance -= leaveDays;
medicalLeaveDisplay.textContent = medicalLeaveBalance;
statusMessage.textContent = ${leaveDays} Medical Leave(s) Approved!;
statusMessage.style.color = "#5cb85c";
} else {
statusMessage.textContent = "Insufficient Leave Balance!";
statusMessage.style.color = "#d9534f";
}
});

OUTPUT:
Department of IT
Performance 30
Observation 30
Record 40
RESULT: Total 100

You might also like