Skip to content

Commit

Permalink
Merge pull request #884 from Mohitranag18/charCheck
Browse files Browse the repository at this point in the history 
Implement Character Limit and Counter for Resume Template Inputs
  • Loading branch information
@GarimaSingh0109
GarimaSingh0109 authored Oct 25, 2024
2 parents 443ceed + 5a50ab4 commit e57bffb
Show file tree
Hide file tree
Showing 4 changed files with 217 additions and 40 deletions.
26 changes: 26 additions & 0 deletions Resume.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,32 @@ body {
#languages-input{
width: 40%;
}
#pinfodesc{
display: flex;
justify-content: right;
}
#expdesc{
display: flex;
justify-content: right;
}
#achivedesc{
display: flex;
justify-content: right;
}
#projdesc{
display: flex;
justify-content: right;
}
#limitwarning{
width: 90%;
font-size: 1.15rem;
color: red;
align-self: center;
text-align: center;
}
#dummy1{
opacity: 50%;
}
h2, h3 {
color: #333;
}
Expand Down
103 changes: 71 additions & 32 deletions Resume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,44 @@ document.getElementById('add-experience').addEventListener('click', function() {
newExperience.classList.add('experience-entry');
newExperience.innerHTML = `
<div class="expLeft">
<label>Job Position:</label>
<input type="text" placeholder="Enter job position">
<label>Company Name:</label>
<input type="text" placeholder="Enter company name">
<label>Start Year:</label>
<input type="text" placeholder="Start Year">
<label>End Year:</label>
<input type="text" placeholder="End Year">
</div>
<div class="expRight">
<label>Description:</label>
<textarea id="expdes" placeholder="Describe your job experience"></textarea>
</div>
<label>Job Position:</label>
<input type="text" placeholder="Enter job position">
<label>Company Name:</label>
<input type="text" placeholder="Enter company name">
<label>Start Year:</label>
<input type="text" placeholder="Start Year">
<label>End Year:</label>
<input type="text" placeholder="End Year">
</div>
<div class="expRight">
<label>Description:</label>
<textarea id="expdes" placeholder="Describe your job experience"></textarea>
<p id="expdesc"></p>
</div>
`;
experienceFields.appendChild(newExperience);
});
// Dynamically adding more Achivements sections
document.getElementById('add-achivement').addEventListener('click', function() {
const achiveFields = document.querySelector('.achive');
const newAchive = document.createElement('div');
newAchive.classList.add('achive-entry');
newAchive.innerHTML = `
<div class="achiveLeft">
<label>Heading:</label>
<input type="text" placeholder="e.g., Best Employee of the Year">
</div>
<div class="achiveRight">
<label>Description:</label>
<textarea id="achivedes" placeholder="Describe your achievement or certification"></textarea>
<p id="achivedesc"></p>
</div>
`;
achiveFields.appendChild(newAchive);
});

