It seemed to me i can't do it. But with each completed task it became easier and easier. Much difficulties were in using redux. It became clear to me, this tool plays a huge role in the app. Glad to present this proj. Open to any feedback!
Nice design!
I've found only 2 issues in your project:
I will let you opportunity to solve this on your own, but if you have some issues, I will be pleased to help you!
Happy to complete my firs Javascript Challenge.
All reviews are welcome.
How did you match the colors for the dialogue boxes with the ones in the design?
I used CSS color mix property.
How can I improve the logic and design?
I have given ID values of "1","2"..."5" to the options and clicks fetch the elemet.target.id values to the updateScore function. For some reason my javascript function kept returning "undefined" for my event.target.value selector, despite mentioning the values. What could be the reason?
Hello, the design looks very nice, good job!
I think the logic of your app is not perfect, because it should let you pick one of 5 ratings and then show the result. At this moment you can pick all ratings and additionally - you can't "unclick" clicked rating. Just write a function that checks if any rating is currently selected and if it is - remove selection and add to currently clicked one. Another approach (which I preffered) was removing selection from all rating elements and adding one to clicked. Good luck!
please can someone explain responsiveness and how I can apply it on both mobile and desktop? thank you!
Hi, if you want to set different styles on different screen size you have to use media queries.
To do this you can wrap all your styles in:
@media (max-width: 400px) {
***your styles***
}
It means that all of your styling will be applied until page width crosses 400px.
So you can copy all your styles twice. One for @media (max-width: 400px) {} and one for @media (min-width: 401px) {} and then just style it for desktop. In that the changes won't be applied for Mobile View.
And about responsiveness I have one advice:
Avoid hard height and width settings of the elements unless you really have to do it.
Pages are responsive by default. But if you have to do it temporarly, use max-width or min-width instead of width. Same rule for height. And try to set it with vw and vh instead of px.
vw is ViewportWidth (100vw means it will always have width equal to page width). vh is ViewportHeight (100vh means it will always have height equal to page height).
Good luck!
It took me close to 10h to finish this. Way more than it supposed to. I learned a ton and hope it will stick around.
Weird relation between position:relative; and sudo elements couldn't get the arrow to spin on clicking the header for the life of me even chat.gpt and phid but were prompt to explain once I figured it out after 1.5h hour of "research"
Positioning was another challenge that kept me on my toes until the last minute as hidden just made a fool of me with this last box and took me a while to appreciate position:relative; many youtubers seem to love absolute but fail to mention relative as a parent which makes life so much easier
as I'm fairly new to JS that was fairly difficult for me and I learned a ton
in general, learned ton of new staff for which there is no tutorial on youtube that could prepare me. Practice is completely a different beast compared following a tutorial.
I'm pretty happy with it, but I can't fully understand something: 1. [FIXED] How to make site look nice when zooming in and out?
2. Why 'object-fit' didn't work on desktop version?
Thank you!
