From 6cb1ed69bfb02fabc365683c80bb2d28838381bb Mon Sep 17 00:00:00 2001
From: Mohit Rana <mohitr8998@gmail.com>
Date: Wed, 30 Oct 2024 02:40:23 -0400
Subject: [PATCH] added find relevant key section in the ratemyresume page

---
 RateMyResume.css  | 117 ++++++++++++++++++++++++++++++++++++++++++++--
 RateMyResume.html |  29 ++++++++++++
 RateMyResume.js   |  36 ++++++++++++++
 3 files changed, 179 insertions(+), 3 deletions(-)

diff --git a/RateMyResume.css b/RateMyResume.css
index 6695b5c..9d0fd72 100644
--- a/RateMyResume.css
+++ b/RateMyResume.css
@@ -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;
 }
@@ -45,7 +45,7 @@ body{
     list-style: none;
     padding: 0;
     font-size: 1.1em;
-    color: #333;
+    color: #003d4d;
     margin-bottom: 30px;
 }
 
@@ -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;
 }
\ No newline at end of file
diff --git a/RateMyResume.html b/RateMyResume.html
index 9562cbc..d22e22d 100644
--- a/RateMyResume.html
+++ b/RateMyResume.html
@@ -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">
diff --git a/RateMyResume.js b/RateMyResume.js
index 0ccbaf0..2694877 100644
--- a/RateMyResume.js
+++ b/RateMyResume.js
@@ -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));
+}  
\ No newline at end of file