Skip to content

Commit

Permalink
added function to stars
Browse files Browse the repository at this point in the history
  • Loading branch information
@EkaterinaPashina
EkaterinaPashina committed Jul 22, 2023
1 parent 026ae87 commit e47b2c2
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 2 deletions.
85 changes: 83 additions & 2 deletions js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ function createCard(superhero) {
<p class="hero__occupation"><span class="header">Род деятельности: </span>${superhero.occupation}</p>
<p class="hero__friends"><span class="header">Друзья: </span>${superhero.friends}</p>
<p class="hero__superpowers"><span class="header">Суперсилы: </span>${superhero.superpowers}</p>
<div class="stars">
<img src="images/star.png" class="star" id="${superhero.name.replaceAll(' ', '')}Star1">
<img src="images/star.png" class="star" id="${superhero.name.replaceAll(' ', '')}Star2">
<img src="images/star.png" class="star" id="${superhero.name.replaceAll(' ', '')}Star3">
<img src="images/star.png" class="star" id="${superhero.name.replaceAll(' ', '')}Star4">
<img src="images/star.png" class="star" id="${superhero.name.replaceAll(' ', '')}Star5">
</div>
</section>`;
superheroes.setAttribute('class', 'card');
superheroes.innerHTML = superherocard;
Expand All @@ -24,4 +30,79 @@ function createCard(superhero) {
for (let superhero of superHeroesObj) {
let createsuperhero = createCard(superhero);
cards.append(createsuperhero);
};
};

const star = document.querySelectorAll(".star");

Array.from(document.querySelectorAll(".star")).forEach(element => {
element.addEventListener('click', function () {
let checked = this.classList.toggle('checked');
console.log(this.id);

const star1 = this.id.slice(0, -1) + '1';
const star2 = this.id.slice(0, -1) + '2';
const star3 = this.id.slice(0, -1) + '3';
const star4 = this.id.slice(0, -1) + '4';
const star5 = this.id.slice(0, -1) + '5';

if (this.id.includes('Star1')) {
document.getElementById(`${star1}`).classList.add('checked');
document.getElementById(`${star1}`).src = './images/starchecked.png';
document.getElementById(`${star2}`).classList.remove('checked');
document.getElementById(`${star2}`).src = './images/star.png';
document.getElementById(`${star3}`).classList.remove('checked');
document.getElementById(`${star3}`).src = './images/star.png';
document.getElementById(`${star4}`).classList.remove('checked');
document.getElementById(`${star4}`).src = './images/star.png';
document.getElementById(`${star5}`).classList.remove('checked');
document.getElementById(`${star5}`).src = './images/star.png';
} else if (this.id.includes('Star2')) {
document.getElementById(`${star1}`).classList.add('checked');
document.getElementById(`${star1}`).src = './images/starchecked.png';
document.getElementById(`${star2}`).classList.add('checked');
document.getElementById(`${star2}`).src = './images/starchecked.png';
document.getElementById(`${star3}`).classList.remove('checked');
document.getElementById(`${star3}`).src = './images/star.png';
document.getElementById(`${star4}`).classList.remove('checked');
document.getElementById(`${star4}`).src = './images/star.png';
document.getElementById(`${star5}`).classList.remove('checked');
document.getElementById(`${star5}`).src = './images/star.png';

} else if (this.id.includes('Star3')) {
document.getElementById(`${star1}`).classList.add('checked');
document.getElementById(`${star1}`).src = './images/starchecked.png';
document.getElementById(`${star2}`).classList.add('checked');
document.getElementById(`${star2}`).src = './images/starchecked.png';
document.getElementById(`${star3}`).classList.add('checked');
document.getElementById(`${star3}`).src = './images/starchecked.png';
document.getElementById(`${star4}`).classList.remove('checked');
document.getElementById(`${star4}`).src = './images/star.png';
document.getElementById(`${star5}`).classList.remove('checked');
document.getElementById(`${star5}`).src = './images/star.png';

} else if (this.id.includes('Star4')) {
document.getElementById(`${star1}`).classList.add('checked');
document.getElementById(`${star1}`).src = './images/starchecked.png';
document.getElementById(`${star2}`).classList.add('checked');
document.getElementById(`${star2}`).src = './images/starchecked.png';
document.getElementById(`${star3}`).classList.add('checked');
document.getElementById(`${star3}`).src = './images/starchecked.png';
document.getElementById(`${star4}`).classList.add('checked');
document.getElementById(`${star4}`).src = './images/starchecked.png';
document.getElementById(`${star5}`).classList.remove('checked');
document.getElementById(`${star5}`).src = './images/star.png';

} else if (this.id.includes('Star5')) {
document.getElementById(`${star1}`).classList.add('checked');
document.getElementById(`${star1}`).src = './images/starchecked.png';
document.getElementById(`${star2}`).classList.add('checked');
document.getElementById(`${star2}`).src = './images/starchecked.png';
document.getElementById(`${star3}`).classList.add('checked');
document.getElementById(`${star3}`).src = './images/starchecked.png';
document.getElementById(`${star4}`).classList.add('checked');
document.getElementById(`${star4}`).src = './images/starchecked.png';
document.getElementById(`${star5}`).classList.add('checked');
document.getElementById(`${star5}`).src = './images/starchecked.png';
}
});
});
9 changes: 9 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,13 @@ img {

.header {
font-weight: bold;
}

.stars {
display: flex;
justify-content: center;
}

.star {
width: 3rem;
}

0 comments on commit e47b2c2

Please sign in to comment.