Making it responsive!
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?Any feedback regarding clean code, accessibility, semantic HTML, or anything else are all welcomed!
I was most proud of my media queries, as this is my first time I meddled with one. It was fun! I was also proud of manually setting my and elements, as it is so troublesome.
What challenges did you encounter, and how did you overcome them?I had difficulties in setting the and as the padding is a little bit.. weird? I also had difficulties in setting the size for the card - turns out I haven't properly reset the elements (box-sizing: border-box) (I forgot about it).
What specific areas of your project would you like help with?I'm not sure. How do you all configure your list? Do you use flex alongside w/ the bullet? Or do you use vanilla and ?
Improved my accessability a little bit by using more semantic tags and a role attribute. Im feeling faster and more sure of what I'm doing in both HTML and CSS.
What challenges did you encounter, and how did you overcome them?No real challenges
What specific areas of your project would you like help with?Areas I would like help with is still my accessablility and structuring of my CSS. Maybe my use of git too. Like my commits and stuff.
Your feedback is valuable to me!
How can use addEventListener() with querySelectorAll("#rating")? The code is written in rating.js (https://github.com/AmitKumar-001/Project-From-Frontend-Mentor/blob/main/Interactive-Rating-Component-Main/rating.js) gives some errors in the console.
Hey AmitKumar, how you doing? I read your code and I have some things to talk about. Just like you I started to code a few couple months ago, so if a say something wrong, I'm sorry (laughing in brazilian).
First, your HTML
CSS
Your script
About querySelectorAll(), I did the same has you, but I use classes and not ID
About addEventListener(), I used click event and a for loop to verify which button was clicked and setTimeOut to return to the first page
for (let i = 0; i < BUTTONS.length; i++) {
BUTTONS[i].addEventListener('click', ()=> {
SUBMIT.addEventListener('click', () => {
MAIN.classList.replace('show', 'hide')
RATED.classList.replace('hide', 'show')
SCORE.innerText = `You selected ${BUTTONS[i].value} out of 5`
})
setTimeout(function() {
RATED.classList.replace('show', 'hide')
MAIN.classList.replace('hide', 'show')
}, 5000)
}) }```