All solutions

Any feedback is welcome.

In my css file, i had to provide hard coded value as max-width:300px to set the 50% of the view for text and the remaining 50% for image. (line 141 in the code for reference).I couldnt make the image as half otherwise.Please suggest how i could improve this .Any other feedback is also welcome.

Although the project is working as expected,but in my index.js file:

//adding click event lister for submit button
    submitBtn.addEventListener('click',()=>{
        if(ratingState.style.display != 'block'){
            console.log(clickedRatingVal);
            //rating card will not display and thank you card will display
            ratingState.style.display = 'none';
            thankState.style.display = 'block';
            //shows the rating selected by the user
            ratingMsg.innerHTML = `You selected ${clickedRatingVal} out of 5`; 
        }
    }) 

I set the display of div to block for my rating-state div but when i tried changing its state using (ratingState.style.display == 'block') , this value came out to be false instead of true.So the only option for me was to use (ratingState.style.display != 'block . Can anyone help why this doesnt work out.Thanks in advance.

Although i am aware of using media queries for sizing accordion according to different sizes but somehow i feel this is not the most efficient way to do it. Will appreciate any feedback on how to improve from here in CSS of my project,

Any feedback on improving more in CSS will be appreciated. Thanks

Created QR component as my first challenge. I think I can improve more on CSS. Any feedback from your side will be appreciated. Thanks