Scribd
Upload
24 views3 pages

CV Project

The document contains an HTML structure for a Faculty Resume Parser, allowing users to upload resumes and auto-fill personal details. It includes a form for file upload and another for entering personal information such as name, email, phone, qualification, experience, and address. Additionally, there are CSS styles for layout and JavaScript functionality to handle the form submission and data extraction from the uploaded resume.

Uploaded by

slayerking8971
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
24 views3 pages

CV Project

The document contains an HTML structure for a Faculty Resume Parser, allowing users to upload resumes and auto-fill personal details. It includes a form for file upload and another for entering personal information such as name, email, phone, qualification, experience, and address. Additionally, there are CSS styles for layout and JavaScript functionality to handle the form submission and data extraction from the uploaded resume.

Uploaded by

slayerking8971
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

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty Resume Parser</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Upload Resume to Auto-Fill Personal Details</h2>

<form id="uploadForm" enctype="multipart/form-data">


<input type="file" id="resume" accept=".pdf,.doc,.docx" required />
<button type="submit">Upload & Extract</button>
</form>

<h3>Personal Details</h3>
<form id="detailsForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>

<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br>

<label for="qualification">Qualification:</label>
<input type="text" id="qualification" name="qualification"><br>

<label for="experience">Experience:</label>
<input type="text" id="experience" name="experience"><br>

<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
</form>
</div>

<script src="[Link]"></script>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
margin: 0;
padding: 40px;
}

.container {
max-width: 600px;
margin: auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

h2, h3 {
text-align: center;
}

form {
margin-top: 20px;
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin: 8px 0 16px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type="file"] {
margin-bottom: 30px;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

JS

[Link]("uploadForm").addEventListener("submit", async function (e)


{
[Link]();

const fileInput = [Link]("resume");


const formData = new FormData();
[Link]("resume", [Link][0]);

try {
const res = await fetch("/parse_resume", {
method: "POST",
body: formData
});

const data = await [Link]();

[Link]("name").value = [Link] || '';


[Link]("email").value = [Link] || '';
[Link]("phone").value = [Link] || '';
[Link]("qualification").value = [Link] || '';
[Link]("experience").value = [Link] || '';
[Link]("address").value = [Link] || '';

} catch (error) {
[Link]("Error uploading resume:", error);
alert("Failed to extract resume details. Please try again.");
}
});

You might also like