From e47b2c2c7c106624a2c679862a92b8f64d7507b0 Mon Sep 17 00:00:00 2001
From: EkaterinaPashina <k377at@mail.ru>
Date: Sun, 23 Jul 2023 00:05:38 +0500
Subject: [PATCH] added function to stars

---
 js.js      | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 styles.css |  9 ++++++
 2 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/js.js b/js.js
index 450a380..3217936 100644
--- a/js.js
+++ b/js.js
@@ -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;
@@ -24,4 +30,79 @@ function createCard(superhero) {
 for (let superhero of superHeroesObj) {
     let createsuperhero = createCard(superhero);
     cards.append(createsuperhero);
-};
\ No newline at end of file
+};
+
+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';
+        }
+    });
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 07b59d2..89e1644 100644
--- a/styles.css
+++ b/styles.css
@@ -28,4 +28,13 @@ img {
 
 .header {
     font-weight: bold;
+}
+
+.stars {
+    display: flex;
+    justify-content: center;
+}
+
+.star {
+    width: 3rem;
 }
\ No newline at end of file