Scribd
Upload
2 views

2

The document is an HTML template for displaying employee details, including a form to add new employees if none are available. It features a layout that shows employee information such as name, email, post, salary, age, phone number, employee ID, and native place, along with a photo. There is also functionality to remove an employee from the list.

Uploaded by

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

2

The document is an HTML template for displaying employee details, including a form to add new employees if none are available. It features a layout that shows employee information such as name, email, post, salary, age, phone number, employee ID, and native place, along with a photo. There is also functionality to remove an employee from the list.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Details</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.employee {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px 0;
}
.photo {
margin-right: 20px;
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
button {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Employee Details</h1>

<% if (employees.length === 0) { %>


<p>No employee details available. Add one below:</p>
<form action="/add-employee" method="post" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="post" placeholder="Post" required>
<input type="number" name="salary" placeholder="Salary" required>
<input type="number" name="age" placeholder="Age" required>
<input type="text" name="number" placeholder="Phone Number" required>
<input type="text" name="employee_id" placeholder="Employee ID"
required>
<input type="text" name="native_place" placeholder="Native Place"
required>
<input type="file" name="photo" required>
<button type="submit">Add Employee</button>
</form>
<% } else { %>
<% employees.forEach(employee => { %>
<div class="employee">
<div class="photo">
<img src="/images/<%= employee.photo %>" alt="<%= employee.name
%>">
</div>
<div>
<p><strong>Name:</strong> <%= employee.name %></p>
<p><strong>Email:</strong> <%= employee.email %></p>
<p><strong>Post:</strong> <%= employee.post %></p>
<p><strong>Salary:</strong> <%= employee.salary %></p>
<p><strong>Age:</strong> <%= employee.age %></p>
<p><strong>Phone Number:</strong> <%= employee.number %></p>
<p><strong>Employee ID:</strong> <%= employee.employee_id
%></p>
<p><strong>Native Place:</strong> <%= employee.native_place
%></p>
<form action="/remove-employee/<%= employee.id %>"
method="post" style="display:inline;">
<button type="submit">Remove</button>
</form>
</div>
</div>
<% }); %>
<% } %>
</body>
</html>

You might also like