Skip to content

Commit

Permalink
Merge pull request #989 from Mohitranag18/keywords
Browse files Browse the repository at this point in the history
Implement "Relevant Keywords" Feature for Premium Members
  • Loading branch information
GarimaSingh0109 authored Nov 8, 2024
2 parents 48449eb + 6cb1ed6 commit 4753cd4
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 3 deletions.
117 changes: 114 additions & 3 deletions RateMyResume.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ body{

.hero-content h1 {
font-size: 4rem;
color: #333;
color: #003d4d;
margin-bottom: 15px;
}

.hero-content p {
font-size: 1.2em;
color: #555;
color: #003d4d;
margin-bottom: 25px;
line-height: 1.6;
}
Expand All @@ -45,7 +45,7 @@ body{
list-style: none;
padding: 0;
font-size: 1.1em;
color: #333;
color: #003d4d;
margin-bottom: 30px;
}

Expand Down Expand Up @@ -243,4 +243,115 @@ button:hover {
}
.download-button:hover {
background-color: #37913b;
}

/* panel 2 css */
.panel2{
width: 100%;
height: 80vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 7rem;
}
.boxcontent{
width: 100%;
height: 40%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem;
position: relative;
border-bottom: 2px solid gainsboro;
}
.boxcontent h2{
color: #003d4d;
font-size: 3rem;
margin-bottom: 2rem;
}
.boxcontent p{
color: #003d4d;
width: 70%;
font-size: 1.7rem;
margin-bottom: 1.3rem;
}
.boxcontent #p2{
font-size: 1.4rem;
font-weight: 600;
color: #4CAF50;
}
.keywordbox{
width: 90%;
height: 100%;
position: relative;
border-radius: 3rem;
border: 2px solid white;
display: flex;
flex-direction: column;
}
.mainbox{
width: 100%;
height: 60%;
display: flex;
padding: 5rem;
position: relative;
justify-content: space-between;
}
.keyleft{
width: 45%;
height: 100%;
padding: 3rem;
border: 2px solid #333;
border-radius: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.keyright{
width: 45%;
height: 100%;
padding: 3rem;
border: 2px solid #333;
border-radius: 2rem;
position: relative;
}
.jobrole{
color: black;
display: flex;
justify-content: space-between;
}
.jobrole label{
color: #003d4d;
font-size: 2rem;
font-weight: 600;
}
#job-role{
font-size: 1.7rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
border-radius: 1rem;
background-color: rgb(185, 185, 185);
}
.keyleft button{
width: 100%;
}
#keyword-suggestions{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#keyword-suggestions p{
color: #003d4d;
font-size: 1.5rem;
line-height: 3rem;
}
#keyword-suggestions button{
background-color: blue;
font-size: 1.7rem;
width: auto;
}
29 changes: 29 additions & 0 deletions RateMyResume.html
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,35 @@ <h3>Software Engineer</h3>
</div>
<!-- panel 1 ends -->

<!-- panel 2 start -->
<div class="panel2">
<div class="keywordbox">
<div class="boxcontent">
<h2>Relevant Keywords for Your Resume</h2>
<p>Enhance your resume with targeted keywords for your chosen job role! Access keywords for each role for just 5 SkillCoins. Use SkillCoins to make your resume stand out to recruiters and boost your chances of success.</p>
<p id="p2">Tip: Earn SkillCoins by rating other users' resumes on the platform!</p>
</div>
<div class="mainbox">
<div class="keyleft">
<div class="jobrole">
<label for="job-role">Choose Job Role:</label>
<select id="job-role">
<option value="">Select Job Role</option>
<option value="Software Developer">Software Developer</option>
<option value="Data Analyst">Data Analyst</option>
<option value="Graphic Designer">Graphic Designer</option>
</select>
</div>
<button onclick="showKeywords()">Find Relevant Keywords</button>
</div>
<div class="keyright">
<div id="keyword-suggestions" class="keyword-display"></div>
</div>
</div>
</div>
</div>
<!-- panel 2 ends -->

<!-- footer section start -->
<footer class="footer">
<div class="footer-content">
Expand Down
36 changes: 36 additions & 0 deletions RateMyResume.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,39 @@ submitButtons.forEach(button => {
});
});

// panel 2 logic
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{
const role = document.getElementById("job-role").value;
const suggestions = keywords[role] || [];

const keywordDisplay = document.getElementById("keyword-suggestions");
if (suggestions.length) {
keywordDisplay.innerHTML = `
<p><strong>Suggested Keywords:</strong><br><span id="keyword-text">${suggestions.join(", ")}</span></p>
<button onclick="copyKeywords()">Copy</button>
`
skillcoins -= 5;
updateCoins();
;
} else {
keywordDisplay.innerHTML = "<p>No keywords available for this role.</p>";
}
}
}

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));
}

0 comments on commit 4753cd4

Please sign in to comment.