// Dynamically adding more Projects
document.getElementById('add-project').addEventListener('click', function() {
Expand All @@ -70,19 +89,20 @@ document.getElementById('add-project').addEventListener('click', function() {
newProject.classList.add('project-entry');
newProject.innerHTML = `
<div class="projectLeft">
<label>Project Title:</label>
<input type="text" placeholder="Enter project title">
<label>Role/Responsibilities:</label>
<textarea placeholder="Describe your role"></textarea>
<label>Link (Optional):</label>
<input type="url" placeholder="Enter project link">
</div>
<div class="projectRight">
<label>Description:</label>
<textarea id="projectdesc" placeholder="Describe the project"></textarea>
</div>
<label>Project Title:</label>
<input type="text" placeholder="Enter project title">
<label>Role/Responsibilities:</label>
<textarea placeholder="Describe your role"></textarea>
<label>Link (Optional):</label>
<input type="url" placeholder="Enter project link">
</div>
<div class="projectRight">
<label>Description:</label>
<textarea id="projectdesc" placeholder="Describe the project"></textarea>
<p id="projdesc"></p>
</div>
`;
projectFields.appendChild(newProject);
});
Expand Down Expand Up @@ -181,9 +201,10 @@ document.getElementById('next-step-2').addEventListener('click', function() {
const educationEntries = collectEducationData();
const experienceEntries = collectExperienceData();
const projectEntries = collectProjectData();
const achiveEntries = collectAchiveData();

// Generate resume HTML based on the selected template
const resumeContent = generateResumeHTML(name, profile, email, contact, location, educationEntries, experienceEntries, projectEntries, selectedTemplate);
const resumeContent = generateResumeHTML(name, profile, email, contact, location, educationEntries, experienceEntries, projectEntries, achiveEntries, selectedTemplate);

document.getElementById('resume-display').innerHTML = resumeContent;
step2p.querySelector('.circle').textContent = '✓';
Expand All @@ -202,6 +223,7 @@ function collectResumeData() {
const education = collectEducationData();
const experience = collectExperienceData();
const projects = collectProjectData();
const achive = collectAchiveData();

return {
name,
Expand All @@ -212,11 +234,12 @@ function collectResumeData() {
education,
experience,
projects,
achive,
template: selectedTemplate
};
}

// Functions to collect education, experience, and project data
// Functions to collect education, experience, project and achievement data
function collectEducationData() {
return Array.from(document.querySelectorAll('.education-entry')).map(entry => ({
institute: entry.querySelector('input[placeholder="Enter institute name"]').value,
Expand Down Expand Up @@ -246,8 +269,15 @@ function collectProjectData() {
}));
}

function collectAchiveData() {
return Array.from(document.querySelectorAll('.achive-entry')).map(entry => ({
title: entry.querySelector('input[placeholder="e.g., Best Employee of the Year"]').value,
description: entry.querySelector('textarea[placeholder="Describe your achievement or certification"]').value,
}));
}

// Function to generate resume HTML based on selected template
function generateResumeHTML(name, profile, email, contact, location, educationEntries, experienceEntries, projectEntries, template) {
function generateResumeHTML(name, profile, email, contact, location, educationEntries, experienceEntries, projectEntries, achiveEntries, template) {
let educationHTML = educationEntries.map(edu => `
<div>
<strong>${edu.institute}</strong> (${edu.startYear} - ${edu.endYear})<br>
Expand All @@ -272,6 +302,13 @@ function generateResumeHTML(name, profile, email, contact, location, educationEn
</div>
`).join('');

let achiveHTML = achiveEntries.map(achi=>`
<div>
<strong>${achi.title}</strong><br>
<p>${achi.description}</p>
</div>
`).join('');

return `
<h1>${name}</h1>
<p>${profile}</p>
Expand All @@ -282,6 +319,8 @@ function generateResumeHTML(name, profile, email, contact, location, educationEn
${experienceHTML}
<h2>Projects</h2>
${projectHTML}
<h2>Achivements and Certifications</h2>
${achiveHTML}
`;
}

Expand Down
24 changes: 17 additions & 7 deletions resume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ <h3>Personal Information <i id="caret1" class="fa-solid fa-caret-down"></i></h3>
<div class="pInfoRight">
<label>Profile:</label>
<textarea id="profile" placeholder="Write about yourself"></textarea>
<p id="pinfodesc">0/150</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -140,6 +141,7 @@ <h3>Experience <i id="caret4" class="fa-solid fa-caret-down"></i></h3>
<div class="expRight">
<label>Description:</label>
<textarea id="expdes" placeholder="Describe your job experience"></textarea>
<p id="expdesc"></p>
</div>
</div>
</div>
Expand All @@ -150,17 +152,22 @@ <h3>Experience <i id="caret4" class="fa-solid fa-caret-down"></i></h3>
<div class="section" id="achievements">
<h3>Achievements and Certifications <i id="caret5" class="fa-solid fa-caret-down"></i></h3>
<div class="achive">
<div class="achiveLeft">
<label>Heading:</label>
<input type="text" placeholder="e.g., 'Best Employee of the Year'">
</div>
<div class="achiveRight">
<label>Description:</label>
<textarea placeholder="Describe your achievement or certification"></textarea>
<div class="achive-entry">
<div class="achiveLeft">
<label>Heading:</label>
<input type="text" placeholder="e.g., Best Employee of the Year">
</div>
<div class="achiveRight">
<label>Description:</label>
<textarea id="achivedes" placeholder="Describe your achievement or certification"></textarea>
<p id="achivedesc"></p>
</div>
</div>
</div>
<button type="button" id="add-achivement">Add Another Achievement</button>
</div>


<!-- Projects (Optional) -->
<div class="section" id="projects">
<h3>Projects (Optional) <i id="caret6" class="fa-solid fa-caret-down"></i></h3>
Expand All @@ -179,6 +186,7 @@ <h3>Projects (Optional) <i id="caret6" class="fa-solid fa-caret-down"></i></h3>
<div class="projectRight">
<label>Description:</label>
<textarea id="projectdesc" placeholder="Describe the project"></textarea>
<p id="projdesc"></p>
</div>
</div>
</div>
Expand All @@ -194,7 +202,9 @@ <h3>Languages (Optional) <i id="caret7" class="fa-solid fa-caret-down"></i></h3>

<!-- Buttons -->
<div class="buttons step1btns">
<p id="limitwarning"><strong>Warning:</strong> Your description is over the character limit. Please modify it before moving to the next step.</p>
<button type="button" id="next-step" onclick="proceedToNextStep(2)">Next Step</button>
<button type="button" id="dummy1" >Next Step</button>
</div>
</div>

Expand Down
104 changes: 103 additions & 1 deletion resume2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ const expbtn = document.querySelector('#add-experience');
expfield.style.display = 'none';
expbtn.style.display = 'none';
const achive = document.querySelector('.achive');
const achivebtm = document.querySelector('#add-achivement');
achive.style.display = 'none';
achivebtm.style.display = 'none';
const projfield = document.querySelector('#project-fields');
const projbtn = document.querySelector('#add-project');
projfield.style.display = 'none';
Expand Down Expand Up @@ -82,10 +84,12 @@ caret4.addEventListener('click',()=>{
caret5.addEventListener('click',()=>{
if(achive.style.display === 'none'){
achive.style.display = '';
achivebtm.style.display = '';
caret5.style.transform = 'rotate(180deg)';
}
else{
achive.style.display = 'none';
achivebtm.style.display = 'none';
caret5.style.transform = 'rotate(0)';
}
})
Expand All @@ -112,4 +116,102 @@ caret7.addEventListener('click',()=>{
lnginput.style.display = 'none';
caret7.style.transform = 'rotate(0)';
}
})
})

let exed1 = 0;
let exed2 = 0;
let exed3 = 0;
let exed4 = 0;

const limit = 300; // Maximum character limit
const myprofiledesc = document.querySelector('#profile');
const myprofilecount = document.querySelector('#pinfodesc');
myprofilecount.textContent = "0/" + limit; // Initialize character count for profile

myprofiledesc.addEventListener('input', () => {
const textlength = myprofiledesc.value.length;
myprofilecount.textContent = textlength + "/" + limit;

if (textlength > limit) {
myprofilecount.style.color = 'red';
exed1 = 1;
} else {
myprofilecount.style.color = ''; // Optional: Set back to default color
exed1 = 0;
}
updateWarningDisplay();
});

const myexpdesc = document.querySelector('#expdes');
const myexpcount = document.querySelector('#expdesc');
myexpcount.textContent = "0/" + limit; // Initialize character count for experience

myexpdesc.addEventListener('input', () => {
const textlength = myexpdesc.value.length;
myexpcount.textContent = textlength + "/" + limit;

if (textlength > limit) {
myexpcount.style.color = 'red';
exed2 = 1;
} else {
myexpcount.style.color = ''; // Optional: Set back to default color
exed2 = 0;
}
updateWarningDisplay();
});

const myachivedesc = document.querySelector('#achivedes');
const myachivecount = document.querySelector('#achivedesc');
myachivecount.textContent = "0/" + limit; // Initialize character count for achievements

myachivedesc.addEventListener('input', () => {
const textlength = myachivedesc.value.length;
myachivecount.textContent = textlength + "/" + limit;

if (textlength > limit) {
myachivecount.style.color = 'red';
exed3 = 1;
} else {
myachivecount.style.color = ''; // Optional: Set back to default color
exed3 = 0;
}
updateWarningDisplay();
});

const myprojdesc = document.querySelector('#projectdesc');
const myprojcount = document.querySelector('#projdesc');
myprojcount.textContent = "0/" + limit; // Initialize character count for projects

myprojdesc.addEventListener('input', () => {
const textlength = myprojdesc.value.length;
myprojcount.textContent = textlength + "/" + limit;

if (textlength > limit) {
myprojcount.style.color = 'red';
exed4 = 1;
} else {
myprojcount.style.color = ''; // Optional: Set back to default color
exed4 = 0;
}
updateWarningDisplay();
});

// Function to update the warning button and message display
const dummybtn = document.querySelector('#dummy1');
const realbtn = document.querySelector('#next-step');
const charwarning = document.querySelector('#limitwarning');
realbtn.style.display = 'block';
dummybtn.style.display = 'none';
charwarning.style.display = 'none';

function updateWarningDisplay() {
if (exed1 === 1 || exed2 === 1 || exed3 === 1 || exed4 === 1) {
dummybtn.style.display = 'block';
charwarning.style.display = 'block';
realbtn.style.display = 'none';
} else {
dummybtn.style.display = 'none';
charwarning.style.display = 'none';
realbtn.style.display = 'block';
}
}

0 comments on commit e57bffb

Please sign in to comment.