diff --git a/RateMyResume.html b/RateMyResume.html index d22e22d..7e46d10 100644 --- a/RateMyResume.html +++ b/RateMyResume.html @@ -229,7 +229,6 @@

Connect With Us

- \ No newline at end of file diff --git a/RateMyResume.js b/RateMyResume.js index 2694877..7783f88 100644 --- a/RateMyResume.js +++ b/RateMyResume.js @@ -1,6 +1,39 @@ +// Initialize skill coins in localStorage if not already set +if (!localStorage.getItem('skillCoins')) { + localStorage.setItem('skillCoins', 0); +} + +// Select the element to display the skill coins +const coinsdata = document.querySelector('#SkillCoins'); + +// Function to get skill coins from localStorage +const getSkillCoins = () => parseInt(localStorage.getItem('skillCoins'), 10); + +// Function to update the displayed skill coins on the page +const updateCoinsDisplay = () => { + coinsdata.textContent = getSkillCoins(); +}; + +// Function to update skill coins in localStorage and refresh the display +const updateCoins = (newAmount) => { + localStorage.setItem('skillCoins', newAmount); + updateCoinsDisplay(); +}; + +// Update the displayed skill coins when the page loads +updateCoinsDisplay(); + +// Listen for changes in localStorage across tabs/pages +window.addEventListener('storage', (event) => { + if (event.key === 'skillCoins') { + updateCoinsDisplay(); + } +}); + +// Handle form submission and display alert document.getElementById('resumeForm').addEventListener('submit', function(event) { - event.preventDefault(); // Prevents form submission to a backend - + event.preventDefault(); + const username = document.getElementById('username').value; const jobRole = document.getElementById('jobRole').value; const resume = document.getElementById('resume').files[0]; @@ -12,105 +45,92 @@ document.getElementById('resumeForm').addEventListener('submit', function(event) } }); +// Toggle rating board and my rating sections const myratinghead = document.querySelector('.myrating'); const ratingboardhead = document.querySelector('.ratingboardhead'); const rating = document.querySelector('.rating'); const ratingboard = document.querySelector('.ratingboard'); ratingboard.style.display = 'none'; -ratingboardhead.addEventListener('click',()=>{ +ratingboardhead.addEventListener('click', () => { rating.style.display = 'none'; ratingboard.style.display = ''; ratingboardhead.style.backgroundColor = 'gray'; myratinghead.style.backgroundColor = 'blue'; -}) +}); -myratinghead.addEventListener('click',()=>{ +myratinghead.addEventListener('click', () => { rating.style.display = ''; ratingboard.style.display = 'none'; myratinghead.style.backgroundColor = 'gray'; ratingboardhead.style.backgroundColor = 'blue'; -}) +}); -// JavaScript to handle star rating functionality +// Star rating functionality const cards = document.querySelectorAll('.card'); cards.forEach(card => { const stars = card.querySelectorAll('.star'); let numstar = 0; - // Loop through each star and add event listeners stars.forEach(star => { star.addEventListener('click', () => { - // Set the rating based on the data-rating attribute numstar = parseInt(star.getAttribute('data-rating')); - - // Update star icons based on the selected rating stars.forEach((s, index) => { const starIcon = s.querySelector('i'); if (index < numstar) { - starIcon.classList.remove('fa-regular'); // Remove empty star - starIcon.classList.add('fa-solid'); // Add filled star + starIcon.classList.remove('fa-regular'); + starIcon.classList.add('fa-solid'); } else { - starIcon.classList.remove('fa-solid'); // Remove filled star - starIcon.classList.add('fa-regular'); // Add empty star + starIcon.classList.remove('fa-solid'); + starIcon.classList.add('fa-regular'); } }); }); }); }); -let skillcoins = 0; -const coinsdata = document.querySelector('#SkillCoins'); - -const updateCoins = () => { - coinsdata.textContent = skillcoins; -}; -updateCoins(); - +// Update skill coins when submit buttons are clicked const submitButtons = document.querySelectorAll('.submitbtn'); submitButtons.forEach(button => { button.addEventListener('click', () => { - if(button.disabled != true){ - skillcoins += 5; - updateCoins(); - button.disabled = true; // Disable the button after it’s clicked + if (!button.disabled) { + const currentCoins = getSkillCoins(); + updateCoins(currentCoins + 5); + button.disabled = true; } }); }); -// panel 2 logic +// Panel 2 logic for showing keywords based on job role const keywords = { "Software Developer": ["JavaScript", "React", "Node.js", "API", "Agile", "Version Control"], "Data Analyst": ["SQL", "Python", "Excel", "Data Visualization", "Machine Learning", "Tableau"], "Graphic Designer": ["Adobe Photoshop", "Illustrator", "InDesign", "Branding", "Typography", "Creative Suite"] - }; +}; function showKeywords() { - if(skillcoins < 5){ - alert("You dont have enough Skill coins to use this feature!") - } - else{ + if (getSkillCoins() < 5) { + alert("You don't have enough Skill coins to use this feature!"); + } else { const role = document.getElementById("job-role").value; const suggestions = keywords[role] || []; - const keywordDisplay = document.getElementById("keyword-suggestions"); + if (suggestions.length) { - keywordDisplay.innerHTML = ` -

