0
316
ViewsRewrite code into classes using object-oriented programming (OOP)
I made a rating as in the author's video: https://www.youtube.com/watch?v=dsRJTxieD4U
const rateStars = document.querySelectorAll('.js-rate');
rateStars.forEach((rateStar, clickedIdx) => {
rateStar.addEventListener('click', () => {
rateStars.forEach((otherRateStar, otherIdx) => {
if (otherIdx <= clickedIdx) {
otherRateStar.classList.add('rate__item_active');
};
});
});
});
Everything works perfectly, but my task is to create a js-class (OOP)
//rate.pug
mixin rate(params = {})
-
const {
rating= "",
} = params;
let i = 0;
.rate
ul.rate__list
while i < 5
if (i < rating)
li.rate__item(class= "js-rate rate__item_active")
else
li.rate__item(class= "js-rate")
- i++
I got the following code structure:
// index.js
import Rate from './Rate';
const rateStars = document.querySelectorAll('js-rate');
rateStars.forEach((rateStar, clickedIdx) => new Rate(rateStar, clickedIdx));
// Rate.js
class Rate {
constructor(rateStar, clickedIdx) {
this.rateStar = rateStar;
this.clickedIdx = clickedIdx;
this.bindEventListeners();
}
bindEventListeners() {
this.rateStar.addEventListener('click', this.handleRateClick.bind(this));
}
handleRateClick() {
this.rateStar.classList.add('rate__item_active');
}
}
export default Rate;
However, I have no idea how to proceed from here.
Sorry I'm a complete noob. This is my first time asking a question here.
the task is complicated by the fact that you need to place several ratings on one page.I write some mixins:
When there are several ratings on the page, then the stars are added to all the ratings.
1)this is the default state
- After click
1 answers
Answer question0
So the problem of your change to class, is that you're not adding rate__item_active to the previous stars as you're doing in the first code example.
So for your class to work like the first code example, this is how you should do it:
// index.js
import Rate from './Rate';
rateStars.forEach((rateStar, index) => new Rate(rateStar, index, rateStars));
// Rate.js
class Rate {
constructor(rateStar, index, rateStars) {
this.rateStar = rateStar;
this.clickedIdx = index;
this.rateStars = rateStars;
this.bindEventListeners();
}
bindEventListeners() {
this.rateStar.addEventListener('click', this.handleRateClick.bind(this));
}
handleRateClick() {
for(let i = 0; i <= this.clickedIdx; i++) {
this.rateStars[i].classList.add('rate__item_active');
}
}
}
export default Rate;