Skip to content

Commit

Permalink
Merge branch 'main' into ratingbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohitranag18
Mohitranag18 authored Oct 29, 2024
2 parents 903eecd + 0061ade commit ec79f3f
Show file tree
Hide file tree
Showing 11 changed files with 2,175 additions and 1,499 deletions.
45 changes: 37 additions & 8 deletions RateMyResume.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
body{
background: linear-gradient(135deg, #dedfe0, #e7ebf0);
}
.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 {
padding: 60px 20px;
text-align: center;
Expand Down Expand Up @@ -38,9 +52,9 @@ body{
.features-list li {
margin: 10px 0;
}
.hero-content i{
font-size: 1.8rem;
color: rgb(255, 187, 0);
.fa-coins{
font-size: 2rem;
color: rgb(246, 180, 0);
}
.hero-content p{
font: 2.5rem;
Expand Down Expand Up @@ -116,10 +130,10 @@ body{
}
.card{
width: 30%;
height: 35rem;
height: auto;
background-color: #003d4d;
border-radius: 2rem;
padding: 2rem;
padding: 0 2rem;
position: relative;
color: white;
display: flex;
Expand All @@ -133,7 +147,12 @@ body{
object-fit: cover;
object-position: top;
border-radius: 2rem;
margin-bottom: 1.5rem;
}
.card .personinfo{
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.card h2{
font-size: 1.7rem;
Expand All @@ -148,12 +167,23 @@ body{
justify-content: space-evenly;
align-items: center;
width: 100%;
margin-top: 2rem;
}
.card .star-rating i{
font-size: 2.5rem;
color: rgb(236, 236, 236);
}
.submitbtn{
background-color: blue;
padding: 0.8rem 1.5rem;
border-radius: 1rem;
font-size: 1.3rem;
font-weight: 600;
border: 2px solid white;
cursor: pointer;
&:hover{
background-color: rgb(0, 0, 198);
}
}
form {
background-color: #003d4d;
padding: 20px;
Expand Down Expand Up @@ -210,7 +240,6 @@ button:hover {
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 1.5rem;
}
.download-button:hover {
background-color: #37913b;
Expand Down
70 changes: 43 additions & 27 deletions RateMyResume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
<a href="about.html" class="fas fa-info-circle"></a>
<a href="#" class="fas fa-envelope"></a>
<a href="login.html" id="loginIcon" class="fas fa-user"></a>
<i class="fa-solid fa-coins"></i> <p id="SkillCoins"></p>
</div>
</header>
<style>
Expand Down Expand Up @@ -90,44 +91,59 @@ <h2>Upload Your Resume</h2>
</form>
</div>
<div class="ratingboard">
<div class="card">
<div class="card card1">
<img src="images/sample-resume1.jpg" alt="">
<h2>Olivia Wilson</h2>
<h3>Graphic Designer</h3>
<div class="personinfo">
<h2>Olivia Wilson</h2>
<h3>Graphic Designer</h3>
</div>
<a href="path/to/your-resume.pdf" download="My_Resume.pdf" class="download-button">Download & View</a>
<div class="star-rating">
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
</div>
<div class="star" data-rating="1"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="2"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="3"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="4"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="5"><i class="fa-regular fa-star"></i></div>
</div>
<div class="submitbtn">
Submit
</div>
</div>
<div class="card">
<div class="card card2">
<img src="images/sample-resume2.jpg" alt="">
<h2>Richard Sanchez</h2>
<h3>Marketing Manager</h3>
<div class="personinfo">
<h2>Richard Sanchez</h2>
<h3>Marketing Manager</h3>
</div>
<a href="path/to/your-resume.pdf" download="My_Resume.pdf" class="download-button">Download & View</a>
<div class="star-rating">
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
</div>
<div class="star" data-rating="1"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="2"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="3"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="4"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="5"><i class="fa-regular fa-star"></i></div>
</div>
<div class="submitbtn">
Submit
</div>
</div>
<div class="card">
<div class="card card3">
<img src="images/sample-resume6.jpg" alt="">
<h2>Raj Patel</h2>
<h3>Software Engineer</h3>
<div class="personinfo">
<h2>Raj Patel</h2>
<h3>Software Engineer</h3>
</div>
<a href="path/to/your-resume.pdf" download="My_Resume.pdf" class="download-button">Download & View</a>
<div class="star-rating">
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
<i class="fa-regular fa-star" onclick="toggleStar(this)"></i>
</div>
<div class="star" data-rating="1"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="2"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="3"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="4"><i class="fa-regular fa-star"></i></div>
<div class="star" data-rating="5"><i class="fa-regular fa-star"></i></div>
</div>
<div class="submitbtn">
Submit
</div>
</div>
</div>
</div>
Expand Down
57 changes: 46 additions & 11 deletions RateMyResume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,49 @@ myratinghead.addEventListener('click',()=>{
ratingboardhead.style.backgroundColor = 'blue';
})

// JavaScript Logic
function toggleStar(star) {
// Check if the star is already solid
if (star.classList.contains("fa-solid")) {
star.classList.remove("fa-solid");
star.classList.add("fa-regular");
} else {
star.classList.remove("fa-regular");
star.classList.add("fa-solid");
}
}
// JavaScript to handle 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
} else {
starIcon.classList.remove('fa-solid'); // Remove filled star
starIcon.classList.add('fa-regular'); // Add empty star
}
});
});
});
});

let skillcoins = 0;
const coinsdata = document.querySelector('#SkillCoins');

const updateCoins = () => {
coinsdata.textContent = skillcoins;
};
updateCoins();

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

Loading

0 comments on commit ec79f3f

Please sign in to comment.