All solutions

Hey there! That is another one project I did for this amazing platform.

Generally layout wasn't hard at all. I found a little bit tricky the gradient border and I did it with a little bit cheat solution by placing a rounded div with gradient background and I placed an white pseudo element over that div using grid. Later I discovered that I could achieve that using only border-image-source and assign gradient to it. Way simpler solution I guess.

I faced an issue that I solved randomly and I haven't understood why that works. The form component has an input field inside that keeps constant width while I haven't give it any value by myself. The problem is solved when I use any value for width, doesn't matter what value.

Thank you for reviewing my project and thank you in advance for all comments :D

Hey there!

That is my attempt to make an interactive rating card which I think I did it! I'm pretty happy with the result. Although I feel a little bit unsure about the state management I did in javascript and the approach of hiding and revealing sections using Element#attributeToggle method.

Also I modified a little bit the user experience so I did the button disabled and chose that gray color so it might look a little bit different in first look. I think it's a little bit better that the button gets enabled after user pick any number. Also I swapped hover and selected colors because to my mind it makes more sense when selected item has the primary color and hover just a little bit offset-ed color than original

Feel free to criticize my work and suggest to me some small or huge changes in order to make my code better. Thank you in advance!

I found a little bit tricky how can I change the image source because they are 2 versions(mobile and desktop) of the image. I'm a little bit unsure about the way I placed the image. I did it using background css property I think srcset could be better solution. What do you think about it?