Implement SkillCoins Payment and GitHub Data Integration for Premium Resume Template #942

RateMyResume.html

@@ -229,7 +229,6 @@ <h3>Connect With Us</h3>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
-    <script src="Resume.js"></script>
     <script src="RateMyResume.js"></script>
 </body>
 </html>

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 = `
-            <p><strong>Suggested Keywords:</strong><br><span id="keyword-text">${suggestions.join(", ")}</span></p>
-            <button onclick="copyKeywords()">Copy</button>
-          `
-          skillcoins -= 5;
-          updateCoins();
-          ;
+            keywordDisplay.innerHTML = `
+                <p><strong>Suggested Keywords:</strong><br><span id="keyword-text">${suggestions.join(", ")}</span></p>
+                <button onclick="copyKeywords()">Copy</button>
+            `;
+            updateCoins(getSkillCoins() - 5); // Deduct 5 skill coins
         } else {
-          keywordDisplay.innerHTML = "<p>No keywords available for this role.</p>";
+            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));
-}  
+    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));
+}

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%;