Skip to content

Commit

Permalink
Merge pull request #52 from ViktorSvertoka/modalRating
Browse files Browse the repository at this point in the history 
Update modalRating
  • Loading branch information
@ViktorSvertoka
ViktorSvertoka authored Dec 17, 2023
2 parents 5c9f4ad + bb3be31 commit 69f828f
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 88 deletions.
10 changes: 9 additions & 1 deletion src/css/layout/06-modal-rating.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,21 @@
.rating-icon-close:focus {
cursor: pointer;
border-radius: 50%;
background-color: #f4f4f4;
background-color: #000000;
}

.rating-input {
display: none;
}

.rating-star {
fill: rgba(244, 244, 244, 0.2);
}

.rating-star.rated {
fill: #eea10c;
}

.rating-label {
display: flex;
cursor: pointer;
Expand Down
114 changes: 83 additions & 31 deletions src/js/06-modal-rating.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,92 @@
document.addEventListener('DOMContentLoaded', function () {
const ratingStars = document.querySelectorAll('.rating-label');
const ratingValue = document.querySelector('.rating-value');
const ratingForm = document.querySelector('.rating-form');
import axios from 'axios';
import iziToast from 'izitoast';

let ratingCount = 0;
class RatingModal {
constructor() {
this.modalExercises = document.querySelector('.modal-exercises');
this.modalRating = document.querySelector('.modal-rating');
this.stars = document.querySelectorAll('.rating-star');
this.ratingValue = document.querySelector('.rating-value');
this.ratingForm = document.querySelector('.rating-form');
this.ratingEmail = document.querySelector('.rating-email');
this.ratingComment = document.querySelector('.rating-comment');
this.ratingSubmitBtn = document.querySelector('.rating-submit-btn');

ratingStars.forEach(star => {
star.addEventListener('click', () => {
ratingCount = star.dataset.rating;
updateRating(ratingCount);
});
});

function updateRating(count) {
ratingValue.textContent = count;
this.setupModalToggle();
this.setupStarRating();
this.setupFormSubmission();
}

for (let i = 0; i < ratingStars.length; i++) {
if (i < count) {
ratingStars[i].classList.add('active');
} else {
ratingStars[i].classList.remove('active');
}
}
setupModalToggle() {
$(document).ready(() => {
$('.modal-exercises .btn').click(() => {
this.modalExercises.modal('hide');
this.modalRating.modal('show');
});
});
}

ratingForm.addEventListener('submit', function (event) {
event.preventDefault();
setupStarRating() {
this.stars.forEach(star => {
star.addEventListener('click', () => {
const value = star.getAttribute('rating-value');
document.querySelectorAll('.rating-star.rated').forEach(star => {
star.classList.remove('rated');
});
for (let i = 0; i < value; i++) {
this.stars[i].classList.add('rated');
}
this.ratingValue.textContent = value + '.0';
});
});
}

const ratingEmail = document.querySelector('.rating-email').value;
const ratingComment = document.querySelector('.rating-comment').value;
setupFormSubmission() {
this.ratingForm.addEventListener('submit', e => {
e.preventDefault();
this.submitRating();
});
}

if (!ratingEmail || !ratingComment) {
alert('Please fill out the email and comment fields');
return;
submitRating() {
const email = this.ratingEmail.value;
const comment = this.ratingComment.value;
const rating = this.ratingValue.textContent;
if (email && comment && rating) {
const data = JSON.stringify({
email: email,
comment: comment,
rating: rating,
});
axios
.post('https://your-energy.b.goit.study/api/', data)
.then(response => {
if (response.status === 200) {
iziToast.success({
title: 'Success',
message: 'Your rating has been submitted successfully!',
position: 'topRight',
});
this.modalRating.modal('hide');
this.modalExercises.modal('show');
}
})
.catch(error => {
iziToast.error({
title: 'Error',
message:
'There was an error submitting your rating. Please try again.',
position: 'topRight',
});
});
} else {
iziToast.warning({
title: 'Warning',
message: 'Please fill in all fields before submitting your rating.',
position: 'topRight',
});
}
}
}

alert('Rating submitted successfully!');
});
});
new RatingModal();
125 changes: 69 additions & 56 deletions src/partials/06-modal-rating.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,71 @@
<div class="is-hidden"></div>
<div class="rating-container">
<a class="rating-close-btn">
<svg class="rating-icon-close">
<use href="./img/sprite.svg#icon-close-btn"></use>
</svg>
</a>
<div class="modal-rating overlay is-hidden">
<div class="rating-container">

<fieldset class="rating-fieldset">
<legend class="rating-title">Rating</legend>

<input class="rating-input" type="ratio" id="star1" name="rating" />
<label class="rating-label" for="star1">
<svg class="rating-star">
<use href="./img/sprite.svg#icon-star"></use>
</svg>
</label>
<input class="rating-input" type="ratio" id="star2" name="rating" />
<label class="rating-label" for="star2">
<svg class="rating-star">
<use href="./img/sprite.svg#icon-star"></use>
</svg>
</label>
<input class="rating-input" type="ratio" id="star3" name="rating" />
<label class="rating-label" for="star3">
<svg class="rating-star">
<use href="./img/sprite.svg#icon-star"></use>
</svg>
</label>
<input class="rating-input" type="ratio" id="star4" name="rating" />
<label class="rating-label" for="star4">
<svg class="rating-star">
<use href="./img/sprite.svg#icon-star"></use>
</svg>
</label>
<input class="rating-input" type="ratio" id="star5" name="rating" />
<label class="rating-label" for="star5">
<svg class="rating-star">
<use href="./img/sprite.svg#icon-star"></use>
<a class="rating-close-btn">
<svg class="rating-icon-close" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"
fill="none">
<path d="M19.8334 8.16675L8.16675 19.8334M8.16675 8.16675L19.8334 19.8334" stroke="#F4F4F4" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</label>
</fieldset>
<form class="rating-form">
<input
class="rating-email"
type="email"
name="email"
placeholder="Email"
required
/>
<textarea
class="rating-comment"
name="comment"
placeholder="Your comment"
></textarea>
<button class="rating-submit-btn" type="submit">Send</button>
</form>
</div>
</a>

<fieldset class="rating-fieldset">
<legend>Rating</legend>

<p class="rating-value">0.0</p>

<input class="rating-input" type="ratio" id="star1" name="rating" />
<label class="rating-label" for="star1">
<svg class="rating-star" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"
fill="none">
<path
d="M9.04894 0.927052C9.3483 0.00574112 10.6517 0.00573993 10.9511 0.927051L12.4697 5.60081C12.6035 6.01284 12.9875 6.2918 13.4207 6.2918H18.335C19.3037 6.2918 19.7065 7.53141 18.9228 8.10081L14.947 10.9894C14.5966 11.244 14.4499 11.6954 14.5838 12.1074L16.1024 16.7812C16.4017 17.7025 15.3472 18.4686 14.5635 17.8992L10.5878 15.0106C10.2373 14.756 9.7627 14.756 9.41221 15.0106L5.43648 17.8992C4.65276 18.4686 3.59828 17.7025 3.89763 16.7812L5.41623 12.1074C5.55011 11.6954 5.40345 11.244 5.05296 10.9894L1.07722 8.10081C0.293507 7.53141 0.696283 6.2918 1.66501 6.2918H6.57929C7.01252 6.2918 7.39647 6.01284 7.53035 5.60081L9.04894 0.927052Z"
fill="#F4F4F4" fill-opacity="0.2" />
</svg>
</label>
<input class="rating-input" type="ratio" id="star2" name="rating" />
<label class="rating-label" for="star2">
<svg class="rating-star" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"
fill="none">
<path
d="M9.04894 0.927052C9.3483 0.00574112 10.6517 0.00573993 10.9511 0.927051L12.4697 5.60081C12.6035 6.01284 12.9875 6.2918 13.4207 6.2918H18.335C19.3037 6.2918 19.7065 7.53141 18.9228 8.10081L14.947 10.9894C14.5966 11.244 14.4499 11.6954 14.5838 12.1074L16.1024 16.7812C16.4017 17.7025 15.3472 18.4686 14.5635 17.8992L10.5878 15.0106C10.2373 14.756 9.7627 14.756 9.41221 15.0106L5.43648 17.8992C4.65276 18.4686 3.59828 17.7025 3.89763 16.7812L5.41623 12.1074C5.55011 11.6954 5.40345 11.244 5.05296 10.9894L1.07722 8.10081C0.293507 7.53141 0.696283 6.2918 1.66501 6.2918H6.57929C7.01252 6.2918 7.39647 6.01284 7.53035 5.60081L9.04894 0.927052Z"
fill="#F4F4F4" fill-opacity="0.2" />
</svg>
</label>
<input class="rating-input" type="ratio" id="star3" name="rating" />
<label class="rating-label" for="star3">
<svg class="rating-star" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"
fill="none">
<path
d="M9.04894 0.927052C9.3483 0.00574112 10.6517 0.00573993 10.9511 0.927051L12.4697 5.60081C12.6035 6.01284 12.9875 6.2918 13.4207 6.2918H18.335C19.3037 6.2918 19.7065 7.53141 18.9228 8.10081L14.947 10.9894C14.5966 11.244 14.4499 11.6954 14.5838 12.1074L16.1024 16.7812C16.4017 17.7025 15.3472 18.4686 14.5635 17.8992L10.5878 15.0106C10.2373 14.756 9.7627 14.756 9.41221 15.0106L5.43648 17.8992C4.65276 18.4686 3.59828 17.7025 3.89763 16.7812L5.41623 12.1074C5.55011 11.6954 5.40345 11.244 5.05296 10.9894L1.07722 8.10081C0.293507 7.53141 0.696283 6.2918 1.66501 6.2918H6.57929C7.01252 6.2918 7.39647 6.01284 7.53035 5.60081L9.04894 0.927052Z"
fill="#F4F4F4" fill-opacity="0.2" />
</svg>
</label>
<input class="rating-input" type="ratio" id="star4" name="rating" />
<label class="rating-label" for="star4">
<svg class="rating-star" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"
fill="none">
<path
d="M9.04894 0.927052C9.3483 0.00574112 10.6517 0.00573993 10.9511 0.927051L12.4697 5.60081C12.6035 6.01284 12.9875 6.2918 13.4207 6.2918H18.335C19.3037 6.2918 19.7065 7.53141 18.9228 8.10081L14.947 10.9894C14.5966 11.244 14.4499 11.6954 14.5838 12.1074L16.1024 16.7812C16.4017 17.7025 15.3472 18.4686 14.5635 17.8992L10.5878 15.0106C10.2373 14.756 9.7627 14.756 9.41221 15.0106L5.43648 17.8992C4.65276 18.4686 3.59828 17.7025 3.89763 16.7812L5.41623 12.1074C5.55011 11.6954 5.40345 11.244 5.05296 10.9894L1.07722 8.10081C0.293507 7.53141 0.696283 6.2918 1.66501 6.2918H6.57929C7.01252 6.2918 7.39647 6.01284 7.53035 5.60081L9.04894 0.927052Z"
fill="#F4F4F4" fill-opacity="0.2" />
</svg>
</label>
<input class="rating-input" type="ratio" id="star5" name="rating" />
<label class="rating-label" for="star5">
<svg class="rating-star" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"
fill="none">
<path
d="M9.04894 0.927052C9.3483 0.00574112 10.6517 0.00573993 10.9511 0.927051L12.4697 5.60081C12.6035 6.01284 12.9875 6.2918 13.4207 6.2918H18.335C19.3037 6.2918 19.7065 7.53141 18.9228 8.10081L14.947 10.9894C14.5966 11.244 14.4499 11.6954 14.5838 12.1074L16.1024 16.7812C16.4017 17.7025 15.3472 18.4686 14.5635 17.8992L10.5878 15.0106C10.2373 14.756 9.7627 14.756 9.41221 15.0106L5.43648 17.8992C4.65276 18.4686 3.59828 17.7025 3.89763 16.7812L5.41623 12.1074C5.55011 11.6954 5.40345 11.244 5.05296 10.9894L1.07722 8.10081C0.293507 7.53141 0.696283 6.2918 1.66501 6.2918H6.57929C7.01252 6.2918 7.39647 6.01284 7.53035 5.60081L9.04894 0.927052Z"
fill="#F4F4F4" fill-opacity="0.2" />
</svg>
</label>
</fieldset>
<form class="rating-form">
<input class="rating-email" type="email" name="email" placeholder="Email" required>

<textarea class="rating-comment" name="comment" placeholder="Your comment"></textarea>

<button class="rating-submit-btn" type="submit">Send</button>
</form>
</div>
</div>

0 comments on commit 69f828f

Please sign in to comment.