Suggested Keywords:
${suggestions.join(", ")}

- - ` - skillcoins -= 5; - updateCoins(); - ; + keywordDisplay.innerHTML = ` +

Suggested Keywords:
${suggestions.join(", ")}

+ + `; + updateCoins(getSkillCoins() - 5); // Deduct 5 skill coins } else { - keywordDisplay.innerHTML = "

No keywords available for this role.

"; + keywordDisplay.innerHTML = "

No keywords available for this role.

"; } } } - + function copyKeywords() { - const keywordText = document.getElementById("keyword-text").innerText; - navigator.clipboard.writeText(keywordText) - .then(() => alert("Keywords copied to clipboard!")) - .catch(err => console.error("Failed to copy keywords:", err)); -} \ No newline at end of file + const keywordText = document.getElementById("keyword-text").innerText; + navigator.clipboard.writeText(keywordText) + .then(() => alert("Keywords copied to clipboard!")) + .catch(err => console.error("Failed to copy keywords:", err)); +} diff --git a/Resume.css b/Resume.css index 8a6773d..daa0ddb 100644 --- a/Resume.css +++ b/Resume.css @@ -4,6 +4,20 @@ body { margin: 0; padding: 20px; } +.icons{ + display: flex; + align-items: center; +} +.icons i{ + margin-left: 1.5rem; +} +.icons p{ + display: inline; + color: white; + font-size: 2.3rem; + margin-left: 1rem; + line-height: 2.3rem; +} /* hero section */ .herosection{ height: 100vh; @@ -409,7 +423,25 @@ button:focus { display: flex; justify-content: right; } - +.premium{ + margin-top: 1rem; + display: flex; + justify-content: space-between; +} +#coinicon{ + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} +#coinicon p{ + font-size: 2rem; + margin: 0; +} +.fa-coins{ + font-size: 2rem; + color: rgb(246, 180, 0); +} /* Step 3 Styles */ #step-3{ width: 90%; diff --git a/Resume.js b/Resume.js index 1fc4126..d269043 100644 --- a/Resume.js +++ b/Resume.js @@ -153,37 +153,83 @@ document.getElementById('next-step').addEventListener('click', function() { showStep(2); }); -// card color change when click on card +const coinsdata = document.querySelector('#SkillCoins'); // Element to display skill coins + +// Function to get skill coins from localStorage +const getSkillCoins = () => parseInt(localStorage.getItem('skillCoins'), 10) || 0; + +// Function to update skill coins in localStorage and display +const updateCoins = (newAmount) => { + localStorage.setItem('skillCoins', newAmount); + updateCoinsDisplay(); +}; + +// Function to update the displayed skill coins on the page +const updateCoinsDisplay = () => { + coinsdata.textContent = getSkillCoins(); +}; + +// Call updateCoinsDisplay on page load +updateCoinsDisplay(); + +// Card color change when clicked const basicCard = document.querySelector('#basic'); const classicCard = document.querySelector('#classic'); const modernCard = document.querySelector('#modern'); const developerCard = document.querySelector('#developer'); -basicCard.addEventListener('click',()=>{ + +basicCard.addEventListener('click', () => { basicCard.style.backgroundColor = '#ADD8E6'; classicCard.style.backgroundColor = '#f4f4f4'; modernCard.style.backgroundColor = '#f4f4f4'; + developerCard.style.backgroundColor = '#f4f4f4'; selecttemp = 1; }); -classicCard.addEventListener('click',()=>{ + +classicCard.addEventListener('click', () => { basicCard.style.backgroundColor = '#f4f4f4'; classicCard.style.backgroundColor = '#ADD8E6'; modernCard.style.backgroundColor = '#f4f4f4'; + developerCard.style.backgroundColor = '#f4f4f4'; selecttemp = 2; }); -modernCard.addEventListener('click',()=>{ + +modernCard.addEventListener('click', () => { basicCard.style.backgroundColor = '#f4f4f4'; classicCard.style.backgroundColor = '#f4f4f4'; modernCard.style.backgroundColor = '#ADD8E6'; + developerCard.style.backgroundColor = '#f4f4f4'; selecttemp = 3; }); -developerCard.addEventListener('click',()=>{ - basicCard.style.backgroundColor = '#f4f4f4'; - classicCard.style.backgroundColor = '#f4f4f4'; - modernCard.style.backgroundColor = '#f4f4f4'; - developerCard.style.backgroundColor = '#ADD8E6'; - selecttemp = 4; + +// Premium Template Logic +const coinicon = document.querySelector('#coinicon'); +const getpremium = document.querySelector('#getpremium'); + +getpremium.addEventListener('click', () => { + if (getSkillCoins() < 10) { + alert("You don't have enough Skill coins to use this template!"); + } else { + // Deduct coins and update display + updateCoins(getSkillCoins() - 10); + + // Enable the developer card selection + developerCard.addEventListener('click', () => { + basicCard.style.backgroundColor = '#f4f4f4'; + classicCard.style.backgroundColor = '#f4f4f4'; + modernCard.style.backgroundColor = '#f4f4f4'; + developerCard.style.backgroundColor = '#ADD8E6'; + selecttemp = 4; + }); + + // Hide coin icon and premium button once premium template is unlocked + coinicon.style.display = 'none'; + getpremium.style.display = 'none'; + } }); + + // Handle previous step button for Step 2 document.getElementById('prev-step-2').addEventListener('click', function() { const stepone = document.querySelector('.form-container') @@ -211,10 +257,11 @@ document.getElementById('next-step-2').addEventListener('click', function() { const skills = document.getElementById('skillsinput').value.trim(); const educationEntries = collectEducationData(); const experienceEntries = collectExperienceData(); + const achiveEntries = collectAchiveData(); const projectEntries = collectProjectData(); // Generate resume HTML based on the selected template - const resumeContent = generateResumeHTML(name, profile, email, contact, location, githubid, skills, educationEntries, experienceEntries, projectEntries, selectedTemplate); + const resumeContent = generateResumeHTML(name, profile, email, contact, location, githubid, skills, educationEntries, experienceEntries, achiveEntries, projectEntries, selectedTemplate); document.getElementById('resume-display').innerHTML = resumeContent; step2p.querySelector('.circle').textContent = '✓'; @@ -234,6 +281,7 @@ function collectResumeData() { const skills = document.getElementById('skillsinput').value.trim(); const education = collectEducationData(); const experience = collectExperienceData(); + const achive = collectAchiveData(); const projects = collectProjectData(); return { @@ -246,6 +294,7 @@ function collectResumeData() { skills, education, experience, + achive, projects, template: selectedTemplate }; @@ -272,6 +321,13 @@ function collectExperienceData() { })); } +function collectAchiveData() { + return Array.from(document.querySelectorAll('.achive-entry')).map(entry => ({ + heading: entry.querySelector('input[placeholder="e.g., Best Employee of the Year"]').value, + description: entry.querySelector('textarea[placeholder="Describe your achievement or certification"]').value, + })); +} + function collectProjectData() { return Array.from(document.querySelectorAll('.project-entry')).map(entry => ({ title: entry.querySelector('input[placeholder="Enter project title"]').value, @@ -364,7 +420,7 @@ async function init() { init(); // Function to generate resume HTML based on selected template -function generateResumeHTML(name, profile, email, contact, location, githubid, skills, educationEntries, experienceEntries, projectEntries, template,) { +function generateResumeHTML(name, profile, email, contact, location, githubid, skills, educationEntries, experienceEntries, achiveEntries, projectEntries, template) { let educationHTML = educationEntries.map(edu => `
${edu.institute} (${edu.startYear} - ${edu.endYear})
@@ -380,6 +436,13 @@ function generateResumeHTML(name, profile, email, contact, location, githubid, s
`).join(''); + let achiveHTML = achiveEntries.map(achi => ` +
+ ${achi.heading}
+

${achi.description}

+
+ `).join(''); + let projectHTML = projectEntries.map(proj => `
${proj.title}
@@ -388,6 +451,7 @@ function generateResumeHTML(name, profile, email, contact, location, githubid, s Project Link
`).join(''); + // which template will show in review logic if(selecttemp === 1){ return ` @@ -400,6 +464,8 @@ function generateResumeHTML(name, profile, email, contact, location, githubid, s ${educationHTML}

Experience

${experienceHTML} +

Achievements and Certifications

+ ${achiveHTML}

Projects

${projectHTML} `; @@ -432,7 +498,7 @@ else if(selecttemp === 2){

Achievements and Certifications

- + ${achiveHTML}

Projects

@@ -503,7 +569,7 @@ else if(selecttemp ===3){

Achievements and Certifications

- + ${achiveHTML}

Projects

diff --git a/resume.html b/resume.html index 08981f8..efa523f 100644 --- a/resume.html +++ b/resume.html @@ -26,6 +26,7 @@ +