Feature/stars 2

src/css/rating-popup.css

@@ -62,6 +62,16 @@
     fill: var(--rating-color);
 }
 
+.modal-rating__rating polygon:hover {
+    cursor: pointer;
+    fill: var(--accent-color);
+    transition: all var(--tran-icon);
+}
+
+.modal-rating__rating polygon.active {
+    fill: var(--accent-color);
+}
+
 .modal-rating__form {
     display: flex;
     flex-direction: column;

src/js/exercise-popup.js

@@ -214,7 +214,7 @@ function showModalExercise() {
 function closeModalExercise() {
     overlay.classList.add('hidden');
     modalExercise.classList.add('hidden');
-    document.body.style.overflow = 'scroll';
+    document.body.style.overflow = 'auto';
     overlay.removeEventListener('click', clickOnOverlay);
     document.removeEventListener('keydown', clickOnEscape);
 };

src/js/rating-popup.js

@@ -2,17 +2,47 @@ import icons from '/img/icons.svg';
 
 const modalExercise = document.querySelector('.js-modal-exercise');
 const modalRating = document.querySelector('.js-modal-rating');
+const starsIcons = document.querySelector('.js-stars-svg');
 
 export function openModalRating() {
     const buttonRating = document.querySelector('.js-rating__btn');
 
     modalRating.innerHTML = markUp();
     showModalRating();
 
-    const closeModalRatingButton = document.querySelector('.js-modal-rating__btn-close'); 
+    const closeModalRatingButton = document.querySelector('.js-modal-rating__btn-close');
+    const starsIcons = document.querySelector('.js-stars-svg');
     closeModalRatingButton.addEventListener('click', closeModalRating);
+    starsIcons.addEventListener('click', changeStarsRating);
+    // starsIcons.addEventListener('mouseover', handleHoverEvent);
+    listenPolygons();
 };
 
+function submitRating() {
+    document.querySelector('.js-rating-form').addEventListener('submit', e => {
+        e.preventDefault();
+    })
+}
+
+function listenPolygons () {
+    const polygons = document.querySelectorAll('.js-stars-svg polygon');
+
+    polygons.forEach(polygon => {
+        polygon.addEventListener('mouseenter', function() {
+            const value = parseInt(this.getAttribute('data-value'));
+
+            polygons.forEach((p, index) => {
+                if (index < value) {
+                    p.classList.add('active');
+                    document.querySelector('.js-rating-value').textContent = value;
+                } else {
+                    p.classList.remove('active');
+                }
+            });
+        });
+    });
+}
+
 function showModalRating() {
     modalExercise.classList.add('hidden');
     modalRating.classList.remove('hidden');
@@ -23,6 +53,18 @@ function closeModalRating() {
     modalRating.classList.add('hidden');
 };
 
+function changeStarsRating(e) {
+    const starsIcons = document.querySelector('.js-stars-svg');
+    let value = e.target.dataset.value;
+    value && (starsIcons.parentNode.dataset.value = value);
+    starsIcons.querySelectorAll('polygon').forEach(star => {
+    let on = starsIcons.parentNode.dataset.value >= star.dataset.value;
+    star.classList.toggle('active', on);
+    });
+    document.querySelector('.js-rating-value').textContent = value;
+    submitRating()
+};
+
 function markUp() {
     return `
     <div class="modal-rating__container">
@@ -33,8 +75,8 @@ function markUp() {
         </button>
 
         <div class="modal-rating__rating">
-        0.0
-            <svg width="110" height="20">
+            <span class="js-rating-value">0</span>
+            <svg width="110" height="20" class="js-stars-svg">
                 <polygon data-value="1" transform="translate(0,0)" points="10,1 4,19.8 19,7.8 1,7.8 16,19.8"></polygon>
                 <polygon data-value="2" transform="translate(22,0)" points="10,1 4,19.8 19,7.8 1,7.8 16,19.8"></polygon>
                 <polygon data-value="3" transform="translate(44,0)" points="10,1 4,19.8 19,7.8 1,7.8 16,19.8"></polygon>
@@ -43,7 +85,7 @@ function markUp() {
             </svg>
         </div>
 
-        <form class="modal-rating__form">
+        <form class="modal-rating__form js-rating-form">
             <input class="modal-rating__email" type="email" name="email" placeholder="Email" required />
 
             <textarea class="modal-rating__comment" name="comment" placeholder="Your comment"></textarea>